win-chart 1.0.0

package/src/components/win-chart/theme/win-light.json

@@ -0,0 +1,372 @@
+{
+  "color": [
+    "#3379ff",
+    "#00dcf0",
+    "#ffc94d",
+    "#00db75",
+    "#b8b3ff",
+    "#40b4ff",
+    "#ffa101",
+    "#90abe0",
+    "#6ee67a",
+    "#6b84ff",
+    "#fa6b69"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#272f3d"
+    },
+    "subtextStyle": {
+      "color": "#394252"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "borderWidth": 1
+    },
+    "lineStyle": {
+      "width": 2
+    },
+    "symbolSize": 4,
+    "symbol": "emptyCircle",
+    "smooth": false
+  },
+  "radar": {
+    "itemStyle": {
+      "borderWidth": 1
+    },
+    "lineStyle": {
+      "width": 2
+    },
+    "symbolSize": 4,
+    "symbol": "emptyCircle",
+    "smooth": false
+  },
+  "bar": {
+    "itemStyle": {
+      "barBorderWidth": "0",
+      "barBorderColor": "#cccccc"
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#cccccc"
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#cccccc"
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#cccccc"
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#cccccc"
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#cccccc"
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#cccccc"
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#cccccc"
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "color": "#f15451",
+      "color0": "#00c267",
+      "borderColor": "#f15451",
+      "borderColor0": "#00c267",
+      "borderWidth": 1
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#cccccc"
+    },
+    "lineStyle": {
+      "width": "1",
+      "color": "#dfe3eb"
+    },
+    "symbolSize": 4,
+    "symbol": "emptyCircle",
+    "smooth": false,
+    "color": [
+      "#3379ff",
+      "#00dcf0",
+      "#ffc94d",
+      "#00db75",
+      "#b8b3ff",
+      "#40b4ff",
+      "#ffa101",
+      "#90abe0",
+      "#6ee67a",
+      "#6b84ff",
+      "#fa6b69"
+    ],
+    "label": {
+      "color": "#ffffff"
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "areaColor": "#eee",
+      "borderColor": "#444",
+      "borderWidth": 0.5
+    },
+    "label": {
+      "color": "#000"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(255,215,0,0.8)",
+        "borderColor": "#444",
+        "borderWidth": 1
+      },
+      "label": {
+        "color": "rgb(100,0,0)"
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "areaColor": "#eee",
+      "borderColor": "#444",
+      "borderWidth": 0.5
+    },
+    "label": {
+      "color": "#000"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(255,215,0,0.8)",
+        "borderColor": "#444",
+        "borderWidth": 1
+      },
+      "label": {
+        "color": "rgb(100,0,0)"
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#eef0f5"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#eef0f5"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#828b9e"
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": ["#E0E6F1"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": false,
+      "lineStyle": {
+        "color": "#6E7079"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#6E7079"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#828b9e"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eef0f5"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": false,
+      "lineStyle": {
+        "color": "#6E7079"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#6E7079"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#828b9e"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eef0f5"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#eef0f5"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#eef0f5"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#828b9e"
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": ["#E0E6F1"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "borderColor": "#828c9e"
+    },
+    "emphasis": {
+      "iconStyle": {
+        "borderColor": "#394252"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#828b9e"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccd1db",
+        "width": "1"
+      },
+      "crossStyle": {
+        "color": "#ccd1db",
+        "width": "1"
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#eef0f5",
+      "width": 2
+    },
+    "itemStyle": {
+      "color": "#eef0f5",
+      "borderWidth": "1"
+    },
+    "controlStyle": {
+      "color": "#828c9e",
+      "borderColor": "#828c9e",
+      "borderWidth": 1
+    },
+    "checkpointStyle": {
+      "color": "#3379ff",
+      "borderColor": "#ffffff"
+    },
+    "label": {
+      "color": "#b1b9c7"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "color": "#3379ff"
+      },
+      "controlStyle": {
+        "color": "#828c9e",
+        "borderColor": "#828c9e",
+        "borderWidth": 1
+      },
+      "label": {
+        "color": "#b1b9c7"
+      }
+    }
+  },
+  "visualMap": {
+    "color": ["#062379", "#2058d2", "#3379ff", "#a0cbff", "#e8f4ff"]
+  },
+  "dataZoom": {
+    "handleSize": "undefined%",
+    "textStyle": {}
+  },
+  "markPoint": {
+    "label": {
+      "color": "#ffffff"
+    },
+    "emphasis": {
+      "label": {
+        "color": "#ffffff"
+      }
+    }
+  }
+}

package/src/components/win-chart/utils/const.ts

@@ -0,0 +1,37 @@
+/**
+ * 色值
+ */
+export const COLOR_LIST = [
+  '#3D84FF',
+  '#00DCF0',
+  '#FCBC26',
+  '#00DB75',
+  '#BDB8FF',
+  '#40B4FF',
+  '#FFA101',
+  '#90ABE0',
+  '#6EE67A',
+  '#6B84FF',
+  '#FA6B69',
+];
+
+/**
+ * 通用配置
+ */
+export const commonOpt: echarts.EChartsOption = {
+  grid: {
+    top: 24,
+    left: 0,
+    right: 12,
+    bottom: 32,
+    containLabel: true,
+  },
+  color: COLOR_LIST,
+  legend: {
+    itemWidth: 10,
+    itemHeight: 10,
+    bottom: 0,
+    type: 'scroll',
+    icon: 'circle',
+  },
+};

package/src/components/win-chart/utils/getAreaSpec.ts

@@ -0,0 +1,150 @@
+import { COLOR_LIST } from './const';
+import { rgba } from 'polished';
+import { IWinChartProps } from './type';
+import { arrDeduplication, checkEntityArr, getAxisOpt } from './tool';
+import * as echarts from 'echarts';
+
+/**
+ * Mini 面积图
+ * @param winChartProps
+ * @returns
+ */
+export const getMiniAreaOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const barTypeList = arrDeduplication<string>(
+    winChartProps.data?.map((item) => item.type!),
+  );
+  const color = winChartProps.color;
+
+  return {
+    color,
+    grid: {
+      top: 4,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#999',
+        },
+      },
+    },
+    legend: {
+      show: false,
+    },
+    xAxis: {
+      show: false,
+      boundaryGap: false,
+      data: arrDeduplication(winChartProps.data?.map((item) => item.label)),
+    },
+    yAxis: {
+      show: false,
+      min: winChartProps.yStart?.[0],
+    },
+    series: [
+      ...barTypeList.map((name, index) => {
+        const areaColor = color?.[index] ?? COLOR_LIST[index];
+        return {
+          name,
+          type: 'line',
+          smooth: true,
+          lineStyle: {
+            width: 2,
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: rgba(areaColor, 0.5),
+              },
+              {
+                offset: 1,
+                color: '#fff',
+              },
+            ]),
+          },
+          emphasis: {
+            focus: 'series',
+          },
+          data: winChartProps.data
+            ?.filter((item) => item.type === name)
+            .map((item) => item.value),
+        };
+      }),
+    ] as any,
+  };
+};
+
+/**
+ * 面积图
+ * @param winChartProps
+ * @returns
+ */
+export const getAreaOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const barTypeList = arrDeduplication<string>(
+    winChartProps.data?.map((item) => item.type!),
+  );
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#999',
+        },
+      },
+    },
+    legend: {
+      bottom: 0,
+      type: 'scroll',
+    },
+    xAxis: getAxisOpt(winChartProps),
+    yAxis: {
+      min: winChartProps.yStart?.[0],
+    },
+    series: [
+      ...barTypeList.map((name, index) => {
+        const areaColor = COLOR_LIST[index];
+        return {
+          name,
+          type: 'line' as any,
+          smooth: true,
+          lineStyle: {
+            width: 2,
+          },
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.8,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: rgba(areaColor, 0.5),
+              },
+              {
+                offset: 1,
+                color: '#fff',
+              },
+            ]),
+          },
+          emphasis: {
+            focus: 'series' as any,
+          },
+          data: winChartProps.data
+            ?.filter((item) => item.type === name)
+            .map((item) => item.value),
+        };
+      }),
+    ],
+  };
+};

package/src/components/win-chart/utils/getBarSpec.ts

@@ -0,0 +1,60 @@
+import { IWinChartProps } from './type';
+import { arrDeduplication } from './tool';
+import * as echarts from 'echarts';
+
+/**
+ * 条形图
+ * @param winChartProps
+ * @returns
+ */
+export const getBarOpt = (
+  winChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const barTypeList = arrDeduplication<string>(
+    winChartProps.data?.map((item) => item.type!),
+  );
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#999',
+        },
+      },
+    },
+    legend: {
+      bottom: 0,
+      type: 'scroll',
+    },
+    xAxis: {},
+    yAxis: {
+      data: arrDeduplication(winChartProps.data?.map((item) => item.label)),
+      axisTick: {
+        alignWithLabel: true,
+      },
+      axisPointer: {
+        type: 'shadow',
+      },
+      min: winChartProps.yStart?.[0],
+    },
+    series: barTypeList.map((name) => {
+      return {
+        name,
+        type: 'bar',
+        barGap: '30%',
+        barCategoryGap: '30%',
+        barMaxWidth: 8,
+        data: winChartProps.data
+          ?.filter((item) => item.type === name)
+          .map((item) => ({
+            value: item.value,
+            itemStyle: {
+              borderRadius: [0, 500, 500, 0],
+            },
+          })),
+      };
+    }),
+  };
+};

package/src/components/win-chart/utils/getChartOptions.ts

@@ -0,0 +1,59 @@
+import { IWinChartProps, WinChartType } from './type';
+import { getAreaOpt, getMiniAreaOpt } from './getAreaSpec';
+import { getDualOpt } from './getDualSpec';
+import { getPieCycleOpt, getPieOpt } from './getPieSpec';
+import { getLineOpt } from './getLineSpec';
+import { getColumnOpt, getColumnStackOpt } from './getColumnSpec';
+import { getFunnelOpt } from './getFunnelSpec';
+import { getBarOpt } from './getBarSpec';
+import { handleSort } from './tool';
+import { getRadarOpt } from './getRadarSpec';
+
+/**
+ * 获取图表配置
+ * @param chartType
+ * @returns
+ */
+export const getEChartOptions = (
+  originWinChartProps: IWinChartProps,
+): echarts.EChartsOption => {
+  const winChartProps = handleSort(originWinChartProps);
+
+  switch (winChartProps.chartType) {
+    case WinChartType.MINI_AREA:
+      return getMiniAreaOpt(winChartProps);
+
+    case WinChartType.AREA:
+      return getAreaOpt(winChartProps);
+
+    case WinChartType.LINE:
+      return getLineOpt(winChartProps);
+
+    case WinChartType.COLUMN:
+      return getColumnOpt(winChartProps);
+
+    case WinChartType.STACK_COLUMN:
+      return getColumnStackOpt(winChartProps);
+
+    case WinChartType.BAR:
+      return getBarOpt(winChartProps);
+
+    case WinChartType.FUNNEL:
+      return getFunnelOpt(winChartProps);
+
+    case WinChartType.DUAL_LINE_BAR:
+      return getDualOpt(winChartProps);
+
+    case WinChartType.PIE:
+      return getPieOpt(winChartProps);
+
+    case WinChartType.CYCLE:
+      return getPieCycleOpt(winChartProps);
+
+    case WinChartType.RADAR:
+      return getRadarOpt(winChartProps);
+
+    default:
+      return {};
+  }
+};