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