ECharts 基础（三）：动态更新数据

序言：本篇继续介绍Echarts的使用，主要解决数据更新！

一、echarts动态更新

echarts 由数据驱动，数据的改变驱动图表的改变，因此动态数据的实现也变得异常简单。
echarts 中通过 setOption 更新所有的数据，我们要做的只是定时获取数据，然后使用 setOption 填入数据，至于数据在过程中发生了哪些变化，不在我们的考虑范围内。
1、虚拟数据
一般可能用ajax请求来获取数据，这里为了方便大家查看–整了些虚拟数据，进行随机抽取数据

//虚拟数据
 randomList = [
 	[6, 22, 32, 11, 36, 20],
    [12, 32, 8, 34, 18, 14],
    [22, 12, 32, 10, 10, 20],
    [18, 38, 16, 26, 14, 14],
    [16, 10, 10, 38, 10, 14],
    [28, 12, 32, 35, 17, 20]
  ];

2、获取随机数据，setOption更新数据
实例化Echarts，设置了autoChange方法：随机获取数据并setOption更新数据

// 基于准备好的dom，初始化echarts实例
var echartBar = echarts.init(document.getElementById('echartBar'));
function autoChange(){
    //获取随机数组
    var random = Math.ceil(Math.random()*6-1);
    console.log("random:"+random)
    // 指定图表的配置项和数据
    var optionBar = {
         title: {
         	  text: 'Echarts动态更新数据'
         },
         tooltip: {},
         legend: {
         	data:['销量']
        },
         //设置X轴
        xAxis: {
           	data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
      	  	name: '销量',
        	type: 'bar',
        	data: randomList[random], 
       	 }]
    };
    // 使用刚指定的配置项和数据显示图表。
	echartBar.setOption(optionBar);
}

3、创建定时任务，进行动态更新
设置定时任务，定时调用autoChange方法，完成上方gif图展示效果：

autoChange();  //初始化实例后，首次设置数据
setInterval(  //设置定时器，1s更新一次
	function(){
		autoChange();
	},1000
);

二、echarts-for-react动态更新

echarts-for-react 是针对于 React 的 Echarts 封装插件。
echarts-for-react 可以在React中调用echarts接口直接渲染出Echarts图表，只要传入相关的参数和数据即可。
1、react环境安装依赖
使用npm安装依赖

npm install --save echarts
npm install --save echarts-for-react

2、引入echarts-for-react

import ReactEcharts from 'echarts-for-react';

3、页面上使用

 <ReactEcharts option={this.getOption(random)} />

4、实例如下
react环境下图表若想动态更新，必须设置state值作为参数动态变化。如下完成上方gif图展示效果：

import React, { Component }  from 'react';
import ReactEcharts from 'echarts-for-react';

const randomList = [
  [6, 22, 32, 11, 36, 20],
  [12, 32, 8, 34, 18, 14],
  [22, 12, 32, 10, 10, 20],
  [18, 38, 16, 26, 14, 14],
  [16, 10, 10, 38, 10, 14],
  [28, 12, 32, 35, 17, 20]
  ];

class EchartsDemo extends Component{
  state = { 
    random: randomList[0],
  }; 
  
   // 组件初始化时要挂载的内容
  componentDidMount() {
    //设置定时器，1s更新一次
    this.timer = setInterval(() => {
      var num = Math.ceil(Math.random()*6-1);
      this.setState( 
        { 
          random: randomList[num],
        }
      )
    }, 1000)
  };

   //组件卸载时清除定时器
  componentWillUnmount() {
    clearInterval(this.timer);
  }

  /**
   * 折线图的配置对象
   */
  getOption = (random) =>{
      return {
          title: {
              text: 'Echarts动态更新数据'
          },
          tooltip: {},
          legend: {
              data:['销量']
          },
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: random
          }]
      };
  }
  
  render(){
      const {random} = this.state;
      return(
          <div style={{width:660,height:400}}>
             <ReactEcharts option={this.getOption(random)} />
          </div>
      )
  }
}

export default EchartsDemo;

本文介绍Echarts动态更新数据，请大家多多指教，能get到知识点不要忘了关注点个赞~