ECharts图表组件入门教程：如何动态读取数组内的数据至echarts图表且动态更新图表Y轴刻度单位



一个图表的数据只有动态才显得更加有活力和生命力。那么我们如何将图表的数据进行提炼出来呢？让其可以变成可变的数组或者后期可以通过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内直接使用数组数据了，形如：

view source print ?

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轴刻度，为其追加一个单位，应该如何做呢？示例代码如下所示：

view source print ?

01. ///动态更新图表设置y轴刻度追加单位

02. functionupdateChart() {

03.     varoption = myChart.getOption();

04.     //动态设置y轴刻度追加单位

05.     option.yAxis[0].axisLabel = {

06.         formatter:function (value) {

07.             returnvalue + "%";

08.         }

09.     };

10.     myChart.setOption(option);

11. }

关于更多option的修改，和上述示例类似。只要你能够保证赋值的为对象即可。