dataBoard.

src/views/trade/dataBoard.vue

@@ -9,23 +9,23 @@
               <div class="title">
                 <img
                   class="title-image"
-                  src="../../assets/images/profile.jpg"
+                  src="../../assets/images/money.png"
                   alt=""
                 />
-                <div>销售总额</div>
+                <div>销售总额(元)</div>
               </div>
-              <div class="number">12313</div>
+              <div class="number">4,541.00</div>
             </div>
             <div>
               <div class="title">
                 <img
                   class="title-image"
-                  src="../../assets/images/profile.jpg"
+                  src="../../assets/images/order.png"
                   alt=""
                 />
-                <div>订单总数</div>
+                <div>订单总数(单)</div>
               </div>
-              <div class="number">55</div>
+              <div class="number">45</div>
             </div>
           </div>
           <div class="app-container-data-left-bottom">
@@ -33,28 +33,28 @@
               <div class="title">
                 <img
                   class="title-image"
-                  src="../../assets/images/profile.jpg"
+                  src="../../assets/images/views.png"
                   alt=""
                 />
-                <div>浏览量</div>
+                <div>浏览量(次)</div>
               </div>
-              <div class="number">13415</div>
+              <div class="number">61,151</div>
             </div>
             <div>
               <div class="title">
                 <img
                   class="title-image"
-                  src="../../assets/images/profile.jpg"
+                  src="../../assets/images/money1.png"
                   alt=""
                 />
-                <div>成功退款金额</div>
+                <div>成功退款金额(元)</div>
               </div>
-              <div class="number">1565465</div>
+              <div class="number">541.00</div>
             </div>
           </div>
         </div>
         <div class="app-container-data-right">
-          <div ref="chartRef" style="width: 600px; height: 400px"></div>
+          <div ref="chartRef" style="width: 100%; height: 200px"></div>
         </div>
       </div>
     </div>
@@ -131,215 +131,333 @@
 <script setup>
 import { onMounted, ref } from "vue";
 import * as echarts from "echarts";
+// 图表 DOM 引用
 const chartRef = ref(null);
+// ECharts 实例
+let chartInstance = null;
+// 颜色列表
+const colorList = ['#3685FE', '#FFD500', '#25BF82'];
+// x轴数据
+const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月'];
 
-onMounted(() => {
+// 图表配置
-  if (chartRef.value) {
+const option = {
-    const myChart = echarts.init(chartRef.value);
+  backgroundColor: '#fff',
-    const option = {
+  title: {
-      backgroundColor: "#fff",
+    text: '',
-      title: {
+    textStyle: {
-        text: "渐变折线图",
+      fontSize: 12,
-        left: "12%",
+      fontWeight: 400,
-        top: "13%",
+    },
-        textStyle: {
+    left: 'center',
-          color: "#999",
+    top: '5%',
-          fontSize: 14,
+  },
-        },
+  legend: {
-      },
+    icon: 'circle',
-      legend: {
+    top: '0',
+    right: '5%',
+    itemWidth: 6,
+    itemGap: 20,
+    textStyle: {
+      color: '#556677',
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
         show: true,
-        icon: "circle",
+        backgroundColor: '#fff',
-        top: "13%",
+        color: '#556677',
-        itemWidth: 6,
+        borderColor: 'rgba(0,0,0,0)',
-        itemHeight: 6,
+        shadowColor: 'rgba(0,0,0,0)',
-        itemGap: 25,
+        shadowOffsetY: 0,
       },
-      tooltip: {
+      lineStyle: {
-        trigger: "axis",
+        width: 0,
       },
-      xAxis: [
+    },
-        {
+    backgroundColor: '#fff',
-          type: "category",
+    textStyle: {
-          data: ["A", "B", "C", "D", "E", "F", "G"],
+      color: '#5c6c7c',
-          axisLine: {
+    },
-            lineStyle: {
+    padding: [10, 10],
-              color: "#ddd",
+    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5); text-align: left;',
-            },
+    formatter: function (params) {
-          },
+      let result = params[0].name + '<br>'; // x轴值（如"1月"）
-          axisTick: {
+      params.forEach((param) => {
-            show: false,
+        // 获取系列颜色（param.color）
-          },
+        const colorDot = `<span style="
-          axisLabel: {
+          display:inline-block;
-            interval: 0,
+          margin-right:5px;
-            textStyle: {
+          border-radius:50%;
-              color: "#c56790",
+          width:10px;
-            },
+          height:10px;
-            margin: 15,
+          background-color:${param.color}">
-          },
+        </span>`;
-          boundaryGap: false,
+        result += `${colorDot} ${param.seriesName}: ${param.value}${param.seriesName === '茎秆高度' ? 'cm' : param.seriesName === '叶片温度' ? '℃' : 'mm'} <br>`;
+      });
+      return result;
+    },
+  },
+  grid: {
+    top: '20%',
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: xData,
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
         },
-      ],
+      },
-      yAxis: [
+      axisTick: {
-        {
+        show: false,
-          type: "value",
+      },
-          axisTick: {
+      axisLabel: {
-            show: false,
+        interval: 0,
-          },
+        textStyle: {
-          axisLine: {
+          color: '#999',
-            lineStyle: {
-              color: "#ddd",
-            },
-          },
-          axisLabel: {
-            textStyle: {
-              color: "#c56790",
-            },
-          },
-          splitLine: {
-            show: false,
-          },
         },
-      ],
+        margin: 15,
-      series: [
+      },
-        {
+      axisPointer: {
-          name: "S",
+        label: {
-          type: "line",
+          padding: [11, 5, 7],
-          data: [13, 10, 3, 12, 15, 30, 7],
+          backgroundColor: {
-          symbolSize: 6,
+            type: 'linear',
-          symbol: "circle",
+            x: 0,
-          smooth: true,
+            y: 0,
-          lineStyle: {
+            x2: 0,
-            color: "#fe9a8b",
+            y2: 1,
-          },
+            colorStops: [
-          itemStyle: {
-            normal: {
-              color: "#fe9a8b",
-              borderColor: "#fe9a8b",
-            },
-          },
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
-                color: "#fe9a8bb3",
+                color: '#fff',
+              },
+              {
+                offset: 0.9,
+                color: '#fff',
+              },
+              {
+                offset: 0.9,
+                color: '#33c0cd',
               },
               {
                 offset: 1,
-                color: "#fe9a8b03",
+                color: '#33c0cd',
               },
-            ]),
+            ],
-          },
+            global: false,
-          emphasis: {
-            itemStyle: {
-              color: {
-                type: "radial",
-                x: 0.5,
-                y: 0.5,
-                r: 0.5,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#fe9a8b",
-                  },
-                  {
-                    offset: 0.4,
-                    color: "#fe9a8b",
-                  },
-                  {
-                    offset: 0.5,
-                    color: "#fff",
-                  },
-                  {
-                    offset: 0.7,
-                    color: "#fff",
-                  },
-                  {
-                    offset: 0.8,
-                    color: "#fff",
-                  },
-                  {
-                    offset: 1,
-                    color: "#fff",
-                  },
-                ],
-              },
-              borderColor: "#fe9a8b",
-              borderWidth: 2,
-            },
           },
         },
-        {
+      },
-          name: "M",
+      boundaryGap: false,
-          type: "line",
+    },
-          data: [5, 12, 11, 4, 25, 16, 1],
+  ],
-          symbolSize: 6,
+  yAxis: [
-          symbol: "circle",
+    {
-          smooth: true,
+      type: 'value',
-          lineStyle: {
+      show: false,
-            color: "#9E87FF",
+      axisTick: {
-          },
+        show: false,
-          itemStyle: {
+      },
-            normal: {
+      axisLine: {
-              color: "#9E87FF",
+        show: true,
-              borderColor: "#9E87FF",
+        lineStyle: {
-            },
+          color: 'rgba(107,107,107,0.37)',
-          },
-          areaStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: "#9E87FFb3",
-              },
-              {
-                offset: 1,
-                color: "#9E87FF03",
-              },
-            ]),
-          },
-          emphasis: {
-            itemStyle: {
-              color: {
-                type: "radial",
-                x: 0.5,
-                y: 0.5,
-                r: 0.5,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: "#9E87FF",
-                  },
-                  {
-                    offset: 0.4,
-                    color: "#9E87FF",
-                  },
-                  {
-                    offset: 0.5,
-                    color: "#fff",
-                  },
-                  {
-                    offset: 0.7,
-                    color: "#fff",
-                  },
-                  {
-                    offset: 0.8,
-                    color: "#fff",
-                  },
-                  {
-                    offset: 1,
-                    color: "#fff",
-                  },
-                ],
-              },
-              borderColor: "#9E87FF",
-              borderWidth: 2,
-            },
-          },
         },
-      ],
+      },
-    };
+      axisLabel: {
-    myChart.setOption(option);
+        textStyle: {
+          color: '#999',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    {
+      type: 'value',
+      show: false,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    {
+      type: 'value',
+      show: false,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+    {
+      type: 'value',
+      show: false,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: '销售总额',
+      type: 'line',
+      data: [514.14, 468.18, 988.35, 1204.84, 954.16, 651.24, ],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 0,
+      showSymbol: false,
+      lineStyle: {
+        width: 3,
+        color: '#25BF82',
+        shadowColor: 'rgba(158,135,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[0],
+        borderColor: colorList[0],
+      },
+    },
+    {
+      name: '订单总数',
+      type: 'line',
+      data: [4, 18, 29, 33, 18, 10, 28],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 1,
+      showSymbol: false,
+      lineStyle: {
+        width: 5,
+        color: '#FFD500',
+        shadowColor: 'rgba(115,221,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[2],
+        borderColor: colorList[2],
+      },
+    },
+    {
+      name: '浏览量',
+      type: 'line',
+      data: [1589, 2648, 5289, 4289, 9654, 6487, 5968],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 2,
+      showSymbol: false,
+      lineStyle: {
+        width: 5,
+        color: '#3685FE',
+        shadowColor: 'rgba(115,221,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[2],
+        borderColor: colorList[2],
+      },
+    },
+    {
+      name: '成功退款金额',
+      type: 'line',
+      data: [62.44, 14.15, 17.48, 25.18, 21.91, 10.02, 2.25],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 3,
+      showSymbol: false,
+      lineStyle: {
+        width: 5,
+        color: '#3685FE',
+        shadowColor: 'rgba(115,221,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[2],
+        borderColor: colorList[2],
+      },
+    },
+  ],
+};
+
+const initChart = () => {
+  if (chartRef.value) {
+    // 基于准备好的dom，初始化echarts实例
+    chartInstance = echarts.init(chartRef.value);
+    // 绘制图表
+    chartInstance.setOption(option);
+    // 自动显示最大值点的tooltip
+    // showMaxValueTooltip();
+    // 响应式调整
+    window.addEventListener('resize', resizeChart);
   }
+};
+// 组件卸载前销毁图表
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    window.removeEventListener('resize', resizeChart);
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+});
+// 调整图表大小
+const resizeChart = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+onMounted(() => {
+  initChart();
 });
 </script>
 <style lang="scss" scoped>
@@ -348,7 +466,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   margin-right: 50px;
-  font-size: 20px;
+  font-size: 18px;
   color: #999999;
 }
 .title-image {
@@ -359,7 +477,7 @@ onMounted(() => {
 .number {
   margin-right: 100px;
   margin-top: 20px;
-  font-size: 25px;
+  font-size: 18px;
   font-weight: bold;
   color: #000000;
 }