echarts库的简单调用
1、新建个文件夹，例如我新建了个feixi文件夹
在feixi下新建一个名叫 index.html文件空白文件
在 index.html 页面中引入jq、echarts库文件
<script type="text/javascript" src="jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
在 index.html 页面中 ：容器设置例如id=mainAnaylsis的div
2、把jq、echarts文件名复制到度娘里，应该有很多，
下载jquery-2.0.0.min.js、echarts.min.js后把文件也放到feixi文件夹下
你也可以是其它版本的jq或者echarts
3、在feixi文件夹下新建一个js文件
例如d.js，在d.js文件中进行echarts初始化，形如：
var myChart = echarts.init(document.getElementById('mainAnaylsis'));，绑定2中的容器
4、在d.js文件中：option对象设置
对option->series－>data 进行赋值：这个是非常重要的地方
一般从服务器返回过来的是json字符串，需要转化为对象后使用
data:[name:cc，value:[aa，bb]]
5、在d.js文件中设置myChart.setOption(option);
d.js全部内容如下
var myChart = echarts.init(document.getElementById('mainAnaylsis'));
var result='[{"name":"11","value":["2017-12-23 15:07:29","60"]},{"name":"11","value":["2017-12-23 16:07:29","208"]}]';
data=JSON.parse(result);
var option={
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
}]
}
myChart.setOption(option);
6、在 index.html 页面中引入d.js文件
<script type="text/javascript" src="d.js"></script>
index.html 的全部内容如下：
<script type="text/javascript" src="jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<p id="mainAnaylsis" style="width: 750px;height:500px;">
<script type="text/javascript" src="d.js"></script>
7、总结来说就是
新建一个文夹，一个index.html文件，一个d.js文件
下载两个js文件。
是不是灰非简单呢，动起手来试试