@bud-fe/react-echarts

@bud-fe/react-echarts

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

• Examples
• GitHub

📦 安装

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

🔨 使用

Web

底层能力基于 echarts-for-react 这个库。

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

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

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

以 柱状图 Bar 举例：

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 线图 为例：

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 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。放置到 Taro 工程目录下，比如 src/assets/echarts.js

示例代码

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} />
    </>
  );
};