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
       }
  复制代码

转载于:https://juejin.im/post/5c8a67ba6fb9a049be5e5d8c