涨跌家数对比

.eslintrc.js

@@ -15,8 +15,8 @@ module.exports = {
     sourceType: 'module',
     ecmaFeatures: {
       modules: true
-    },
+    }
-    requireConfigFile: false
+    // requireConfigFile: false
   },
   plugins: [
     'vue',

src/api/stock/StockChgApi.js

@@ -2,3 +2,4 @@ import request from '@/utils/request'
 
 // 获取审批人列表
 export const getStockChgData = params => request({ url: '/api/stock/chg', method: 'get', params: params })
+export const getStockChgRecordData = params => request({ url: '/api/stock/chg/record', method: 'get', params: params })

src/components/charts/NewsChg.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div ref="NewsChg" style="width: 100%; height: 400px" />
+    <div ref="NewsChg" style="width: 100%; height: 350px" />
     <div style="text-align: center">
       <el-radio v-model="range" label="MONTH" border @change="getData">近一月</el-radio>
       <el-radio v-model="range" label="YEAR" border @change="getData">近一年</el-radio>
@@ -69,12 +69,14 @@ const init = (data) => {
     series: [
       {
         data: marketData,
-        type: 'line'
+        type: 'line',
+        smooth: true
       },
       {
         data: maIndexData,
         yAxisIndex: 1,
-        type: 'line'
+        type: 'line',
+        smooth: true
       }
     ]
   }

src/components/charts/UpLow.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div ref="UpLow" style="width: 100%; height: 500px" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, toRef, watch } from 'vue'
+//  按需引入 echarts
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  chgContent: {
+    type: Array,
+    default () {
+      return []
+    }
+  },
+  chartType: {
+    type: String,
+    default: 'uplow'
+  }
+})
+
+const chgFlag = props.chartType === 'uplow'
+
+const chgContent = toRef(props, 'chgContent')
+
+const UpLow = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
+
+watch(chgContent, (newValue) => {
+  console.log('watch 已触发', newValue)
+  init(chgContent.value)
+})
+
+const init = (chgContent) => {
+  const dateStr = chgContent.map(x => x.dateStr)
+  const upCount = chgFlag ? chgContent.map(x => x.upCount) : chgContent.map(x => x.limitUpCount)
+  const lowCount = chgFlag ? chgContent.map(x => x.lowCount) : chgContent.map(x => x.limitLowCount)
+  const myChart = echarts.init(UpLow.value)
+  // 指定图表的配置项和数据
+  const option = {
+    title: {
+      text: chgFlag ? '涨跌家数对比' : '涨跌停家数对比',
+      left: 'center'
+    },
+    grid: {
+      bottom: 80
+    },
+    toolbox: {
+      feature: {
+        dataZoom: {
+          yAxisIndex: 'none'
+        },
+        restore: {},
+        saveAsImage: {}
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        animation: false,
+        label: {
+          backgroundColor: '#505765'
+        }
+      }
+    },
+    legend: {
+      data: ['上涨家数', '下跌家数'],
+      left: 10
+    },
+    dataZoom: [
+      {
+        show: true,
+        realtime: true,
+        start: 0,
+        end: 100
+      },
+      {
+        type: 'inside',
+        realtime: true,
+        start: 0,
+        end: 100
+      }
+    ],
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        axisLine: { onZero: false },
+        data: dateStr
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        min: 0,
+        max: chgFlag
+          ? 5200
+          : (value) => {
+            return parseInt(value.max + 20)
+          }
+      },
+      {
+        nameLocation: 'start',
+        alignTicks: true,
+        type: 'value',
+        inverse: true
+      }
+    ],
+    series: [
+      {
+        name: chgFlag ? '涨停家数' : '跌停家数',
+        type: 'line',
+        smooth: true,
+        areaStyle: {
+          color: '#ff0015',
+          opacity: 0.9
+        },
+        lineStyle: {
+          width: 1
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        // prettier-ignore
+        data: upCount
+      },
+      {
+        name: chgFlag ? '跌停家数' : '下跌家数',
+        type: 'line',
+        smooth: true,
+        yAxisIndex: 1,
+        areaStyle: {
+          color: '#13fd02',
+          opacity: 0.9
+        },
+        lineStyle: {
+          width: 1
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        // prettier-ignore
+        data: lowCount
+      }
+    ]
+  }
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/layout/Index.vue

@@ -6,7 +6,7 @@
     <el-main>
       <router-view />
     </el-main>
-    <el-footer>Footer</el-footer>
+    <!--    <el-footer>Footer</el-footer>-->
   </el-container>
 </template>
 

src/views/stock/chg/Index.vue

@@ -1,11 +1,41 @@
 <template>
   <div>
     <NewsChg />
+    <div style="display: flex">
+      <UpLow :chg-content="chgContent" :chart-type="uplow" style="flex: 1" />
+      <UpLow :chg-content="chgContent" :chart-type="uplowlimit" style="flex: 1" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getStockChgRecordData } from '@/api/stock/StockChgApi.js'
 import NewsChg from '@/components/charts/NewsChg.vue'
+import UpLow from '@/components/charts/UpLow.vue'
+
+const chgContent = ref([])
+const uplow = ref('uplow')
+const uplowlimit = ref('uplowlimit')
+
+onMounted(
+  () => {
+    getData()
+  }
+)
+const getData = () => {
+  const params = {
+    _v: new Date() * 1,
+    page: 0,
+    size: 250,
+    sort: 'id,desc'
+  }
+  getStockChgRecordData(params).then(resp => {
+    if (resp.data) {
+      chgContent.value = resp.data.content
+    }
+  })
+}
 </script>
 
 <style scoped lang="scss">

vite.config.ts

@@ -11,7 +11,8 @@ export default defineConfig({
   server: {
     host: '0.0.0.0',
     port: 3000,
-    open: true
+    open: true,
+    hmr: true
   },
   resolve: {
     alias: [