1、新建个文件夹,例如我新建了个fei垓矗梅吒xi文件夹在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.getElem髫潋啜缅entById('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;"></p><script type="text/javascript" src="d.js"></script>
7、总结来说就是新建一个文夹,一个index.html文件,一个d.js文件下载两个js文件。是不是灰非简单呢,动起手来试试