echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据

最近做的一个项目的其中一个页面有图表展示数据的需求，有柱状图、折线图和饼图，于是引入了强大的echarts.
echarts的强大之处和有点这里就不多说了，详细请参照echarts官网和echarts在线demo。
但是我们的页面要展示的数据比较多，同一个页面有数个折线图、柱状图和饼图。项目引入echarts的方法是模块化引入，于是就有了一个问题：怎么在同一个页面用echarts同时展示多个图？（如下图：两个图表区域，7个tab都是图表，其中包括柱状图、折线图、饼图，还有既有柱状图又有折线图）

使用了echarts的应该知道，echarts的使用是容器的ID和一个放入它的option对应，那么多个图的话，为了避免option冲突，把每个个ID的div容器对应一个函数，然后在每个对应的函数里定义其需要的option。
一下写这么多文字，看起来不太好理解，直接看代码：
1、echarts配置：

require.config({
    packages: [
        {
            name: 'echarts',
            location: 'echarts/src',
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: 'zrender/src', // zrender与echarts在同一级目录
            main: 'zrender'
        }
    ]
});
require(
    [
        'echarts',
        'echarts/chart/line',
        'echarts/chart/bar',
        'echarts/chart/pie'
    ],
    drawExharts//在这里放所有的图表函数
);

2、定义drawExharts函数

function drawExharts(ec){
   $scope.fundBar(ec);
    $scope.equityBar(ec);
    $scope.equityBar_money(ec);
    $scope.equityPie_1(ec);
    $scope.equityPie_2(ec);
    $scope.debt_num(ec);
    $scope.debt_money(ec);
};

3、定义各个图表的函数，也就是这些：

函数的代码如下（由于这7个函数内部结构一样，只是option的参数不同，在此为了减少文章篇幅，仅给出一个示例）：

具体代码：

$scope.fundBar = function(ec){
    var fundChart = ec.init(document.getElementById('fundID1'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {     // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'   // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        title : {
            text: '图表-1',
            x:'center'
        },
        legend: {
            y:'bottom',
            selectedMode:false,
            data:['柯南', '福尔摩斯','希区柯克']
        },
        calculable : false,//禁止拖动
        xAxis : [
            {
                type : 'category',
                splitLine:{
                    show:false
                },
                data : [1,2,3,4,5,6]
            }
        ],
        yAxis : [
            {
                type : 'value',
                boundaryGap: [0, 0.1],
                // min:0,
                // max:700,
                // splitNumber:7
            }
        ],
        series : [
            {
                name:'柯南',
                type:'bar',
                stack: 'sum',
                barCategoryGap: '50%',
                itemStyle: {
                    normal: {
                        color: '#00ccff',
                        barBorderColor: '#00ccff',
                        barBorderWidth: 6,
                        barBorderRadius:0,
                        label : {
                            show: true, position: 'insideTop'
                        }
                    }
                },
                data:[220, 132, 201, 234, 190, 230, 360]
            },
            {
                name:'福尔摩斯',
                type:'bar',
                stack: 'sum',
                barCategoryGap: '50%',
                itemStyle: {
                    normal: {
                        color: '#99ff33',
                        barBorderColor: '#99ff33',
                        barBorderWidth: 6,
                        barBorderRadius:0,
                        label : {
                            show: true, position: 'insideTop',color:'#333'
                        }
                    }
                },
                data:[ 234, 190, 230, 360,200,210]
            },
            {
                name:'希区柯克',
                type:'bar',
                stack: 'sum',
                itemStyle: {
                    normal: {
                        color: '#ffcc00',
                        barBorderColor: '#ffcc00',
                        barBorderWidth: 6,
                        barBorderRadius:0,
                        label : {
                            show: true,
                            position: 'top',
                        }
                    }
                },
                data:[134, 190, 380, 330,166,160]
            }
        ]
    };
    fundChart.setOption(option);
};

如果需要动态放数据的话，可以把函数$scope.fundBar放进ajax请求的成功的回调函数里，同时，对应的require的代码也应该放进成功的回调函数。如果是动态存放数据的话，可以把文中上述的drawExharts函数也分开写，成功的回调函数示例如下：

以上就是使用echarts在同一个页面展示多个图表的一种方法，希望对您有所帮助。

个人微信公众号：侦探小禾子，闲聊育儿生活星座塔罗牌，野生法考通过者免费法律咨询，欢迎关注！