安装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