Comments (11)
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
.
from echarts-for-react.
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 toitem
and it's working now.
Thanks!
from echarts-for-react.
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 ?
from echarts-for-react.
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.
from echarts-for-react.
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.
from echarts-for-react.
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. ^_^~
from echarts-for-react.
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.
from echarts-for-react.
Thanks! I'll try to use disConnect
from echarts-for-react.
If can work, give me callback. ^_^~
from echarts-for-react.
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...
from echarts-for-react.
Great!
This post also helps me even though react v16 has been currently used.
from echarts-for-react.
Related Issues (20)
- DOMException: Failed to execute 'drawImage' 'CanvasRenderingContext2D: The 1mage argument is canvas element with a width or height of 0.
- percentage `name (undefined%)` when series data is empty `series.data:[ ]` HOT 1
- Allow setting `id` and `data-testid` HOT 1
- Feature Request: RTL support
- Project status HOT 3
- Not support @typescript-eslint/parser 6.x
- 主题theme似乎不生效?
- react 5.1 增加了resize动画的功能,echarts-for-react v3.0.2 应该如何调用? HOT 1
- Typing does not support charts v5.4.3
- How to override the readonly style for position relative?
- I can not append Data while Zooming
- Table Component
- 动态切换主题
- How to connect several charts on chart load? HOT 2
- How to update datasets on zoom event? HOT 2
- [bug] : Inconsistent Zoom Functionality with ECharts: Seeking Guidance on Mouse Scroll and Button Control Integration
- Tree branch once opened does not retract back on closing it HOT 1
- How to rewrite this example with echarts-for-react
- add type to EChartsOption
- Update Required type Opts ( and add support for SSR) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from echarts-for-react.