How to connect several charts?

[alari]

大家好.

I'm trying to build a system with several interconnected charts just like it's described there: https://ecomfe.github.io/echarts/doc/example/mix8.html#macarons2-en but using React wrapper.

How can I access echart instance and it's .connect method?

Thanks!

[hustcc]

Hello, here is the demo code:

The render function, render the echarts component:

<ReactEcharts ref='echarts_react_1'
    option={this.getOption_1()} />

<ReactEcharts ref='echarts_react_2'
    option={this.getOption_2()} />

Then use react refs to get the echarts instance. and connect the charts.

// this is the origin echarts instance, can use all API [here](http://echarts.baidu.com/api.html#echartsInstance).
let echarts_instance_1 = this.refs.echarts_react_1.getEchartsInstance(); 
let echarts_instance_2 = this.refs.echarts_react_2.getEchartsInstance();

// connect charts
echarts_instance_1.connect([echarts_instance_2 , ...]);

Can help you ?

[alari]

Well, it doesn't work. getEchartsInstance() returns an instance without .connect method.

I figured out that I can make something like htis:

import echarts from 'echarts'

onst SymbolView = decorateWithState(({ symbol, data, state: {charts = []}, setState }) => {

  const dataTypes = keys(data)

  const chartReady = (dt) => (chart) => {
    console.log(dt, chart)

    if(!!chart) {
      chart.group = `${symbol}-${dt}`
      // TODO echarts.connect(charts.concat(chart))
      setState({charts: charts.concat(chart)})
    }

  }

  return (<div>
    <h2>{symbol}</h2>

    {map(dt =>  <ReactEcharts
        key={dt}
        option={data[dt]}
        onChartReady={chartReady(dt)}
    />, dataTypes)}

  </div>)
})

But it also doesn't work as I expect.

When I have one chart, it does nothing. That's ok.

When another one is added via data change, they become linked and work as expected.

But then, when I call .connect to join third chart into existing group, everything fails with exceptions.

[hustcc]

Sorry, my mistake.

let echarts_instance_1 = this.refs.echarts_react_1.getEchartsInstance(); 
let echarts_instance_2 = this.refs.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');
// or connect the charts array like this
// echarts.connect([chart1, chart2]);

The demo of baidu is here, you can have a try. The demo here has some differents between it, maybe the problem of version.

[alari]

Yep, it works one time, either way works. But if I create one more chart afterwards and trying to connect it to existing group, it fails.

[hustcc]

Additional, the api connect is used to relate several charts to each other, so react state usage may compact with it.

In fact, I never used the api connect, I can add a demo of connect in the demo website. now I should go to sleep(22:30).

If you hava done it, welcome to pull a request. ^_^~

[hustcc]

You can just try disConnect all connected charts, and then connect the all charts include the new one.

The document has no demo which connect charts Dynamic.

[alari]

Thanks! I'll try to use disConnect

[hustcc]

If can work, give me callback. ^_^~

[alari]

symbol.ignore = isNaN(pt[0]) || isNaN(pt[1]);

bundle.js:34737 Uncaught TypeError: Cannot read property '0' of undefined

and then

Error:setOptionshould not be called during main process.

so it doesn't help...

[alari]

I have found the problem!

• connect works as expected and allows dynamic adding of charts
• I was using axis as tooltip.trigger for time-based charts, so when there's no value for the same time, it was dying. Switched to item and it's working now.

Thanks!

[fengnex]

Great!
This post also helps me even though react v16 has been currently used.