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的一般配置，如有疑問可聯絡本人~