需求：点击按钮，图表的数据改变

// 1.用ref得到dom，ref不用引入
    return (
       <ReactEcharts ref={(e) => { this.echartsElement = e }} 
          option={this.getChartOption()} style={{ height: '500px' }}
          onEvents={onEvents} notMerge={true} />
      </div>
    )

  handleSizeChange = e => {
    /**
     * @description: 点击图表上方按钮组，改变图表数据
     * @Date: 2020-09-21 17:52:50
     */
    this.setState({ chartName: e.target.value }, () => {
      const option = this.getChartOption();
      // 2.控制dom，刷新表格数据
      this.echartsElement.getEchartsInstance().setOption(option)  // 实时改变
    }); 
    console.log(this.echartsElement);
  };

经查阅官方文档发现：this.charts.setOption(data,true)，这里setOption有3个属性，setOption(option,notMerge,lazyUpdate);第二个notMerge默认为false,即默认合并数据，设置成true之后就不合并数据，从而实现刷新页面UI的效果。

使用echarts-for-react

1.安装依赖echarts-for-react

npm install echarts-for-react --save

2.使用

import ReactEcharts from 'echarts-for-react';
var echartsOption = { } //配置项
render() {
 return (
  <ReactEcharts
    ref={(e) => { this.echartsElement = e }}
    option={echartsOption}
    theme="clear"
 />
 )
}

3.不同的图表，只需要改变echartsOption配置即可
// 使用和Echarts的使用方式一致

// 饼图Pie
var colorArr = ['#1890ff', '#2fc25b', '#facc14', '#223273', '#8543e0', '#13c2c2', '#3436c7', '#f04864'];
var echartsOption = {
  tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
      orient: 'vertical',
      x: 'left',
      data:['天海湾','鼎龙湾','珍珠湾','翠逸家园','紫林湾'] //需要对应 series 的 name值
  },
  color: colorArr,
  series: [
      {
        name:'访问来源',
        type:'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
              show: false,
              position: 'center'
          },
          emphasis: {
              show: true,
              textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
              }
          }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data:[ //由于颜色的原因，这里应该对数据做一下排序~
          {value:1548, name:'天海湾'},
          {value:510, name:'鼎龙湾'},
          {value:338, name:'珍珠湾'},
          {value:265, name:'翠逸家园'},
          {value:220, name:'紫林湾'}
        ]
      }
  ]
};

//折线图Line
var colorArr = ['#1890ff', '#2fc25b', '#facc14', '#223273', '#8543e0', '#13c2c2', '#3436c7', '#f04864'];
var echartsOption = {
  title: {
      text: ' '
  },
  tooltip: {
      trigger: 'axis'
  },
  legend: { //需要对应 series 的 name值
      data:['天海湾','鼎龙湾','珍珠湾','翠逸家园','紫林湾']
  },
  color: colorArr,
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  toolbox: {
      feature: {
        dataView : {show: true, readOnly: false},
        magicType : {show: true, type: ['line', 'bar']},
        // saveAsImage: {} //存取为图片
      }
  },

  xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['10:00','11:00','12:00','13:00','14:00','15:00','16:00']
  },
  yAxis: {
      type: 'value'
  },
  series: [
      {
          name:'天海湾',
          type:'line',
          stack: '总量',
          data:[120, 132, 101, 134, 90, 230, 210]
      },
      {
          name:'鼎龙湾',
          type:'line', 
          stack: '总量',
         // stack 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
如果是显示单独折线，则stack去掉
          data:[220, 182, 191, 234, 290, 330, 310]
      },
      {
          name:'珍珠湾',
          type:'line',
          stack: '总量',
          data:[150, 232, 201, 154, 190, 330, 410]
      },
      {
          name:'翠逸家园',
          type:'line',
          stack: '总量',
          data:[320, 332, 301, 334, 390, 330, 320]
      },
      {
          name:'紫林湾',
          type:'line',
          stack: '总量',
          data:[820, 932, 901, 934, 1290, 1330, 1320]
      }
  ]
};

//柱状图Bar
var echartsOption = {
  title : {
    text: ' ',
    subtext: ' '
  },
  tooltip : {
    trigger: 'axis',
    axisPointer : {// 坐标轴指示器，坐标轴触发有效
      type : 'line'// 默认为直线，可选为：'line' | 'shadow'
    }
  },
  legend: {
    data:['成交量']
  },
  toolbox: {
    show : true,
    feature : {
      dataView : {show: true, readOnly: false},
      magicType : {show: true, type: ['line', 'bar']},
    }
  },
  calculable : true,
  xAxis : [
    {
      type : 'category',
      data : ['天海湾','鼎龙湾','珍珠湾','翠逸家园','紫林湾', '田螺湾', '香海彼岸', "花城都汇", "天蕴皖",'珍珠湾','翠逸家园','紫林湾', '田螺湾', '香海彼岸']
    }
  ],
  yAxis : [
    {
      type : 'value'
    }
  ],
  series : [
      {
          name:'成交量',
          type:'bar',
          data:[2100, 909, 7200, 1232, 4256, 5409, 1700, 6232, 3256, 7900, 1232, 4256, 5409, 1700],
          markPoint : {
              data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
              ]
          },
          markLine : {
              data : [
                  {type : 'average', name: '平均值'}
              ]
          }
      }
  ]
};