✨ feat<productCenter/productAnalysis/components/DateTendency>: 新增一条折线图, 不受卡片组件控制

src/views/productCenter/productAnalysis/components/DateTendency/index.vue

@@ -121,6 +121,23 @@ const option: any = {
       },
       show: true,
     },
+    {
+      id: 3,
+      type: 'value',
+      position: 'right',
+      offset: 90,
+      name: '',
+      splitLine: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '',
+        },
+      },
+      show: true,
+    },
   ],
   series: [
     {
@@ -182,6 +199,28 @@ const option: any = {
         focus: 'series',
       },
     },
+    {
+      id: 3,
+      name: 'NewMetric',
+      type: 'line',
+      encode: {
+        x: 'Name',
+        y: metrics.value[1].metric,  // TODO: 数据源后续需要修改
+      },
+      symbolSize: 6,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 0, // 假设在默认的y轴上
+      itemStyle: {
+        color: '#1e1e2d',
+        borderColor: '#1e1e2d',
+      },
+      areaStyle: {},
+      emphasis: {
+        focus: 'series',
+      },
+    },
+
   ],
 }
 const loading = ref(true)
@@ -203,30 +242,71 @@ onBeforeUnmount(() => {
   removeResize()
 })
 
+// const initLine = async () => {
+//   chartObj = echarts.init(chartRef.value)
+//   const items = await getDataset()
+//   option.dataset.source = items
+//
+//   XEUtils.arrayEach(option.series, (info: any, index) => {
+//     const color = metrics.value[index].color
+//     info.name = metrics.value[index].label
+//     info.encode.y = metrics.value[index]?.metric
+//     if (info.type === 'bar') {
+//       info.itemStyle.color = color
+//     } else {
+//       info.itemStyle = { color: color, borderColor: color }
+//       info.areaStyle = {
+//         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+//           { offset: 0, color: color + '53' },
+//           { offset: 1, color: color + '03' },
+//         ]),
+//       }
+//     }
+//   })
+//   XEUtils.arrayEach(option.yAxis, (info: any, index) => {
+//     info.name = metrics.value[index].label
+//     info.axisLine.lineStyle.color = metrics.value[index].color
+//   })
+//
+//   XEUtils.arrayEach(props.metricEnum, (info) => {
+//     option.legend.selected[info.label] = false
+//   })
+//   for (const info of metrics.value) {
+//     option.legend.selected[info.label] = true
+//   }
+//   // console.log(option)
+//   chartObj.setOption(option)
+//   loading.value = false
+// }
+
 const initLine = async () => {
   chartObj = echarts.init(chartRef.value)
   const items = await getDataset()
   option.dataset.source = items
 
   XEUtils.arrayEach(option.series, (info: any, index) => {
-    const color = metrics.value[index].color
-    info.name = metrics.value[index].label
-    info.encode.y = metrics.value[index].metric
-    if (info.type === 'bar') {
-      info.itemStyle.color = color
-    } else {
-      info.itemStyle = { color: color, borderColor: color }
-      info.areaStyle = {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: color + '53' },
-          { offset: 1, color: color + '03' },
-        ]),
+    if (info.id < 3) { // 确保只处理前3个series
+      const color = metrics.value[index].color
+      info.name = metrics.value[index].label
+      info.encode.y = metrics.value[index]?.metric
+      if (info.type === 'bar') {
+        info.itemStyle.color = color
+      } else {
+        info.itemStyle = { color: color, borderColor: color }
+        info.areaStyle = {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: color + '53' },
+            { offset: 1, color: color + '03' },
+          ]),
+        }
       }
     }
   })
   XEUtils.arrayEach(option.yAxis, (info: any, index) => {
-    info.name = metrics.value[index].label
-    info.axisLine.lineStyle.color = metrics.value[index].color
+    if (index < metrics.value.length) {
+      info.name = metrics.value[index].label
+      info.axisLine.lineStyle.color = metrics.value[index].color
+    }
   })
 
   XEUtils.arrayEach(props.metricEnum, (info) => {
@@ -235,7 +315,7 @@ const initLine = async () => {
   for (const info of metrics.value) {
     option.legend.selected[info.label] = true
   }
-  // console.log(option)
+
   chartObj.setOption(option)
   loading.value = false
 }