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,85 +131,40 @@
 <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 myChart = echarts.init(chartRef.value);
     const option = {
-  backgroundColor: '#fff',
+      backgroundColor: "#fff",
       title: {
-    text: '',
+        text: "渐变折线图",
+        left: "12%",
+        top: "13%",
         textStyle: {
-      fontSize: 12,
+          color: "#999",
-      fontWeight: 400,
+          fontSize: 14,
         },
-    left: 'center',
-    top: '5%',
       },
       legend: {
-    icon: 'circle',
+        show: true,
-    top: '0',
+        icon: "circle",
-    right: '5%',
+        top: "13%",
         itemWidth: 6,
-    itemGap: 20,
+        itemHeight: 6,
-    textStyle: {
+        itemGap: 25,
-      color: '#556677',
-    },
       },
       tooltip: {
-    trigger: 'axis',
+        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',
+          type: "category",
-      data: xData,
+          data: ["A", "B", "C", "D", "E", "F", "G"],
           axisLine: {
             lineStyle: {
-          color: 'rgba(107,107,107,0.37)',
+              color: "#ddd",
             },
           },
           axisTick: {
@@ -218,123 +173,27 @@ const option = {
           axisLabel: {
             interval: 0,
             textStyle: {
-          color: '#999',
+              color: "#c56790",
             },
             margin: 15,
           },
-      axisPointer: {
-        label: {
-          padding: [11, 5, 7],
-          backgroundColor: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#fff',
-              },
-              {
-                offset: 0.9,
-                color: '#fff',
-              },
-              {
-                offset: 0.9,
-                color: '#33c0cd',
-              },
-              {
-                offset: 1,
-                color: '#33c0cd',
-              },
-            ],
-            global: false,
-          },
-        },
-      },
           boundaryGap: false,
         },
       ],
       yAxis: [
         {
-      type: 'value',
+          type: "value",
-      show: false,
           axisTick: {
             show: false,
           },
           axisLine: {
-        show: true,
             lineStyle: {
-          color: 'rgba(107,107,107,0.37)',
+              color: "#ddd",
             },
           },
           axisLabel: {
             textStyle: {
-          color: '#999',
+              color: "#c56790",
-        },
-      },
-      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: {
@@ -344,120 +203,143 @@ const option = {
       ],
       series: [
         {
-      name: '销售总额',
+          name: "S",
-      type: 'line',
+          type: "line",
-      data: [514.14, 468.18, 988.35, 1204.84, 954.16, 651.24, ],
+          data: [13, 10, 3, 12, 15, 30, 7],
-      symbolSize: 1,
+          symbolSize: 6,
-      symbol: 'circle',
+          symbol: "circle",
           smooth: true,
-      yAxisIndex: 0,
-      showSymbol: false,
           lineStyle: {
-        width: 3,
+            color: "#fe9a8b",
-        color: '#25BF82',
-        shadowColor: 'rgba(158,135,255, 0.3)',
-        shadowBlur: 10,
-        shadowOffsetY: 20,
           },
           itemStyle: {
-        color: colorList[0],
+            normal: {
-        borderColor: colorList[0],
+              color: "#fe9a8b",
+              borderColor: "#fe9a8b",
+            },
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "#fe9a8bb3",
+              },
+              {
+                offset: 1,
+                color: "#fe9a8b03",
+              },
+            ]),
+          },
+          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: '订单总数',
+          name: "M",
-      type: 'line',
+          type: "line",
-      data: [4, 18, 29, 33, 18, 10, 28],
+          data: [5, 12, 11, 4, 25, 16, 1],
-      symbolSize: 1,
+          symbolSize: 6,
-      symbol: 'circle',
+          symbol: "circle",
           smooth: true,
-      yAxisIndex: 1,
-      showSymbol: false,
           lineStyle: {
-        width: 5,
+            color: "#9E87FF",
-        color: '#FFD500',
-        shadowColor: 'rgba(115,221,255, 0.3)',
-        shadowBlur: 10,
-        shadowOffsetY: 20,
           },
           itemStyle: {
-        color: colorList[2],
+            normal: {
-        borderColor: colorList[2],
+              color: "#9E87FF",
+              borderColor: "#9E87FF",
             },
           },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "#9E87FFb3",
+              },
               {
-      name: '浏览量',
+                offset: 1,
-      type: 'line',
+                color: "#9E87FF03",
-      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,
               },
+            ]),
+          },
+          emphasis: {
             itemStyle: {
-        color: colorList[2],
+              color: {
-        borderColor: colorList[2],
+                type: "radial",
-      },
+                x: 0.5,
+                y: 0.5,
+                r: 0.5,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#9E87FF",
                   },
                   {
-      name: '成功退款金额',
+                    offset: 0.4,
-      type: 'line',
+                    color: "#9E87FF",
-      data: [62.44, 14.15, 17.48, 25.18, 21.91, 10.02, 2.25],
+                  },
-      symbolSize: 1,
+                  {
-      symbol: 'circle',
+                    offset: 0.5,
-      smooth: true,
+                    color: "#fff",
-      yAxisIndex: 3,
+                  },
-      showSymbol: false,
+                  {
-      lineStyle: {
+                    offset: 0.7,
-        width: 5,
+                    color: "#fff",
-        color: '#3685FE',
+                  },
-        shadowColor: 'rgba(115,221,255, 0.3)',
+                  {
-        shadowBlur: 10,
+                    offset: 0.8,
-        shadowOffsetY: 20,
+                    color: "#fff",
+                  },
+                  {
+                    offset: 1,
+                    color: "#fff",
+                  },
+                ],
+              },
+              borderColor: "#9E87FF",
+              borderWidth: 2,
             },
-      itemStyle: {
-        color: colorList[2],
-        borderColor: colorList[2],
           },
         },
       ],
     };
-
+    myChart.setOption(option);
-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;
 }