tsxecharts
https://github.com/lloydzhou/…
React component wrapper for ECharts based on TypeScript.
我的项目设计
- 参考 vuecharts3 对 echarts 进行封装
- 将 echarts 官网形象的
series
以及其余的一些组件形象成为React
的组件应用,每一个组件负责管理本人的配置项。 - 这些配置项对立的合并到
Chart
画布组件。再对立的通过chart.setOption
更新到图表上
装置
yarn add tsxecharts
Components
- 定义一个
Chart
组件作为画布 - 将 echarts 官网配置项每一个配置项应用对立的工厂函数结构成
React Component
DEMO
import 'echarts'
import Echarts from 'vuecharts3'
import {Chart, Line, Bar, Title, Grid, XAxis, YAxis, Tooltip} from 'tsxecharts'
function App() {
return (
<div className="App">
<Chart width={800}>
<Grid top={100} />
<Title text="顶部题目" subtext="顶部小标题" left="center" top={10} />
<Title text="底部题目" top="bottom" left="center" />
<Bar name="data1" data={[0.32, 0.45, 0.2]} />
<Bar name="data2" data={[0.2, 0.5, 0.3]} />
<Line name="data2" data={[0.2, 0.5, 0.3]} />
<XAxis data={['x1', 'x2', 'x3']} />
<YAxis />
<Tooltip trigger="axis" />
</Chart>
</div>
)
}
自定义组件
- 通过自定义组件实现官网切换图像的 example
function TreemapSunburstTransition() {const [type, setType] = useState('')
const [data, setData] = useState()
const interval = useRef()
const id = 'echarts-package-size'
useEffect(() => {const url = "https://fastly.jsdelivr.net/gh/apache/[email protected]/examples/data/asset/data/echarts-package-size.json"
fetch(url).then(res => res.json()).then(data => {setData(data.children)
let type = ''console.log('data.value', data.children)
interval.current && clearInterval(interval.current);
// @ts-ignore
interval.current = setInterval(function () {setType(type = type === 'treemap' ? 'sunburst' : 'treemap')
console.log('state.type', type)
}, 3000);
})
return () => interval.current && clearInterval(interval.current)
}, [])
if (type === 'treemap') {return <Treemap id={id} animationDurationUpdate={1000} roam={false} nodeClick={undefined} data={data} universalTransition label={{show: true}} breadcrumb={{show: false}} />
}
return <Sunburst id={id} radius={['20%', '90%']} animationDurationUpdate={1000} nodeClick={undefined} data={data} universalTransition label={{show: false}} itemStyle={{borderWidth: 1, borderColor: 'rgba(255,255,255,.5)'}} />
}
function App() {
return (
<div className="App">
<Chart width={800}>
<TreemapSunburstTransition />
</Chart>
</div>
)
}