win-chart 2.13.0 → 3.0.0

package/README.md

@@ -1,22 +1,70 @@
 # win-chart
 
-基于 echarts 封装的 react 组件。
+基于 ECharts 6 + React 18 封装的通用图表组件库。
+
+> **v3.0.0 全新升级**
+>
+> - 🚀 **更小体积**：支持 Tree Shaking，按需加载。
+> - 📦 **双格式产物**：同时支持 ESM 和 CJS，兼容性更好。
+> - ⚡️ **最新依赖**：适配 React 18 和 ECharts 6。
 
 ## Install
 
 ```bash
-$ npm i win-chart --save
+# 安装组件库
+npm i win-chart
+
+# 安装必要依赖 (Peer Dependencies)
+npm i echarts react react-dom styled-components
 ```
 
 ## Usage
 
+### 基础示例
+
 ```jsx
-import WinChart from 'win-chart';
+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. 组件只需传递枚举 WinChartType 与 data 两个属性即可渲染标准图表，基中 WinChartType 代表图表类型，data 为带 label（x 轴）、value（y 轴）、type（图例、颜色） 三个成员的对象数组。
-3. 双轴图（本质上是两个两个图表拼装）需要传递 extraData，与 data 格式相同，对应右轴图表。注意双轴图的两个数据，label 字段的顺序要必须相同且不可缺失。
-4. 额外配置可通过 extraOption 传递，格式为 echarts option，此配置优先级最高，会覆盖默认配置（采用 deepmerge，只覆盖差异部分）。
+1. **容器高度**：组件默认宽高为 `100%`，请确保外层容器有明确的高度，否则图表可能无法显示。
+2. **核心属性**：
+   - `chartType`: 图表类型枚举（如 `WinChartType.LINE`, `WinChartType.BAR`）。
+   - `data`: 数据数组，每个元素需包含 `label` (X轴/分类), `value` (数值), `type` (分组/图例) 三个字段。
+3. **双轴图表**：使用 `extraData` 属性传递右轴数据。注意：`data` 和 `extraData` 的 `label` 顺序必须严格一致且不可缺失。
+4. **自定义配置**：通过 `extraOption` 传递原生 ECharts 配置项。该配置优先级最高，将通过 `deepmerge` 覆盖默认配置。

package/dist/cjs/components/ChartWrapper.cjs

@@ -0,0 +1,39 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    ChartWrapper: ()=>ChartWrapper
+});
+const external_styled_components_namespaceObject = require("styled-components");
+const ChartWrapper = external_styled_components_namespaceObject.styled.div`
+  height: 100%;
+`;
+exports.ChartWrapper = __webpack_exports__.ChartWrapper;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ChartWrapper"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/EarthChart.cjs

@@ -0,0 +1,168 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    EarthChart: ()=>EarthChart
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_echarts_namespaceObject = require("echarts");
+require("echarts-gl");
+const external_react_namespaceObject = require("react");
+const external_ChartWrapper_cjs_namespaceObject = require("./ChartWrapper.cjs");
+const tool_cjs_namespaceObject = require("../utils/tool.cjs");
+const mockPointsData = [];
+for(let i = 0; i < 50; i++)mockPointsData.push({
+    name: `测试${i + 1}`,
+    value: [
+        150 * Math.random(),
+        50 * Math.random()
+    ],
+    symbolSize: 8
+});
+const mockLinesData = [];
+for(let i = 0; i < 10; i++)mockLinesData.push([
+    [
+        150 * Math.random(),
+        50 * Math.random()
+    ],
+    [
+        150 * Math.random(),
+        50 * Math.random()
+    ]
+]);
+const EarthChart = ({ className = '', style = {}, extraOption = {}, lineStyles = {}, pointsStyles = {}, pointsData = [], linesData = [], globeOption = {} })=>{
+    const boxRef = (0, external_react_namespaceObject.useRef)(null);
+    const [eChart, setEChart] = (0, external_react_namespaceObject.useState)();
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const eChart = external_echarts_namespaceObject.init(boxRef.current);
+        setEChart(eChart);
+        const resize = (0, tool_cjs_namespaceObject.debounce)(eChart.resize, 500);
+        const handlerResize = ()=>{
+            resize();
+        };
+        globalThis.addEventListener('resize', handlerResize);
+        return ()=>{
+            globalThis.removeEventListener('resize', handlerResize);
+        };
+    }, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (eChart) {
+            const series = [];
+            series.push({
+                type: 'lines3D',
+                name: "lines3D",
+                effect: {
+                    show: true,
+                    trailWidth: 2,
+                    trailLength: 0.15,
+                    trailOpacity: 1,
+                    trailColor: 'rgb(30, 30, 60)'
+                },
+                lineStyle: {
+                    width: 5,
+                    color: 'rgb(50, 50, 150)',
+                    opacity: 0.3
+                },
+                blendMode: 'lighter',
+                data: linesData,
+                ...lineStyles
+            });
+            series.push({
+                type: 'scatter3D',
+                coordinateSystem: 'globe',
+                zlevel: 3,
+                rippleEffect: {
+                    brushType: 'stroke'
+                },
+                label: {
+                    fontSize: 8,
+                    show: true,
+                    position: 'right',
+                    formatter: '{b}'
+                },
+                itemStyle: {
+                    normal: {
+                        color: '#f5f802'
+                    }
+                },
+                data: pointsData,
+                ...pointsStyles
+            });
+            eChart.setOption({
+                backgroundColor: '#000',
+                baseColor: '#000',
+                shading: 'realistic',
+                globe: {
+                    environment: 'https://img.alicdn.com/imgextra/i2/O1CN017x8UE61p6wqej1Y0c_!!6000000005312-0-tps-2048-1024.jpg',
+                    heightTexture: 'https://img.alicdn.com/imgextra/i2/O1CN01BB16kM1ILFttfdYZg_!!6000000000876-0-tps-4096-2048.jpg',
+                    baseTexture: 'https://img.alicdn.com/imgextra/i4/O1CN01fs70Dq25ElSd8mU6C_!!6000000007495-0-tps-5400-2700.jpg',
+                    shading: 'lambert',
+                    light: {
+                        ambient: {
+                            intensity: 1
+                        },
+                        main: {
+                            intensity: 0.1
+                        }
+                    },
+                    viewControl: {
+                        autoRotate: true,
+                        distance: 230
+                    },
+                    left: '20%',
+                    ...globeOption
+                },
+                series: series,
+                ...extraOption
+            });
+            const timer = setTimeout(()=>{
+                eChart.resize();
+            }, 500);
+            return ()=>{
+                clearTimeout(timer);
+            };
+        }
+    }, [
+        eChart,
+        extraOption,
+        globeOption,
+        lineStyles,
+        linesData,
+        pointsData,
+        pointsStyles
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ChartWrapper_cjs_namespaceObject.ChartWrapper, {
+        ref: boxRef,
+        className: className,
+        style: style
+    });
+};
+exports.EarthChart = __webpack_exports__.EarthChart;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "EarthChart"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/components/GanttChart.cjs

@@ -0,0 +1,302 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    GanttChart: ()=>GanttChart
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_echarts_namespaceObject = require("echarts");
+const external_react_namespaceObject = require("react");
+const external_ChartWrapper_cjs_namespaceObject = require("./ChartWrapper.cjs");
+const tool_cjs_namespaceObject = require("../utils/tool.cjs");
+const data_cjs_namespaceObject = require("../utils/data.cjs");
+const HEIGHT_RATIO = 0.6;
+const DIM_CATEGORY_INDEX = 0;
+const DIM_TIME_ARRIVAL = 1;
+const DIM_TIME_DEPARTURE = 2;
+const _cartesianXBounds = [];
+const _cartesianYBounds = [];
+const _rawData = data_cjs_namespaceObject.airportData;
+const GanttChart = ({ className = '', style = {}, extraOption = {} })=>{
+    const boxRef = (0, external_react_namespaceObject.useRef)(null);
+    const [eChart, setEChart] = (0, external_react_namespaceObject.useState)();
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const eChart = external_echarts_namespaceObject.init(boxRef.current);
+        setEChart(eChart);
+        const resize = (0, tool_cjs_namespaceObject.debounce)(eChart.resize, 500);
+        const handlerResize = ()=>{
+            resize();
+        };
+        globalThis.addEventListener('resize', handlerResize);
+        return ()=>{
+            globalThis.removeEventListener('resize', handlerResize);
+        };
+    }, []);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (eChart) {
+            eChart.setOption(makeOption());
+            const timer = setTimeout(()=>{
+                eChart.resize();
+            }, 500);
+            return ()=>{
+                clearTimeout(timer);
+            };
+        }
+    }, [
+        eChart,
+        extraOption
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ChartWrapper_cjs_namespaceObject.ChartWrapper, {
+        ref: boxRef,
+        className: className,
+        style: style
+    });
+};
+function makeOption() {
+    return {
+        tooltip: {},
+        animation: false,
+        toolbox: {
+            left: 20,
+            top: 0,
+            itemSize: 20
+        },
+        title: {
+            text: 'Gantt of Airport Flight',
+            left: 'center'
+        },
+        grid: {
+            show: true,
+            top: 70,
+            bottom: 20,
+            left: 100,
+            right: 20,
+            backgroundColor: '#fff',
+            borderWidth: 0
+        },
+        xAxis: {
+            type: 'time',
+            position: 'top',
+            splitLine: {
+                lineStyle: {
+                    color: [
+                        '#E9EDFF'
+                    ]
+                }
+            },
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                lineStyle: {
+                    color: '#929ABA'
+                }
+            },
+            axisLabel: {
+                color: '#929ABA',
+                inside: false,
+                align: 'center'
+            }
+        },
+        yAxis: {
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            },
+            axisLine: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            },
+            min: 0,
+            max: _rawData.parkingApron.data.length
+        },
+        series: [
+            {
+                id: 'flightData',
+                type: 'custom',
+                renderItem: renderGanttItem,
+                dimensions: _rawData.flight.dimensions,
+                encode: {
+                    x: [
+                        DIM_TIME_ARRIVAL,
+                        DIM_TIME_DEPARTURE
+                    ],
+                    y: DIM_CATEGORY_INDEX,
+                    tooltip: [
+                        DIM_CATEGORY_INDEX,
+                        DIM_TIME_ARRIVAL,
+                        DIM_TIME_DEPARTURE
+                    ]
+                },
+                data: _rawData.flight.data
+            },
+            {
+                type: 'custom',
+                renderItem: renderAxisLabelItem,
+                dimensions: _rawData.parkingApron.dimensions,
+                encode: {
+                    x: -1,
+                    y: 0
+                },
+                data: _rawData.parkingApron.data.map(function(item, index) {
+                    return [
+                        index
+                    ].concat(item);
+                })
+            }
+        ]
+    };
+}
+function renderGanttItem(params, api) {
+    const categoryIndex = api.value(DIM_CATEGORY_INDEX);
+    const timeArrival = api.coord([
+        api.value(DIM_TIME_ARRIVAL),
+        categoryIndex
+    ]);
+    const timeDeparture = api.coord([
+        api.value(DIM_TIME_DEPARTURE),
+        categoryIndex
+    ]);
+    const coordSys = params.coordSys;
+    _cartesianXBounds[0] = coordSys.x;
+    _cartesianXBounds[1] = coordSys.x + coordSys.width;
+    _cartesianYBounds[0] = coordSys.y;
+    _cartesianYBounds[1] = coordSys.y + coordSys.height;
+    const barLength = timeDeparture[0] - timeArrival[0];
+    const barHeight = api.size([
+        0,
+        1
+    ])[1] * HEIGHT_RATIO;
+    const x = timeArrival[0];
+    const y = timeArrival[1] - barHeight;
+    const flightNumber = api.value(3) + '';
+    const flightNumberWidth = external_echarts_namespaceObject.format.getTextRect(flightNumber).width;
+    const text = barLength > flightNumberWidth + 40 && x + barLength >= 180 ? flightNumber : '';
+    const rectNormal = clipRectByRect(params, {
+        x: x,
+        y: y,
+        width: barLength,
+        height: barHeight
+    });
+    const rectVIP = clipRectByRect(params, {
+        x: x,
+        y: y,
+        width: barLength / 2,
+        height: barHeight
+    });
+    const rectText = clipRectByRect(params, {
+        x: x,
+        y: y,
+        width: barLength,
+        height: barHeight
+    });
+    return {
+        type: 'group',
+        children: [
+            {
+                type: 'rect',
+                ignore: !rectNormal,
+                shape: rectNormal,
+                style: api.style()
+            },
+            {
+                type: 'rect',
+                ignore: !rectVIP && !api.value(4),
+                shape: rectVIP,
+                style: api.style({
+                    fill: '#ddb30b'
+                })
+            },
+            {
+                type: 'rect',
+                ignore: !rectText,
+                shape: rectText,
+                style: api.style({
+                    fill: 'transparent',
+                    stroke: 'transparent',
+                    text: text,
+                    textFill: '#fff'
+                })
+            }
+        ]
+    };
+}
+function renderAxisLabelItem(params, api) {
+    const y = api.coord([
+        0,
+        api.value(0)
+    ])[1];
+    if (y < params.coordSys.y + 5) return;
+    return {
+        type: 'group',
+        position: [
+            10,
+            y
+        ],
+        children: [
+            {
+                type: 'text',
+                style: {
+                    x: 24,
+                    y: -3,
+                    text: api.value(1),
+                    textVerticalAlign: 'bottom',
+                    textAlign: 'center',
+                    textFill: '#fff'
+                }
+            },
+            {
+                type: 'text',
+                style: {
+                    x: 75,
+                    y: -2,
+                    textVerticalAlign: 'bottom',
+                    textAlign: 'center',
+                    text: api.value(2),
+                    textFill: '#000'
+                }
+            }
+        ]
+    };
+}
+function clipRectByRect(params, rect) {
+    return external_echarts_namespaceObject.graphic.clipRectByRect(rect, {
+        x: params.coordSys.x,
+        y: params.coordSys.y,
+        width: params.coordSys.width,
+        height: params.coordSys.height
+    });
+}
+exports.GanttChart = __webpack_exports__.GanttChart;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "GanttChart"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});