eChart学习笔记

Posted 2020-09-18

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)‘
                            }
                        }
                    }
                ]
            }
        ]
    });
})();

看到结尾那一堆括号都懵逼了有没有，嵌套够深的，一会儿数组一会儿对象，这个难度不大，但是需要细心、耐心和良好的编程习惯。插件提供的功能还有很多，需要什么功能多去看看相关案例