百度ECharts 3.0 多座標軸統計圖一般配置詳解（實例）

ECharts 是百度出品的jquery圖表插件。相對於Chartist，擁有更加強大的功能，以及更加詳細的文檔（ECharts的文檔形式非常優秀，簡明易懂）。ECharts支持的圖表種類非常多，同時兼容性也十分優良，故而在網站建設動態統計圖表時，是一個非常優秀的選擇。

配置

首先，配置echart首先需要在前臺模板建立一個div容器，同時必須給容器指定一個寬度或高度，因而在響應式頁面中發揮並不出色。

<div id="chart"></div>

然後便可開始正式的配置：

function createChartz(obj){     //以函數來說明，向函數中傳入創建圖表所需數據
        var myChart = echarts.init(document.getElementById('chart')); //獲取容器
        window.onresize = myChart.resize;    //主要用於網頁響應，可省略
        myChart.setOption({

            tooltip: {             //提示框
                trigger: 'axis'    //觸發類型
            },
            legend: {        //圖例
                left: 40,    //圖例位置
                bottom:0,
                data: ['銷售金額（元）', '使用金額（元）','購買總數（張）','使用總數（張）']     //數據
            },
            xAxis: {
                data: obj.labelvalue,   //橫軸數據，本例爲動態傳入本月天數
                splitLine:{
                        show:true,     //網格線
                        lineStyle:{
                            color: ['#eee', '#eee']
                        }
                    }
            },
            grid: {
                show:true,
                left:40,
                right:40,
                top:10,
                bottom:60

            },
             yAxis : [  //縱軸，多個軸寫入數組[]中
                    {
                        type : 'value',
                        position: 'left',
                        splitNumber: 5,
                        boundaryGap: [0,0.1],
                        axisTick : {    // 軸標記
                            show:true,
                            length: 10,
                            lineStyle: {
                                color: 'green',
                                type: 'solid',
                                width: 2
                            },

                        },
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color: ['#eee', '#eee']
                                }
                            }

                    },
                {
                    type : 'value',
                    splitNumber: 5,
                    position: 'right',
                    splitLine:{
                        show:false,
                    }

                }
            ],
            series: [{
                name: '銷售金額（元）',
                type: 'bar',   //bar爲柱狀圖，其他type還有line,pie等等
                data: obj.data1,   //爲橫軸對應數組
                yAxisIndex: 0     //數據對應軸,從0開始
            },{
                name: '使用金額（元）',
                type: 'bar',
                data: obj.data2,
                yAxisIndex: 0
            },{
                name: '購買總數（張）',
                type: 'bar',
                yAxisIndex: 1,
                data: obj.data3
            },{
                name: '使用總數（張）',
                type: 'bar',
                yAxisIndex: 1,
                data: obj.data4
            },

            ],
            color:['rgb(26, 179, 148)','rgb(28, 132, 198)','rgb(178, 247, 142)','rgb(237, 173, 173)']  //自定義顏色

        });

以上便是ECharts的一般配置，如有疑問可聯繫本人~