src/views/trade/dataBoard.vue

@@ -9,23 +9,23 @@
               <div class="title">
                 <img
                   class="title-image"
-                  src="../../assets/images/money.png"
+                  src="../../assets/images/profile.jpg"
                   alt=""
                 />
-                <div>销售总额(元)</div>
+                <div>销售总额</div>
               </div>
-              <div class="number">4,541.00</div>
+              <div class="number">12313</div>
             </div>
             <div>
               <div class="title">
                 <img
                   class="title-image"
-                  src="../../assets/images/order.png"
+                  src="../../assets/images/profile.jpg"
                   alt=""
                 />
-                <div>订单总数(单)</div>
+                <div>订单总数</div>
               </div>
-              <div class="number">45</div>
+              <div class="number">55</div>
             </div>
           </div>
           <div class="app-container-data-left-bottom">
@@ -33,28 +33,28 @@
               <div class="title">
                 <img
                   class="title-image"
-                  src="../../assets/images/views.png"
+                  src="../../assets/images/profile.jpg"
                   alt=""
                 />
-                <div>浏览量(次)</div>
+                <div>浏览量</div>
               </div>
-              <div class="number">61,151</div>
+              <div class="number">13415</div>
             </div>
             <div>
               <div class="title">
                 <img
                   class="title-image"
-                  src="../../assets/images/money1.png"
+                  src="../../assets/images/profile.jpg"
                   alt=""
                 />
-                <div>成功退款金额(元)</div>
+                <div>成功退款金额</div>
               </div>
-              <div class="number">541.00</div>
+              <div class="number">1565465</div>
             </div>
           </div>
         </div>
         <div class="app-container-data-right">
-          <div ref="chartRef" style="width: 100%; height: 200px"></div>
+          <div ref="chartRef" style="width: 600px; height: 400px"></div>
         </div>
       </div>
     </div>
@@ -131,333 +131,215 @@
 <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(() => {
-const option = {
+  if (chartRef.value) {
-  backgroundColor: '#fff',
+    const myChart = echarts.init(chartRef.value);
-  title: {
+    const option = {
-    text: '',
+      backgroundColor: "#fff",
-    textStyle: {
+      title: {
-      fontSize: 12,
+        text: "渐变折线图",
-      fontWeight: 400,
+        left: "12%",
-    },
+        top: "13%",
-    left: 'center',
-    top: '5%',
-  },
-  legend: {
-    icon: 'circle',
-    top: '0',
-    right: '5%',
-    itemWidth: 6,
-    itemGap: 20,
-    textStyle: {
-      color: '#556677',
-    },
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      label: {
-        show: true,
-        backgroundColor: '#fff',
-        color: '#556677',
-        borderColor: 'rgba(0,0,0,0)',
-        shadowColor: 'rgba(0,0,0,0)',
-        shadowOffsetY: 0,
-      },
-      lineStyle: {
-        width: 0,
-      },
-    },
-    backgroundColor: '#fff',
-    textStyle: {
-      color: '#5c6c7c',
-    },
-    padding: [10, 10],
-    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月"）
-      params.forEach((param) => {
-        // 获取系列颜色（param.color）
-        const colorDot = `<span style="
-          display:inline-block;
-          margin-right:5px;
-          border-radius:50%;
-          width:10px;
-          height:10px;
-          background-color:${param.color}">
-        </span>`;
-        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)',
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        interval: 0,
         textStyle: {
-          color: '#999',
+          color: "#999",
+          fontSize: 14,
         },
-        margin: 15,
       },
-      axisPointer: {
+      legend: {
-        label: {
+        show: true,
-          padding: [11, 5, 7],
+        icon: "circle",
-          backgroundColor: {
+        top: "13%",
-            type: 'linear',
+        itemWidth: 6,
-            x: 0,
+        itemHeight: 6,
-            y: 0,
+        itemGap: 25,
-            x2: 0,
+      },
-            y2: 1,
+      tooltip: {
-            colorStops: [
+        trigger: "axis",
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: ["A", "B", "C", "D", "E", "F", "G"],
+          axisLine: {
+            lineStyle: {
+              color: "#ddd",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: "#c56790",
+            },
+            margin: 15,
+          },
+          boundaryGap: false,
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#ddd",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#c56790",
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "S",
+          type: "line",
+          data: [13, 10, 3, 12, 15, 30, 7],
+          symbolSize: 6,
+          symbol: "circle",
+          smooth: true,
+          lineStyle: {
+            color: "#fe9a8b",
+          },
+          itemStyle: {
+            normal: {
+              color: "#fe9a8b",
+              borderColor: "#fe9a8b",
+            },
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
-                color: '#fff',
+                color: "#fe9a8bb3",
-              },
-              {
-                offset: 0.9,
-                color: '#fff',
-              },
-              {
-                offset: 0.9,
-                color: '#33c0cd',
               },
               {
                 offset: 1,
-                color: '#33c0cd',
+                color: "#fe9a8b03",
               },
-            ],
+            ]),
-            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,
+            },
           },
         },
-      },
+        {
-      boundaryGap: false,
+          name: "M",
-    },
+          type: "line",
-  ],
+          data: [5, 12, 11, 4, 25, 16, 1],
-  yAxis: [
+          symbolSize: 6,
-    {
+          symbol: "circle",
-      type: 'value',
+          smooth: true,
-      show: false,
+          lineStyle: {
-      axisTick: {
+            color: "#9E87FF",
-        show: false,
+          },
-      },
+          itemStyle: {
-      axisLine: {
+            normal: {
-        show: true,
+              color: "#9E87FF",
-        lineStyle: {
+              borderColor: "#9E87FF",
-          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: {
+    };
-        textStyle: {
+    myChart.setOption(option);
-          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>
@@ -466,7 +348,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   margin-right: 50px;
-  font-size: 18px;
+  font-size: 20px;
   color: #999999;
 }
 .title-image {
@@ -477,7 +359,7 @@ onMounted(() => {
 .number {
   margin-right: 100px;
   margin-top: 20px;
-  font-size: 18px;
+  font-size: 25px;
   font-weight: bold;
   color: #000000;
 }