现在分别对折线图、柱状图、饼图、中国地图四类图表的数据绑定进行详细的介绍。echarts中其它的图表方法都差不多,只要了解官方的demo,按照指定的数据结构进行解析都能很方便的得到想要的结果;
echarts中提供了setOption、setSeries两个方法可以对图表的相关数据和属性进行动态设置,setOption一定要在setSeries之前设置;
复制代码
var myChart = ec.init(document.getElementById(‘div1’));
var ecConfig = require(‘echarts/config’);
var option = {
title: {
text: ‘标题’,
x:“center”
},
tooltip: {
trigger: ‘axis’
},
legend: {
data:[],
y:“bottom”
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [{
type: 'category',
data:[]
}],
yAxis: [{
type: 'value'
}],
series: []
};
复制代码
option中的属性可以通过对象属性的方式获取设置;例如以上代码中,
option.legend.data=[“xx”,“xx”] 可以通过这种方法设置对应属性的值
option.title.text=“改变标题”;//改变标题属性
option.xAxis[0][“data”]=[];//改变坐标值
myChart.setOption(option);//设置图表对象的所有参数属性
myChart.setSeries(seriesData);//设置图表对象的数据集合
通过后台交互数据肯定会有一定的延迟,这时最好能有一个友好载入提示,echarts提供showLoading方法
复制代码
// 载入动画提示
myChart.showLoading({
text: ‘正在努力的读取数据中…’
});
//取消载入提示
myChart.hideLoading();
复制代码
来几个具体的实例吧。
以下实例的ajax用jquery的$.ajax。所以如果你要在本地测试,需要引用jquery.js。
这里所有demo虽然也请求了后台。但都是通过前后模拟了一个返回的json数据。不管各位是搞jsp、asp、php的都没关系,只要按指定的格式生成对的格式的json数据就行了。
至于后台如何生成json数据,各自就baidu下吧。这里就不提了。
通过官方的demo我可以看到哪些属性是需要动态传入数据,然后我们按照格式传入对应的值或数组;
通过demo的代码。我们可以看出折线标红的地方需要动态设置分别是
option.title.text=“标题”;
option.legend.data=[“图例1”,“图例2”,"……"];
option.xAxis[0][“data”]=[“一”,“二”,“三”,"……"];//x轴数据
var seriesData=[
{
name:“图例1”,
type:“line”,
data:[1,2,3]
}
]
myChart.setOption(option); //设置全部参数属性
myChart.setSeries(seriesData);//设置图例数据
通过以上方法就可以实现动态的echarts数据改变了。
1、折线图
复制代码
2、柱状图
3、饼图
4、中国地图
注意dataRange的max和min会影响到颜色深度的。因为当前值会和最大值求比,然后计算颜色深度。
可以通过dataRange的color:[’#dddddd’,’#777777’] 设置max,min的颜色值