react-echarts使用总结

安装echarts-for-react

安装下面两个包

• npm install echarts-for-react -S
• npm install echarts -S

引入echarts

- import ReactEcharts from 'echarts-for-react';
- import echarts from 'echarts'
复制代码

引入图表dom

<ReactEcharts notMerge={true}
lazyUpdate={true} option={this.getAidOption()}  />
复制代码

• option是配置项，具体根据须要查看echarts官网api
• 当页面上有两个图表数据来回切换的时候，两个表的数据会重叠，解决办法：
  • notMerge={true} lazyUpdate={true} 加上这两个属性便可。
• 若是想显示坐标轴所有数据，能够在配置项中把坐标轴间隔设置为0

  axisLabel: {
           show: true,
           interval: 0,//坐标显示间隔
           textStyle: {
               color: '#666666',
               fontSize: 10,
           },
           showMaxLabel: true
       }
  复制代码