ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图
- ECharts
- 引入ECharts
- 步骤
- 连接数据接口，动态加载图表
- 动态加载数据，整体代码
- 折线图绘制
- 总结
- 绘制多个图表的方法
ECharts
纯Javascript的图表库，支持各种图表的绘制。
下载ECharts.js
引入ECharts
1.标签式单文件引入
//图表位置
// 引入js文件
（这是较为简洁的使用方法）
2.模块化引入文件
...
步骤
1.为 ECharts 准备一个具备大小（宽高）的 DOM 。
定义一个待用的div，指定宽度、高度，设置id
2.引入echarts.js并加载
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('2016-'+i + '-01');
}else{
list.push('2017-'+(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;// 后台返回的json
for(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.xcontent
option.legend.data = legends;// 设置图例
option.series = Series; // 设置图表
myChart.setOption(option);// 重新加载图表
},
error:function(){
alert("数据加载失败！请检查数据链接是否正确");
}
});
动态加载数据，整体代码
// 引入js文件
折线图绘制
总结
相关图表的属性设置，可以根据需求，查看官网上的相关API，进行设置。
绘制多个图表的方法
可以将绘制图表的方法单独写做一个方法，通过请求接口，获取数据之后，把数据格式调整为图表所需要的格式，再调用方法。
echart官网
https://echarts.baidu.com/index.html