:ghost: 首页增加日K线图

src/service/home/index.js

@@ -15,6 +15,11 @@ export function getListStockInfoForMonth() {
     return axios.get(`/index/listStockInfoForMonth`);
 }
 
+// 获取日/周统计股票价格曲线图
+export function getListStockInfoForDay() {
+    return axios.get(`/index/listStockInfoForDay`);
+}
+
 // 获取公告
 export function getPageNotice(params) {
     return axios.get(`/notificationInfo/pageNotificationInfo`, { params });

src/views/home/HomeIndex.vue

@@ -26,9 +26,16 @@
         </div>
       </div>
 
-      <div class="c-text-c c-text-18" style="color: #39a6fe;font-weight: bold ;">
-        月K线图
+      <div style="width: 30%; margin: 0 auto;">
+        <van-tabs v-model:active="active" type="card" swipeable @click-tab="onClickTab" color="#39a6fe">
+          <van-tab title="日K"></van-tab>
+          <van-tab title="月K"></van-tab>
+        </van-tabs>
       </div>
+
+      <!-- <div class="c-text-c c-text-18" style="color: #39a6fe;font-weight: bold ;">
+        月K线图
+      </div> -->
       <!-- ECharts -->
       <!-- <div v-if="!noData(salesVolume, salesNumber)"> -->
       <div v-if="!noData(stockPrice)">
@@ -115,6 +122,7 @@ import sHeader from "@/components/SimpleHeader";
 import { getLoginUser, styleUrl } from "@/common/js/utils";
 import {
   getListStockInfoForMonth,
+  getListStockInfoForDay,
   // Api_getNotice,
   getPageNotice,
   // Api_getUpdateNotice,
@@ -193,8 +201,120 @@ watermarkVal.value = user.phone + "\n" + formattedDate;
 const chartBox = ref();
 let chartObj = null;
 
+const showDay = ref(true);
+
+const onClickTab = ({ title }) => {
+  if (title === '日K') {
+    showDay.value = true
+    getListStockInfoForDayFunc()
+  } else {
+    showDay.value = false
+    getListStockInfoForMonthFun()
+  }
+};
+
+const getListStockInfoFunc = () => {
+  if (showDay.value) {
+    getListStockInfoForDayFunc()
+  } else {
+    getListStockInfoForMonthFun()
+  }
+}
+
 const stockPrice = ref(0);
-// 查询图表
+
+// 查询图表-日K
+const getListStockInfoForDayFunc = async () => {
+  const { data } = await getListStockInfoForDay();
+  if (data.code === '00000' && data.data) {
+    stockPrice.value = 0;
+    data.data.series[0].data.forEach((item) => {
+      stockPrice.value = parseInt(stockPrice.value + item);
+    });
+
+    // 解决eacharts与v-if的渲染问题
+    await nextTick();
+    if (chartBox.value) {
+      chartObj = window.echarts.init(chartBox.value, null, {
+        renderer: "canvas",
+        useDirtyRect: false,
+      });
+      const option = {
+        tooltip: { // 提示框
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: { // 图例
+          bottom: 0,
+          right: 10,
+          itemWidth: 10,
+          itemHeight: 10,
+          icon: "roundRect",
+          orient: 'vertical', // 图例列表布局，vertical 垂直，horizontal 水平，当前只有一个无所谓
+          top: 5,
+        },
+        grid: { // 网格
+          top: "12%",
+          left: "3%",
+          right: "5%",
+          bottom: "7%",
+          containLabel: true, // 刻度标签
+        },
+        // 固定屏幕显示多少个，其余的滑动
+        dataZoom: [
+          {
+            type: "inside",
+            xAxisIndex: 0,
+            filterMode: "none",
+            startValue: null,
+            endValue: null,
+            zoomLock: true, // 锁定选择区域，只能平移，不能缩放。
+          },
+        ],
+        xAxis: {
+          type: "category",
+          axisLabel: {
+            rotate: 15, // 旋转角度
+          },
+          data: data.data.categories,
+        },
+        yAxis: {
+          type: "value",
+          // min: 20,
+          // max: 120,
+        },
+        series: [
+          {
+            ...data.data.series[0],
+            type: "line", // line折线图，bar柱状图
+            // smooth: true, // 针对折线图，平滑曲线
+            itemStyle: { color: "#ff5d88" },
+            colorBy: 'series',
+            name: "股价￥",
+            label: {
+              show: true,
+              position: "top",
+            },
+          },
+        ],
+      };
+
+      option.dataZoom[0]["startValue"] =
+        data.data.categories[data.data.categories.length - 5];
+      option.dataZoom[0]["endValue"] =
+        data.data.categories[data.data.categories.length - 1];
+      chartObj && chartObj.setOption(option);
+      // 图形宽度随屏幕宽度改变而改变
+      window.onresize = chartObj.resize;
+    }
+  }
+}
+
+
+
+// 查询图表-月K
 const getListStockInfoForMonthFun = async () => {
   const { data } = await getListStockInfoForMonth();
   if (data.code === '00000' && data.data) {
@@ -247,14 +367,14 @@ const getListStockInfoForMonthFun = async () => {
         xAxis: {
           type: "category",
           axisLabel: {
-            // rotate: 45, // 旋转角度
+            rotate: 15, // 旋转角度
           },
           data: data.data.categories,
         },
         yAxis: {
           type: "value",
           // min: 20,
-          max: 120,
+          // max: 120,
         },
         series: [
           {
@@ -262,7 +382,7 @@ const getListStockInfoForMonthFun = async () => {
             type: "line", // line折线图，bar柱状图
             // smooth: true, // 针对折线图，平滑曲线
             itemStyle: { color: "#ff5d88" },
-            colorBy: 'series' ,
+            colorBy: 'series',
             name: "股价￥",
             label: {
               show: true,
@@ -293,13 +413,19 @@ onMounted(async () => {
   // }
   firstLogin.value = localStorage.getItem('firstLogin');
 
+  // 获取日/周曲线
+  // getListStockInfoForDayFunc();
   // 获取月度曲线
-  getListStockInfoForMonthFun();
+  // getListStockInfoForMonthFun();
+  // 获取股票曲线
+  getListStockInfoFunc();
+
   // 获取首页公告
   getNotice();
 
   getTop5Func();
 
+
 });