eChart學習筆記

eChart的html代碼很簡單，給個容器，定好寬高就能夠了

1 <div class="container-fluid">
 2     <div class="row">
 3         <div class="col-xs-8">
 4              <div id="main" style="width: 100%;height:500px;"></div>                             
 5         </div>
 6         <div class="col-xs-4">
 7             <div id="pieChart" style="width: 100%;height:460px;"></div>
 8         </div>
 9     </div>
10 </div>    

由於服務器返回的數據較多，聲明兩個變量分佈保存相應的數據

var gDashboardData = {};//另一組數據，這裏用不上
var gDateData = [];
var gMonthData = [];

發起請求，這裏通常習慣用jQuery

(function(){
    $.ajax({
        type: "get",
        url: "/main/statMainData",
        async: false,
        success: function (data) {
            if (data.result == "1") {
                gDashboardData = data.dashboard;
                gDateData = data.dateData;
                gMonthData = data.monthData;
                setAllChartData();
            } else {
                toastr.warning(data.errorCode)//toastr提示插件
            }
        },
        error: function (data, status) {
            toastr.warning(data)
        }
    });
}());

拿到數據後繪製曲線圖

(function() {
    var myChart = echarts.init(document.getElementById('main'));
    // 顯示標題，圖例和空的座標軸
    var xDateArray = [];
    var yTotalArray = [];
    var yCompleteArray = [];for (var i = 0; i < gDateData.length; i++) {//這個曲線圖要顯示的數據量比較多，因此繼續遍歷分別保存相應數據
        xDateArray.push(gDateData[i].statDate);
        yTotalArray.push(gDateData[i].allJobNum);
        yCompleteArray.push(gDateData[i].finishNum);
    }
    myChart.setOption({
        title: {
            text: '工單月曲線圖'
        },
        tooltip: {trigger: 'axis'},
        legend: {
            data: ['工單數', '工單完成數']
        },
        xAxis: {　　//X軸的值
            type: 'category',
            boundaryGap: false,
            data: xDateArray
        },
        yAxis: {type: 'value'}, //Y軸的值，有兩個，繪製兩條曲線
        series: [{
            name: '工單數',
            type: 'line',
            data: yTotalArray
       　　　},
            {
                name: '工單完成數',
                type: 'line',
                data: yCompleteArray
        }]
    });
}())

繪製餅狀圖

(function() {
    var myChart = echarts.init(document.getElementById('pieChart'));
    myChart.setOption({
        title:{text:"工單業務類型分佈圖"},
        tooltip:{
           trigger:"item",
            formatter:"{b}:{c}<br/>佔比 {d}%"
       },
        legend:{
            orient:"horizontal",
            left:'center',
            bottom:0,
            data:['配送','保養','安裝','租賃','維修','回收']
        },
        series:[
            {
                type:'pie',
                selectedMode: 'single',
                radius:[0,'70%'],
                data:[
                    {
                        value:gMonthData[0].num,
                        name:'回收',
                        itemStyle:{
                            normal:{
                                color:'rgb(149,149,149)'
                            }
                        }
                    },
                    {
                        value:gMonthData[1].num,
                        name:'保養',
                        itemStyle:{
                            normal:{
                                color:'rgb(0,192,239)'
                            }
                        }
                    },
                    {
                        value:gMonthData[2].num,
                        name:'安裝',
                        itemStyle:{
                            normal:{
                                color:'rgb(62,98,121)'
                            }
                        }
                    },
                    {
                        value:gMonthData[3].num,
                        name:'租賃',
                        itemStyle:{
                            normal:{
                                color:'rgb(234,162,41)'
                            }
                        }
                    },
                    {
                        value:gMonthData[4].num,
                        name:'維修',
                        itemStyle:{
                            normal:{
                                color:'rgb(145,199,174)'
                            }
                        }
                    },
                    {
                        value:gMonthData[5].num,
                        name:'配送',
                        itemStyle:{
                            normal:{
                                color:'rgb(212,130,101)'
                            }
                        }
                    }
                ]
            }
        ]
    });
})();

看到結尾那一堆括號都懵逼了有沒有，嵌套夠深的，一下子數組一下子對象，這個難度不大，可是須要細心、耐心和良好的編程習慣。插件提供的功能還有不少，須要什麼功能多去看看相關案例