开始,可以去Echarts官网浏览图表样式,这是网址
http://echarts.baidu.com/examples.html
这是要下载的文件,
下载之后引用
x,y轴数据js从json遍历取出
echarts中的xAxis中的data和series中的data都是数组格式
第一步<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 1000px;height:400px;"></div>
第二步初始化
json数据
{"num":7,"everyday":"2017-12-01"},
{"num":1,"everyday":"2017-12-03"},
{"num":30,"everyday":"2017-12-04"},
{"num":20,"everyday":"2017-12-05"},
{"num":16,"everyday":"2017-12-06"},
{"num":8,"everyday":"2017-12-07"},
{"num":10,"everyday":"2017-12-08"},
{"num":4,"everyday":"2017-12-10"},
{"num":127,"everyday":"2017-12-11"},
{"num":10,"everyday":"2017-12-12"},
{"num":17,"everyday":"2017-12-13"},
{"num":28,"everyday":"2017-12-14"},
{"num":25,"everyday":"2017-12-15"},
{"num":31,"everyday":"2017-12-18"},
{"num":27,"everyday":"2017-12-19"},
{"num":7,"everyday":"2017-12-20"},
{"num":22,"everyday":"2017-12-21"},
{"num":34,"everyday":"2017-12-22"},
{"num":15,"everyday":"2017-12-23"},
{"num":41,"everyday":"2017-12-25"},
{"num":23,"everyday":"2017-12-26"},
{"num":14,"everyday":"2017-12-27"},
{"num":16,"everyday":"2017-12-28"},
{"num":8,"everyday":"2017-12-29"},
{"num":2,"everyday":"2017-12-30"}
{"num":1,"everyday":"2017-12-03"},
{"num":30,"everyday":"2017-12-04"},
{"num":20,"everyday":"2017-12-05"},
{"num":16,"everyday":"2017-12-06"},
{"num":8,"everyday":"2017-12-07"},
{"num":10,"everyday":"2017-12-08"},
{"num":4,"everyday":"2017-12-10"},
{"num":127,"everyday":"2017-12-11"},
{"num":10,"everyday":"2017-12-12"},
{"num":17,"everyday":"2017-12-13"},
{"num":28,"everyday":"2017-12-14"},
{"num":25,"everyday":"2017-12-15"},
{"num":31,"everyday":"2017-12-18"},
{"num":27,"everyday":"2017-12-19"},
{"num":7,"everyday":"2017-12-20"},
{"num":22,"everyday":"2017-12-21"},
{"num":34,"everyday":"2017-12-22"},
{"num":15,"everyday":"2017-12-23"},
{"num":41,"everyday":"2017-12-25"},
{"num":23,"everyday":"2017-12-26"},
{"num":14,"everyday":"2017-12-27"},
{"num":16,"everyday":"2017-12-28"},
{"num":8,"everyday":"2017-12-29"},
{"num":2,"everyday":"2017-12-30"}
定义两个数组,因为
echarts中的xAxis中的data,yAxis中的data
都是数组格式
var dayaData = new Array();
var valueData = new Array();
for(var t in json) {
//取json的值
var a = json[t].everyday;
//alert(a.substring(8));
var valueData = new Array();
for(var t in json) {
//取json的值
var a = json[t].everyday;
//alert(a.substring(8));
//因为时间只想天数,所以截取后面两位
dayaData.push(a.substring(8));
valueData.push(json[t].num);
}
dayaData.push(a.substring(8));
valueData.push(json[t].num);
}
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart = echarts.init(document.getElementById('main'));
第二步、设置标题、图例、空的坐标
myChart.setOption({
title: {
text: '堆叠区域图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: []
}],
yAxis: {},
series: [{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {
normal: {}
},
data: []
}, ]
});
title: {
text: '堆叠区域图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: []
}],
yAxis: {},
series: [{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {
normal: {}
},
data: []
}, ]
});
第三步、数据添加到图表中
// 为echarts对象加载数据myChart.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: dayaData //使用数组
},
series: [{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {
normal: {}
},
data: valueData
}, ]
});</script>
几个注意的地方,
生成表格的代码要放在数据的后面!!
一开始直接取数组,然后生成表格,然后老是报错,数组先定义取号,然后设置标题啊,图例啊,还有空的坐标,最后再把数据加载进去,要记住顺序