菜鸟第一次写Echart图表

开始，可以去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"}

定义两个数组，因为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));
//因为时间只想天数，所以截取后面两位
dayaData.push(a.substring(8));
valueData.push(json[t].num);

}
// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

[b]第二步、设置标题、图例、空的坐标[/b]
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: []
}, ]

});

第三步、数据添加到图表中

// 为echarts对象加载数据 

myChart.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: dayaData //使用数组  
},
series: [{
name: '邮件营销',
<
4000
span style="white-space:pre;">type: 'line',
stack: '总量',
areaStyle: {
normal: {}
},
data: valueData
}, ]

});</script>

几个注意的地方，

生成表格的代码要放在数据的后面！！

一开始直接取数组，然后生成表格，然后老是报错，数组先定义取号，然后设置标题啊，图例啊，还有空的坐标，最后再把数据加载进去，要记住顺序