跳至主要內容
React echarts封装

做大屏的时候经常会遇到 echarts 展示，下面展示在 React （^18.2.0） 中对 echarts （^5.4.0） 的简单封装。

样例查看

echarts 封装使用

props 说明

参数 说明 类型 可选值 默认值
opts 初始化传入的 opts https://echarts.apache.org/zh/api.html#echarts.init Object - {renderer: 'svg'}
options 配置项，对应 https://echarts.apache.org/zh/option.html#title Object - {}
seriesData series 数据配置内容https://echarts.apache.org/zh/option.html#series，数据变更自动更新 Array - []
intervalTime 自动切换的时间跨度，指自动切换 高亮 + tooltip 展示，例子 Number - 1500
autoPlay 是否自动播放，指的是是否自动添加切换 高亮 + tooltip 展示 Boolean - true
isAddOn 是否自动添加鼠标上移事件，切换 高亮 + tooltip 展示的时候，鼠标再移动到其他需要高亮显示上时，自动停止切换动画，鼠标移开自动继续播放 Boolean - true
onRef ref实例使用，在父组件中const echartsRef = React.createRef();...<EchartsModule onRef={echartsRef} /> - - -
className 添加样式 String - ''
fxss原创大约 4 分钟Reactecharts