win-chart

基于 ECharts 6 + React 18 封装的通用图表组件库。

v3.0.0 全新升级

• 🚀 更小体积：支持 Tree Shaking，按需加载。
• 📦 双格式产物：同时支持 ESM 和 CJS，兼容性更好。
• ⚡️ 最新依赖：适配 React 19 和 ECharts 6。

Install

# 安装组件库
npm i win-chart

注意：项目需依赖 React 环境 (支持 React 18 或 19)。

Usage

基础示例

import { WinChart, WinChartType } from 'win-chart';

// 示例 1: 基础折线图
const LineDemo = () => {
  const data = [
    { label: '2019', value: 100, type: '系列A' },
    { label: '2020', value: 120, type: '系列A' },
    { label: '2021', value: 150, type: '系列A' },
  ];

  return (
    <div style={{ height: 400 }}>
      <WinChart
        chartType={WinChartType.LINE}
        data={data}
        extraOption={{ title: { text: '折线图示例' } }}
      />
    </div>
  );
};

// 示例 2: 基础柱状图
const BarDemo = () => {
  const data = [
    { label: '产品A', value: 320, type: '销售额' },
    { label: '产品B', value: 450, type: '销售额' },
    { label: '产品C', value: 280, type: '销售额' },
  ];

  return (
    <div style={{ height: 400 }}>
      <WinChart chartType={WinChartType.BAR} data={data} />
    </div>
  );
};

注意事项

1. 容器高度：组件默认宽高为 100%，请确保外层容器有明确的高度，否则图表可能无法显示。
2. 核心属性：
   • chartType: 图表类型枚举（如 WinChartType.LINE, WinChartType.BAR）。
   • data: 数据数组，每个元素需包含 label (X轴/分类), value (数值), type (分组/图例) 三个字段。
3. 双轴图表：使用 extraData 属性传递右轴数据。注意：data 和 extraData 的 label 顺序必须严格一致且不可缺失。
4. 自定义配置：通过 extraOption 传递原生 ECharts 配置项。该配置优先级最高，将通过 deepmerge 覆盖默认配置。