全领域

src/views/ZMOverView/components/fourSuppress/components/addDomain/multiLineChart.js

+import * as echarts from 'echarts';
+
+const getMultiLineChart = (data) => {
+  // 提取标题和系列数据
+  // const { title, series } = data;
+  const title = data.title
+  const series = data.data
+
+  // 动态生成 series 配置
+  const echartsSeries = series.map((item, index) => ({
+    name: item.name,
+    type: 'line',
+    // areaStyle: {
+    //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    //     {
+    //       offset: 0,
+    //       color: item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)` // 随机颜色
+    //     },
+    //     {
+    //       offset: 1,
+    //       color: item.color ? `${item.color.replace('0.7', '0')}` : `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0)` // 随机颜色
+    //     }
+    //   ])
+    // },
+    emphasis: {
+      focus: 'series'
+    },
+    data: item.value
+  }));
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    grid: {
+      top: '15%',
+      right: '1%',
+      bottom: '0%',
+      left: '1%',
+      containLabel: true
+    },
+    legend: {
+      show: true,
+      top: 10,
+      left: 'center'
+    },
+    color: series.map(item => item.color || `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.7)`), // 动态颜色
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: title
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: echartsSeries
+  };
+};
+
+export default getMultiLineChart;
\ No newline at end of file