From 23d0daeaefd78f16094ab56a6306be1737171e8c Mon Sep 17 00:00:00 2001
From: nelson <mail_yanpeng@163.com>
Date: Sun, 17 Apr 2022 01:10:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=A8=E8=B7=8C=E5=AE=B6=E6=95=B0=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                      |   4 +-
 src/api/stock/StockChgApi.js      |   1 +
 src/components/charts/NewsChg.vue |   8 +-
 src/components/charts/UpLow.vue   | 159 ++++++++++++++++++++++++++++++
 src/layout/Index.vue              |   2 +-
 src/views/stock/chg/Index.vue     |  30 ++++++
 vite.config.ts                    |   3 +-
 7 files changed, 200 insertions(+), 7 deletions(-)
 create mode 100644 src/components/charts/UpLow.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index 69129f1..8f14676 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,8 +15,8 @@ module.exports = {
     sourceType: 'module',
     ecmaFeatures: {
       modules: true
-    },
-    requireConfigFile: false
+    }
+    // requireConfigFile: false
   },
   plugins: [
     'vue',
diff --git a/src/api/stock/StockChgApi.js b/src/api/stock/StockChgApi.js
index 84b51a7..3a6fe0b 100644
--- a/src/api/stock/StockChgApi.js
+++ b/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 })
diff --git a/src/components/charts/NewsChg.vue b/src/components/charts/NewsChg.vue
index 1f5e604..6e8afd7 100644
--- a/src/components/charts/NewsChg.vue
+++ b/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
       }
     ]
   }
diff --git a/src/components/charts/UpLow.vue b/src/components/charts/UpLow.vue
new file mode 100644
index 0000000..09a22d3
--- /dev/null
+++ b/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>
diff --git a/src/layout/Index.vue b/src/layout/Index.vue
index fc2f3af..b2bf48a 100644
--- a/src/layout/Index.vue
+++ b/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>
 
diff --git a/src/views/stock/chg/Index.vue b/src/views/stock/chg/Index.vue
index 6a76849..253c3fc 100644
--- a/src/views/stock/chg/Index.vue
+++ b/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">
diff --git a/vite.config.ts b/vite.config.ts
index 0641a09..383d80e 100644
--- a/vite.config.ts
+++ b/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: [