入门

安装

在终端中输入：

# npm
npm i effcharts

# pnpm
pnpm add effcharts

# yarn
yarn add effcharts

快速入门

简而言之，每个 Web 组件在使用前都应该进行定义。此库中的每个模块都提供了这样的函数：

• usePie（来自 effcharts/pie 模块）允许使用饼图和环形图；
• useLine（来自 effcharts/line 模块）允许使用折线图和面积图；
• useBar（来自 effcharts/bar 模块）允许使用柱状图（包括堆叠柱状图）。

每个函数都会返回一个包含 getConfig、observe 和 unobserve 处理程序的对象，用于控制组件的行为。

例如，您想使用柱状图：

import { useState, useEffect } from 'react';
import { useBar } from 'effcharts/bar';

// 使用前定义自定义 Web 组件
// 注意，对于服务端渲染 (SSR)，需要在浏览器解析文档主体之前调用它
// 因此，您可能需要在文档头部添加单独的定义脚本。
const { observe, getConfig } = useBar();

export const App = () => {
    const ref = useRef();
    const [config, setConfig] = useState(getConfig({
      data: [
        {
            name: 'Page A',
            uv: 4000,
            pv: 2400,
            amt: -2400,
        },
        {
            name: 'Page B',
            uv: 3000,
            pv: 1398,
            amt: -2210,
        },
        {
            name: 'Page C',
            uv: 2000,
            pv: 9800,
            amt: -2290,
        }
      ],
      series: {
        def: {
          title: 'Default',
          field: 'uv',
          color: 'blue'
        },
        sec: {
          title: 'Secondary',
          field: 'pv',
          color: 'green'
        }
      }
    }));
    useEffect(() => {
      // 您可以观察 Web 组件事件
      const unobserve = observe((e) => {
        // 事件处理程序
      }, ref.current);
      // 你可以停止收听事件
      return () => unobserve();
    }, []);
    // 只需在 JSX 中使用 Web 组件即可
    return <div ref={ref}>
        <effcharts-bar config={config}>
        </effcharts-bar>
    </div>;
}

就这些。享受简单吧。