一个图表的数据只有动态才显得更加有活力和生命力。那么我们如何将图表的数据进行提炼出来呢?让其可以变成可变的数组或者后期可以通过ajax获取数据进行赋值。另外我们如何动态更新echars图表option内每一项的属性或者配置?
一、如何将图表数据进行数组提炼或者ajax获取
通过观察不难发现echarts图表的核心就是坐标轴和series序列数据,然后这两块的数据其实都是类似一个一维数组的形式。所以我们可以提炼出数组来存放图表核心数据,这里例举将series内data数据提炼出来:
///这里定义一个数组对象且设置两组数据
//后期这里可以改成动态的数据
vardataArr = new Array();
vardataObj1 = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];
vardataObj2 = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3];
dataArr.push(dataObj1);
dataArr.push(dataObj2);
接着我们就可以在series内直接使用数组数据了,形如:
01.
series: [
02.
{
03.
name:
'蒸发量'
,
04.
type:
'bar'
,
05.
data: dataArr[0]
06.
},
07.
{
08.
name:
'降水量'
,
09.
type:
'bar'
,
10.
data: dataArr[1]
11.
}
12.
]
后期你还可以将dataArr内的数据通过ajax获取然后赋值即可。
二、如何动态修改echarts的option配置项
option是关于echarts图表的整个配置,我们需要动态修改图表的某些属性和数据,均需要通过设置echarts的option,然后通过chart.setOption(option)来完成更新操作。
1、如何动态设置y轴刻度
假如我们需要动态设置y轴刻度,为其追加一个单位,应该如何做呢?示例代码如下所示:
01.
///动态更新图表设置y轴刻度追加单位
02.
function
updateChart() {
03.
var
option = myChart.getOption();
04.
//动态设置y轴刻度追加单位
05.
option.yAxis[0].axisLabel = {
06.
formatter:
function
(value) {
07.
return
value +
"%"
;
08.
}
09.
};
10.
myChart.setOption(option);
11.
}
关于更多option的修改,和上述示例类似。只要你能够保证赋值的为对象即可。