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放进ajax请求的成功的回调函数里，同时，对应的require的代码也应该放进成功的回调函数。如果是动态存放数据的话，可以把文中上述的drawExharts函数也分开写，成功的回调函数示例如下：

原文有更详细的代码，但是代码是几年前的，需要的童鞋可以参考下实现： 原文