win-chart 1.0.0 → 1.0.2

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

@@ -1,372 +0,0 @@
-{
-  "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

@@ -1,37 +0,0 @@
-/**
- * 色值
- */
-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

@@ -1,150 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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 {};
-  }
-};