最近做的一個專案的其中一個頁面有圖表展示資料的需求，有柱狀圖、折線圖和餅圖，於是引入了強大的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在同一個頁面展示多個圖表的一種方法，希望對您有所幫助。

個人微信公眾號：小禾子的魔法盒子，歡迎關注！