Echarts动态加载数据绘制折线图
ECharts引入ECharts步骤连接数据接口，动态加载图表动态加载数据，整体代码折线图绘制总结绘制多个图表的方法ECharts
纯Javascript的图表库，支持各种图表的绘制。
下载ECharts.js
引入ECharts
1.标签式单文件引入
<body><div id="main" style="height:400px;"></div>//图表位置<script src="./js/echarts-all.js"></script>// 引入js文件<script>var myChart = echarts.init(document.getElementById('main'));var option = { }myChart.setOption(option);</script></body>
（这是较为简洁的使用方法）
2.模块化引入文件
<body><div id="main" style="height:400px;"></div>...<script src="./js/echarts.js"></script><script type="text/javascript">require.config({paths: {echarts: './js/dist'}});require(['echarts','echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表'echarts/chart/bar'],function (ec) {var myChart = ec.init(document.getElementById('main'));var option = {...}myChart.setOption(option);});</script></body>
步骤
1.为 ECharts 准备一个具备大小（宽高）的 DOM 。
定义一个待用的div，指定宽度、高度，设置id
<div id="main" style="height:400px;"></div>
2.引入echarts.js并加载
<script src="./js/echarts.js"></script>
3.基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
4.指定图表的配置项和数据
// 定义样式和数据var option = {title: { //图表标题，可以通过show:true/false控制显示与否，subtext:'二级标题',text: ''},backgroundColor: '#FFFFFF',tooltip : {//鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置trigger: 'axis'},legend: {// 图例，每条折线或者项对应的示例data:[]},calculable : true,xAxis : [{axisLabel:{rotate: 30,interval:0},axisLine:{lineStyle :{color: '#CCCCCC'}},type : 'category',boundaryGap : false,//从0刻度开始// data:[] X轴的定义data : function (){var list = [];for (var i = 10; i <= 18; i++) {if(i<= 12){list.push('-'+i + '-01');}else{list.push('-'+(i-12) + '-01');}}return list;}()}],yAxis : [{type : 'value',axisLine:{lineStyle :{color: '#CCCCCC'}}}],series : [{name:'新增用户',type:'line',// symbol:'none',//原点smooth: 0.2,//弧度color:['#66AEDE'],// data:Y轴数据data:[500,100,200,400,600,150,750,800,400,250,650,350]},]};
5.使用刚指定的配置项和数据显示图表
myChart.setOption(option);
连接数据接口，动态加载图表
使用ajax请求数据接口，获取图表数据，重新加载图表
$.ajax({url:"user/userIncreaseList",type:'get',dataType:'json'success:function(jsons){var Item = function(){return {name:'',type:'line',// itemStyle: {normal: {areaStyle: {type: 'default'}}},这为线条设置label: {normal: {position: 'top'}},markLine: {data: [{type: 'average', name: '平均值'}]},data:[]}};// series中的每一项为一个item,所有的属性均可以在此处定义var legends = [];// 准备存放图例数据var Series = []; // 准备存放图表数据var json = jsons.data;// 后台返回的jsonfor(var i=0;i < json.length;i++){var it = new Item();it.name = json[i].name;// 先将每一项填充数据legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中it.data = json[i].data;Series.push(it);// 将item放在series中}// option.series.data=jsons.option.xAxis[0].data = jsons.xcontent;// 设置X轴数据了// 折线图可设置上下两个X轴，必须是option.xAxis[0].data = json.xcontentoption.legend.data = legends;// 设置图例option.series = Series; // 设置图表myChart.setOption(option);// 重新加载图表},error:function(){alert("数据加载失败！请检查数据链接是否正确");}});
动态加载数据，整体代码
<body><div id="main" style="height:400px;"></div><script src="./js/echarts-all.js"></script>// 引入js文件<script>var myChart = echarts.init(document.getElementById('main'));//根据需求进行相应的设置var option = {title: { //图表标题，可以通过show:true/false控制显示与否，subtext:'二级标题',text: ''},backgroundColor: '#FFFFFF',tooltip : {//鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置trigger: 'axis'},legend: {// 图例，每条折线或者项对应的示例data:[]},calculable : true,xAxis : [ ],yAxis : [ ],series : [ ]};$.ajax({url:"user/userIncreaseList",type:'get',dataType:'json'success:function(jsons){var Item = function(){return {name:'',type:'line',// itemStyle: {normal: {areaStyle: {type: 'default'}}},这为线条设置label: {normal: {position: 'top'}},markLine: {data: [{type: 'average', name: '平均值'}]},data:[]}};// series中的每一项为一个item,所有的属性均可以在此处定义var legends = [];// 准备存放图例数据var Series = []; // 准备存放图表数据var json = jsons.data;// 后台返回的jsonfor(var i=0;i < json.length;i++){var it = new Item();it.name = json[i].name;// 先将每一项填充数据legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中it.data = json[i].data;Series.push(it);// 将item放在series中}// option.series.data=jsons.option.xAxis[0].data = jsons.xcontent;// 设置X轴数据了// 折线图可设置上下两个X轴，必须是option.xAxis[0].data = json.xcontentoption.legend.data = legends;// 设置图例option.series = Series; // 设置图表myChart.setOption(option);// 重新加载图表},error:function(){alert("数据加载失败！请检查数据链接是否正确");}});// 初次加载图表myChart.setOption(option);</script></body>
折线图绘制
总结
相关图表的属性设置，可以根据需求，查看官网上的相关API，进行设置。
绘制多个图表的方法
可以将绘制图表的方法单独写做一个方法，通过请求接口，获取数据之后，把数据格式调整为图表所需要的格式，再调用方法。
echart官网
/index.html
