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.
'mask-joy' | 'mask-great' | 'mask-bad' | 'mask-oval' | 'mask-rect' | 'mask-cloud' | 'mask-circle' | 'mask-diamond' Or image string from import
undefined
wordcloudOptions
wordcloud2.js options
WordcloudOptions
undefined
<BarHorizontal /> (1.0.6)
Property
Description
Type
Default
yAxisData
Will replace the data of yAxis with this
any[]
undefined
legendPosition
Position of legend
'top' | 'left' | 'right' | 'bottom'
undefined
<Table /> (1.0.21)
Property
Description
Type
Default
colorList
A set of color to decorate table. ['border and header bg', 'header text', 'sum column text', 'body bg', 'row bg on hover', 'body text']
string[]
undefined
showRank
Show the index column
boolean
undefined
showSum
Show the sum column
boolean
undefined
hideDimensionCompareTitle
Hide the same header for compare dimension
boolean
undefined
blockWrapHeight
The height of the table wrapper
number
500
sortKey
The unique string that use to save the order of table column
string
undefined
columnWidth
Column width
150
undefined
antdOptions
Ant Design table options
TableProps
undefined
Q/A
Q: How to get the instance of echarts?
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