初始化

2025-03-28 09:30:07 +08:00
parent 1c1fa4da9e
commit bb20d0b25d
122 changed files with 38659 additions and 63 deletions
@@ -0,0 +1,149 @@
+<template>
+  <div id="linenearly" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup name="GMVnearly">
+import * as echarts from 'echarts'
+import { onMounted } from 'vue'
+
+const getEcharts = () => {
+  var chartDom = document.getElementById('linenearly')
+  var myChart = echarts.init(chartDom)
+
+  const option = {
+    tooltip: {
+      //鼠标悬停时显示对应数据
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    color: ['#87A2E8FF', '#74CCCCFF'],
+    title: {
+      text: '近一年的DAU/DNU',
+      top: '8px',
+      left: '10px',
+      bottom: '8px',
+      textStyle: {
+        color: '#191e24',
+        fontSize: '14',
+      },
+    },
+    legend: {
+      // 图例
+      data: ['DAU', 'DNU'],
+      top: 8,
+      right: 16, // 修改位置
+      icon: 'circle', //原型
+      textStyle: {
+        color: '#191e2480', //字体颜色
+      },
+    },
+    grid: {
+      // 上下左右 边距
+      top: '8%',
+      left: '3%',
+      right: '3%',
+      bottom: '8%',
+      top: '15%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: { show: false },
+        data: [
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '10月',
+          '11月',
+          '12月',
+        ],
+        axisLine: {
+          // 轴线的颜色以及宽度
+          lineStyle: {
+            color: '#A6A6A628',
+          },
+        },
+        axisLabel: {
+          // 轴文字的配置
+          show: true,
+          textStyle: {
+            color: '#191e2480',
+          },
+        },
+        splitLine: {
+          // 分割线配置
+          lineStyle: {
+            color: '#A6A6A628',
+            // type: "dashed", // 虚线
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        min: 0, // 最小值
+        // splitNumber: 3, //划分3格
+        type: 'value',
+        axisLine: {
+          // 轴线的颜色以及宽度
+          show: false,
+        },
+        axisLabel: {
+          // 轴文字的配置
+          show: true,
+          //   textStyle: {
+          //     color: "#fff",
+          //   },
+        },
+        splitLine: {
+          // 分割线配置
+          lineStyle: {
+            color: '#A6A6A628',
+            // type: "dashed",
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: 'DAU',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 230],
+      },
+      {
+        name: 'DNU',
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series',
+        },
+        data: [120, 132, 101, 134, 90, 230, 210, 134, 90, 230, 210, 290],
+      },
+    ],
+  }
+  option && myChart.setOption(option)
+  window.onresize = () => {
+    myChart.resize()
+  }
+}
+onMounted(() => {
+  setTimeout(() => {
+    getEcharts()
+  }, 1000)
+})
+</script>