feat:多折线图

main/src/components/custom-echart-multi-line/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script>
+import { ref, reactive, watchEffect } from 'vue';
+import { cloneDeep } from 'lodash';
+import { useEcharts } from '../../hooks/useEcharts';
+
+export default {
+  name: 'CustomEchartMultiLine',
+  props: {
+    chartData: {
+      type: Array,
+      default: () => [],
+      required: true,
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    type: {
+      type: String,
+      default: 'line',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 78px)',
+    },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const chartRef = ref(null);
+    const { setOptions, getInstance } = useEcharts(chartRef);
+    const option = reactive({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          label: {
+            show: true,
+            backgroundColor: '#333',
+          },
+        },
+      },
+      legend: {
+        top: 30,
+      },
+      grid: {
+        top: 60,
+      },
+      xAxis: {
+        type: 'category',
+        data: [],
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [],
+    });
+
+    watchEffect(() => {
+      props.chartData && initCharts();
+    });
+
+    function hexToRGBA(hex, alpha = 1) {
+      let hexCode = hex.replace('#', '');
+      if (hexCode.length === 3) {
+        hexCode = hexCode
+          .split('')
+          .map((char) => char + char)
+          .join('');
+      }
+      const r = parseInt(hexCode.slice(0, 2), 16);
+      const g = parseInt(hexCode.slice(2, 4), 16);
+      const b = parseInt(hexCode.slice(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+
+    function setAreaStyle(color) {
+      return {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: hexToRGBA(color, 0.2),
+            },
+            {
+              offset: 1,
+              color: hexToRGBA(color, 1),
+            },
+          ],
+        },
+      };
+    }
+
+    function initCharts() {
+      if (props.option) {
+        Object.assign(option, cloneDeep(props.option));
+      }
+      let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
+      let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
+      let seriesData = [];
+      typeArr.forEach((type, index) => {
+        let obj = {
+          name: type,
+          type: props.type,
+          smooth: true,
+        };
+        if (props.option?.color) {
+          obj.areaStyle = setAreaStyle(props.option?.color[index]);
+        }
+        const findItem = props.chartData.find((item) => item.type == type);
+        if (findItem && findItem.color) {
+          obj.color = findItem.color;
+          obj.areaStyle = setAreaStyle(findItem.color[index]);
+        }
+        let data = [];
+        xAxisData.forEach((x) => {
+          let dataArr = props.chartData.filter((item) => type === item.type && item.name == x);
+          if (dataArr && dataArr.length > 0) {
+            data.push(dataArr[0].value);
+          } else {
+            data.push(null);
+          }
+        });
+        obj['data'] = data;
+        seriesData.push(obj);
+      });
+      option.series = seriesData;
+      option.xAxis.data = xAxisData;
+      setOptions(option);
+      getInstance()?.off('click', onClick);
+      getInstance()?.on('click', onClick);
+    }
+
+    function onClick(params) {
+      emit('click', params);
+    }
+
+    return { chartRef };
+  },
+};
+</script>

main/src/components/index.js

@@ -4,5 +4,6 @@ import CustomImportExcel from './custom-import-excel';
 import CustomRichEditor from './custom-rich-editor';
 import CustomEchartBar from './custom-echart-bar';
 import CustomEchartPie from './custom-echart-pie';
+import CustomEchartMultiLine from './custom-echart-multi-line';
 
-export { SvgIcon, CustomTableOperate, CustomImportExcel, CustomRichEditor, CustomEchartBar, CustomEchartPie };
+export { SvgIcon, CustomTableOperate, CustomImportExcel, CustomRichEditor, CustomEchartBar, CustomEchartPie, CustomEchartMultiLine };