There're some differences between the two ways of installation below.
Obviously, the way of 'Install What You Need' will keep the bundle size down.
If you choose the way of 'Install What You Need', then you will need to pass ChartContext down to every chart component manually.
If you choose the way of 'Full Installation', then we take the ChartContext in charge.
Why the difference?
In order to reduce the bundle size, we divided the whole package into several packages based on chart type. But the ChartContext exported from @echarts-readymade/core can not share with other packages in this situation. So you need pass it down to chart component manually. check the example below.
For <Bar /> and <Line /> and <Scatter />, we import the three chart components from echarts-for-react
I think there is no need to import full components from echarts-for-react, so we just import useful components for some chart components. But in some scenarios, user may want to show Line on a Scatter chart. So like in <Line /> component, we also import <BarChart /> and <ScatterChart />, so you can use them on one chart. Maybe there are other scenarios, feel free to let me know.
A: Each chart component support forwarding ref down to echarts-for-react in order to get Echarts instance, you can do it like below:
import{ChartProvider,Bar}from'echarts-readymade'import{useRef}from'react'constref=useRef(null)useEffect(()=>{if(ref.current){// boom!!constinstance=ref.current.getEchartsInstance()// so next, you can use Echarts instance api// instance.setOption(...)}},[ref.current])<ChartProviderdata={data}><Barref={ref}dimension={dimension}valueList={valueList}/></ChartProvider>
Roadmap
<Wordcloud /> Chart component
<BarHorizontal /> Chart component
<Table /> Chart component
<Polar /> Chart component
Online demo
Test
More detail docs & examples
About
Make echarts come in handy for React. Based on echarts-for-react