概览
react-vchart 是 VChart 的 React 封装版本，对外主要提供两种风格的组件：
-
<VChart ``/``>以及<VChartSimple ``/``> -
<LineChart ``/``>等语义化标签
它们的差异如下：
-
适用场景：
-
<VChart />：一个大而全的统一入口标签，封装了图表的规范、提供规范的更新、卸载逻辑。适用于toB页面，存在页面搭建类的产品页面，以及自行封装VChart的业务方迁移。 -
语法化标签：适用于简单页面，开发人员手写代码，方便实现拆包按需加载。
-
使用方式：
-
<VChart />：接收一个完整的 spec 作为图表定义，使用时引入VChart组件，并传入 spec 等相关属性。例如：
import { VChart } from '@visactor/react-vchart';
// 假设已经有了 spec 图表描述信息
const spec = {
// 图表定义相关内容
};
const App = () => {
return (
<VChart
spec={spec}
// 其他属性如 options、onReady 等
/>
);
};
export default App;
- 语法化标签：将图表的图表容器以及各个组件都封装为 React 组件导出。使用时根据图表类型选择对应的图表标签，再搭配相应的组件标签和系列标签。例如创建柱状图：
import React, { useRef } from'react';
import { BarChart, Bar, Legend, Axis } from '@visactor/react-vchart';
const App = () => {
const chartRef = useRef(null);
const handleChartClick = () => {
console.log('图表被点击了');
};
const barData = [
{ type: 'Autocracies', year: '1930', value: 129 },
// 其他数据项
];
return (
<div>
<BarChart
ref={chartRef}
data={[{ id: 'id0', values: barData }]}
onClick={handleChartClick}
>
<Bar
seriesField="type"
xField={['year', 'type']}
yField="value"
bar={{
style: {
stroke: '#000',
strokeWidth: 1
},
state: {
hover: {
stroke: 'black'
}
}
}}
/>
<Axis orient="bottom" type="band" />
<Axis orient="left" max={200} type="linear" />
<Legend visible={true} position="start" orient="top" padding={{ bottom: 12 }} />
</BarChart>
</div>
);
};
export default App;
通过上述代码示例，可以更直观地理解两种组件在使用上的差异。
核心代码实现
从实现的角度，<VChart ``/``>和<LineChart ``/``>封装的原理差异并不多，首先所有Chart组件都是基于 BaseChart封装的，核心代码在以下文件：
对于语义化标签而言，除了上述模块外，主要是对组件和系列的封装，核心代码如下：
以AreaChart为例，主要的类关系图如下
在接下来的章节，我们将详细的分析Chart组件、系列组件、VChart组件的封装