菜鸟第一次写Echart图表

开始，可以去Echarts官网浏览图表样式，这是网址

http://echarts.baidu.com/examples.html

这是要下载的文件，

下载之后引用

x,y轴数据js从json遍历取出

echarts中的xAxis中的data和series中的data都是数组格式

第一步
<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'));

第二步、设置标题、图例、空的坐标

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: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {
normal: {}
},
data: valueData
}, ]
});</script>

几个注意的地方，

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

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