关于使用echarts-for-react时遇到的问题
一、如何获取实例
1、常规的方式
myChart是常用的初始化的实例
2、echarts-for-react的方式
(1)先从ReactEcharts中获取ref
<ReactEcharts
ref={(e) => (this.echarts_react = e)}
style={{ height: 400 }}
option={this.state.options && this.state.options != null ? this.state.options : {}}
notMerge={true}
/>
(2)使用echarts_react 获取实例
this.echartsInstance = this.echarts_react.getEchartsInstance();
使用变量接收实例
二、如何获取y轴的最大值
1、原因
有时候我们需要获取y轴的最大值,所以需要使用实例获取y轴的最大值,获取方式如下:
2、获取方式
let yMaxValue = this.echartsInstance.getModel().getComponent('yAxis').axis.scale._extent;
(1)获取的yMaxValue是一个数组,第一个是最小值,第二个是最大值
(2)多y轴的时候,获取的也是一个数组,第一个是最小值,第二个是最大值(还需要验证是否是这样)
三、如何设置同步游标
1、常规的方式
// 分别设置每个实例的 group id
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接传入需要联动的实例数组
echarts.connect([chart1, chart2]);
2、使用echarts_react 设置同步游标
(1)先通过实例this.echartsInstance设置同样的group
this.echartsInstance.group = 'group1';
(2)设置游标的方式
this.echarts_react.echartsLib.connect('group1');
(3)取消游标的方式
this.echarts_react.echartsLib.disconnect('group1');