如何实现多图联动？

[hustcc]

具体什么意思？

看字面意思，通过echarts api可以完成…

[devin-yuan]

具体就是怎么基于你的中间件实现echarts.connect，这个没整明白，例如一个股票分时图的折线图，要和一个成交量的柱状图联动起来

[hustcc]

echarts 官网的例子代码这么写的：

myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option2);

myChart.connect(myChart2);
myChart2.connect(myChart);

使用 echarts-for-react 就是：

let echarts_1 = this.refs.echarts_react.getEchartsInstance();
let echarts_2 = this.refs.echarts_react.getEchartsInstance();

echarts_1.connect(echarts_2);
echarts_2.connect(echarts_1);

this.refs.echarts_react.getEchartsInstance() 获得就是 echarts 的实例对象。

[devin-yuan]

thx!

[hustcc]

客气，如果解决问题了，请后面关系 issue，如果有其他问题欢迎继续留言。

[challen03]

为什么我通过getEchartsInstance获取的实例没有setOPtion和connect方法，求解

[hustcc]

你的代码贴出来，怎么调用 getEchartsInstance 方法的。

[challen03]

  <ReactEcharts
           ref='echarts_react'
           option={option}
           style={this.props.inStyle}
           theme={'theme_name'}
           className='react_for_echarts' />

componentDidMount () {
    let echarts_1 = this.refs.echarts_react.getEchartsInstance();
    console.log(echarts_1.connect)
}

输出的connect一直为undefined

[hustcc]

看看是不是因为 echarts 版本不对导致的 api 方法和文档不对应。

[challen03]

"echarts": "^3.5.2",
"echarts-for-react": "^1.2.0",

版本都是可以的

[seabean1999]

"echarts": "^3.5.2",
"echarts-for-react": "^1.2.0",

版本都是可以的

[2023.06.14] 这么多年过去了，没下文了吗😂

[yvettevy2023]

react的refs被deprecated了 https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs 需要自己定义一个global或者class private var。

在class里添加一个private var：

class xxxx extends React.Component {
  private reactRef: any;
  constructor(props) {
    super(props);
  }
}

在render()里这样写：

    if (!!!this.reactRef) {
      this.reactRef = {};
    }
   return (
      <div>
         <ReactECharts option={options1} ref={(e) => {this.reactRef['echarts_react_1'] = e;}}/>
      <ReactECharts option={options2} ref={(e) => {this.reactRef['echarts_react_2'] = e;}}/>
      </div>
    )

然后在componentDidUpdate()里connect上：

if (this.reactRef) {
  let echarts_instance_1 = this.reactRef.echarts_react_1.getEchartsInstance(); 
      let echarts_instance_2 = this.reactRef.echarts_react_2.getEchartsInstance();
      echarts_instance_1.group = 'group1';
      echarts_instance_2.group = 'group1';

      // the echarts instance should require from echarts: import echarts from 'echarts';
      echarts.connect('group1');
}

[wenqi73]

export function ECharts(props: React.PropsWithoutRef<EChartsReactProps>) {
  const ref = useRef<any>()
  const { option, ...rest } = props
  useEffect(() => {
    if (ref.current) {
      const instance = ref.current.getEchartsInstance()
      instance.group = 'group1'
      echarts.connect('group1')
    }
  }, [option])
  return <ReactECharts ref={ref} option={option} {...rest} />
}