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