动态渲染多个图表

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <#include "../inc/common-head.ftl">

    <link rel="stylesheet" href="//www.greatytc.com/css/add.css" type="text/css">
</head>


<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<#--<div id="main" style="width: 800px;height:400px;"></div>-->
<div id="all">
    <div id="main" style="width: 800px;height:400px;"></div>
</div>


<script type="text/javascript">
    var list = [
        [5, 20, 36, 10, 10, 20],
        [15, 11, 124, 10, 34, 45],
        [25, 20, 34, 23, 1, 67]
    ];

    var html = '';

    function setOption (title,xAxis,series) {
        var option = {
            title: {
                text: title
            },
            tooltip: {},
            legend: {
                data:['dd销量']
            },
            xAxis: {
                data: xAxis
            },
            yAxis: {},
            series: [{
                name: series.name,
                type: 'bar',
                data: series.data
            }]
        };
        return option;
    }


    for (var i=0;i<list.length;i++){
        html += '<div id="main-'+i+'" style="width: 800px;height:400px;"></div>';
    }
    $('#main').html(html);



    for (var i=0;i<list.length;i++){
        var myChart = echarts.init(document.getElementById('main-'+i));
        var x=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
        var series = {
            name: '第'+i+'季度销量',
            type: 'bar',
            data: list[i]
        };
        var option = setOption(i+'销售',x,series);
        myChart.setOption(option);
    }
</script>

</body>


</html>
生成效果：
image.png
动态渲染多个图表

推荐阅读更多精彩内容
