曲线

src/components/game-select/index.vue

@@ -10,6 +10,7 @@
       :fieldNames="{ title: 'name', key: 'id' }"
       allow-search
       allow-clear
+      :check-strictly="props.multiple"
       :filter-tree-node="filterTreeNode"
       :treeProps="{
         defaultExpandedKeys: [],

src/views/dashboard/components/components/st-loginChart.vue

@@ -7,63 +7,67 @@
       :body-style="{
         paddingTop: '20px',
       }"
-      title="一周数据">
+      title="一周数据"
+    >
       <sa-chart height="300px" :option="chartOptions" />
     </a-card>
   </div>
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref } from 'vue'
-import { graphic } from 'echarts'
-import welcome from '@/views/v1/api/welcome'
+import { nextTick, onMounted, ref } from "vue";
+import { graphic } from "echarts";
+import welcome from "@/views/v1/api/welcome";
 
 function graphicFactory(side) {
   return {
-    type: 'text',
-    bottom: '8',
+    type: "text",
+    bottom: "8",
     ...side,
     style: {
-      text: '',
-      textAlign: 'center',
-      fill: '#4E5969',
+      text: "",
+      textAlign: "center",
+      fill: "#4E5969",
       fontSize: 12,
     },
-  }
+  };
 }
 
-const xAxis = ref([])
-const chartsData = ref([])
-const graphicElements = ref([graphicFactory({ left: '2.6%' }), graphicFactory({ right: 0 })])
+const xAxis = ref([]);
+const chartsData = ref([]);
+const graphicElements = ref([
+  graphicFactory({ left: "2.6%" }),
+  graphicFactory({ right: 0 }),
+]);
 
-const chartOptions = ref({})
+const chartOptions = ref({});
 
 const getData = async () => {
-  const res = await welcome.chartDataApi()
-  xAxis.value = res.data.days
+  const res = await welcome.chartDataApi();
+  xAxis.value = res.data.days;
   // chartsData.value = res.data.data.login_count
 
   chartOptions.value = {
     legend: {
-      data: ['注册', '登录', '消耗', '充值'],
+      data: ["注册", "登录", "消耗", "充值"],
     },
     grid: {
-      left: '2.6%',
-      right: '0',
-      top: '10',
-      bottom: '30',
+      left: "2.6%",
+      right: "0",
+      top: "10",
+      bottom: "30",
     },
     xAxis: {
-      type: 'category',
+      type: "category",
       offset: 2,
       data: xAxis.value,
       boundaryGap: false,
       axisLabel: {
-        color: '#4E5969',
+        color: "#4E5969",
         formatter(value, idx) {
-          if (idx === 0) return ''
-          if (idx === xAxis.value.length - 1) return ''
-          return `${value}`
+          if (idx === 0) return "";
+          if (idx === xAxis.value.length - 1) return "";
+          return `${value}`;
         },
       },
       axisLine: {
@@ -75,51 +79,43 @@ const getData = async () => {
       splitLine: {
         show: true,
         interval: (idx) => {
-          if (idx === 0) return false
-          if (idx === xAxis.value.length - 1) return false
-          return true
+          if (idx === 0) return false;
+          if (idx === xAxis.value.length - 1) return false;
+          return true;
         },
         lineStyle: {
-          color: '#E5E8EF',
+          color: "#E5E8EF",
         },
       },
       axisPointer: {
         show: true,
         lineStyle: {
-          color: '#23ADFF',
+          color: "#23ADFF",
           width: 2,
         },
       },
     },
     yAxis: {
-      type: 'value',
+      type: "value",
       axisLine: {
         show: false,
       },
       axisLabel: {
         formatter(value, idx) {
-          if (idx === 0) return value
-          return `${value}`
+          if (idx === 0) return value;
+          return `${value}`;
         },
       },
       splitLine: {
         show: true,
         lineStyle: {
-          type: 'dashed',
-          color: '#E5E8EF',
+          type: "dashed",
+          color: "#E5E8EF",
         },
       },
     },
     tooltip: {
-      trigger: 'axis',
-      // formatter(params) {
-      //   return `<div class="login-chart">
-      //     <p class="tooltip-title">${params[0].axisValueLabel}</p>
-      //     <div class="content-panel"><span>登录次数</span><span class="tooltip-value">${Number(
-      //       params[0].value
-      //     ).toLocaleString()}</span></div>
-      //   </div>`
-      // },
+      trigger: "axis",
     },
 
     graphic: {
@@ -127,36 +123,40 @@ const getData = async () => {
     },
     series: [
       {
-        name: '注册',
-        type: 'line',
-        stack: '总数',
+        name: "注册",
+        type: "line",
+        stack: "总数",
         data: res.data.reg,
+        smooth: true,
       },
       {
-        name: '登录',
-        type: 'line',
-        stack: '总数',
+        name: "登录",
+        type: "line",
+        stack: "总数",
         data: res.data.login,
+        smooth: true,
       },
       {
-        name: '消耗',
-        type: 'line',
-        stack: '金额',
+        name: "消耗",
+        type: "line",
+        stack: "金额",
         data: res.data.cost,
+        smooth: true,
       },
       {
-        name: '充值',
-        type: 'line',
-        stack: '金额',
+        name: "充值",
+        type: "line",
+        stack: "金额",
         data: res.data.pay,
+        smooth: true,
       },
     ],
-  }
-}
+  };
+};
 
 onMounted(() => {
-  getData()
-})
+  getData();
+});
 </script>
 
 <style lang="less" scoped>