# @bud-fe/react-echarts

![npm](https://img.shields.io/npm/v/@bud-fe/react-echarts)

百威前端 React Echarts 组件库。支持平台：Web、Taro

- [Examples](https://bud-fe-react-echarts.pages.dev)
- [GitHub](https://github.ab-inbev.cn/ab-inbev-apac/bud-fe-react-echarts)

---

### 📦 安装

```bash
# for Web
pnpm add echarts echarts-for-react @bud-fe/react-echarts
# for Taro
pnpm add @bud-fe/react-echarts
```

### 🔨 使用

#### Web

底层能力基于 [echarts-for-react](https://github.com/hustcc/echarts-for-react) 这个库。

封装了常用的图表组件，包括：`柱状图 Bar`、`折线图 Line`、`饼图 Pie`、`散点图 Scatter`、`雷达图 Radar`、`漏斗图 Funnel`。

针对常用图表组件提供了**三种**配置图表的方式：

1. 传递具体的 props，比如 `title`、`legend` 等，上述图表组件封装了 `echarts` 中常用的属性作为 props
2. 如果只是需要渲染简单的图表，可以传入 `datasetSource` 作为数据集。详见 https://echarts.apache.org/handbook/zh/concepts/dataset
3. 传递 `option` prop。即 `echarts` 传统的 `setOption`

以 `柱状图 Bar` 举例：

```javascript
import { BfBar, BfBarOption, IBfBarProps } from '@bud-fe/react-echarts';

const props: IBfBarProps = {
  title: { text: '使用props' },
  // ...
};

const source = [
  ['product', '2015', '2016', '2017'],
  ['Matcha Latte', 43.3, 85.8, 93.7],
  ['Milk Tea', 83.1, 73.4, 55.1],
  ['Cheese Cocoa', 86.4, 65.2, 82.5],
  ['Walnut Brownie', 72.4, 53.9, 39.1],
];

const option: BfBarOption = {
  title: { text: '堆叠柱状图' },
  // ...
};

export default () => {
  return (
    <>
      <BfBar {...props} />
      <BfBar option={{ title: { text: '使用数据集dataset' } }} datasetSource={source} />
      <BfBar option={option} />
    </>
  );
};
```

当然，如果需要渲染其他图表或有更多自定义的要求，可以使用 `EChartsReactCore` 组件。这里以 K 线图 为例：

```javascript
import { EChartsReactCore } from '@bud-fe/react-echarts';
import { CandlestickChart, CandlestickSeriesOption } from 'echarts/charts';
import { GridComponent, GridComponentOption } from 'echarts/components';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';

type Option = echarts.ComposeOption<GridComponentOption | CandlestickSeriesOption>;

echarts.use([GridComponent, CandlestickChart, CanvasRenderer]);

const option: Option = {
  title: { text: '基础 K 线图' },
  xAxis: {
    data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
  },
  yAxis: {},
  series: [
    {
      type: 'candlestick',
      data: [
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42],
      ],
    },
  ],
};

export default () => {
  return (
    <>
      <EChartsReactCore echarts={echarts} option={option} />
    </>
  );
};
```

#### Taro

首先需要下载一个 `echarts.js`。自行从 ECharts 项目中下载[最新发布版](https://github.com/ecomfe/echarts/releases)，或者从[官网自定义构建](https://echarts.apache.org/zh/builder.html)以减小文件大小。放置到 Taro 工程目录下，比如 `src/assets/echarts.js`

示例代码

```javascript
import * as echarts from '@/assets/echarts';
import type { BfBarOption } from '@bud-fe/react-echarts';
import { EchartsReact } from '@bud-fe/react-echarts/es/taro';
import { View } from '@tarojs/components';

const option: BfBarOption = {
  title: { text: '堆叠柱状图' },
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E'],
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'bar',
      stack: 'x',
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'bar',
      stack: 'x',
    },
  ],
};

export default () => {
  return (
    <>
      {/* NOTE: 组件必须要显式指定高度 */}
      <EchartsReact style={{ height: 400 }} echarts={echarts} option={option} />
    </>
  );
};
```
