中国A股情绪市场指数

.eslintrc.js

@@ -23,6 +23,8 @@ module.exports = {
     '@typescript-eslint'
   ],
   rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/multi-word-component-names': 'off', // 关闭命名规则
     semi: [2, 'never'], // 禁止尾部使用分号“ ; ”
     'no-var': 'error', // 禁止使用 var

src/api/stock/StockChgApi.js

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

src/components/charts/NewsChg.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div ref="NewsChg" style="width: 100%; height: 400px" />
+    <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>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getStockChgData } from '@/api/stock/StockChgApi'
+//  按需引入 echarts
+import * as echarts from 'echarts'
+
+const range = ref('YEAR')
+
+const NewsChg = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
+onMounted(
+  () => {
+    getData()
+  }
+)
+
+const getData = () => {
+  const params = {
+    _v: new Date() * 1,
+    period: range.value
+  }
+  getStockChgData(params).then(resp => {
+    if (resp.data) {
+      init(JSON.parse(resp.data))
+    }
+  })
+}
+
+const init = (data) => {
+  const timeData = data.map(x => x.tradeDate)
+  const marketData = data.map(x => x.marketClose)
+  const maIndexData = data.map(x => x.maIndex1)
+  // 基于准备好的dom，初始化echarts实例
+  const myChart = echarts.init(NewsChg.value)
+  // 指定图表的配置项和数据
+  const option = {
+    title: {
+      text: '中国A股市场情绪指数'
+    },
+    xAxis: {
+      type: 'category',
+      data: timeData
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '沪深300指数 ',
+        showSymbol: false,
+        min: (value) => {
+          return parseInt(value.min)
+        }
+      }, {
+        type: 'value',
+        name: '市场情绪指数 '
+        // min: (value) => {
+        //   return parseInt(value.min)
+        // }
+      }
+    ],
+    series: [
+      {
+        data: marketData,
+        type: 'line'
+      },
+      {
+        data: maIndexData,
+        yAxisIndex: 1,
+        type: 'line'
+      }
+    ]
+  }
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/utils/request.js

@@ -1,18 +1,18 @@
 import axios from 'axios'
 
-const service = axios.create({
+const request = axios.create({
   baseURL: 'http://127.0.0.1:8888',
   timeout: 10000
 })
 
-service.interceptors.request.use(config => {
+request.interceptors.request.use(config => {
   return config
 })
 
-service.interceptors.response.use(response => {
+request.interceptors.response.use(response => {
   return response
 }, error => {
   return Promise.reject(error)
 })
 
-export default service
+export default request

src/views/stock/chg/Index.vue

@@ -1,44 +1,11 @@
 <template>
-  <div ref="main" style="width: 100%; height: 400px" />
+  <div>
+    <NewsChg />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-//  按需引入 echarts
-import * as echarts from 'echarts'
-const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
-onMounted(
-  () => {
-    init()
-  }
-)
-const init = () => {
-  // 基于准备好的dom，初始化echarts实例
-  const myChart = echarts.init(main.value)
-  // 指定图表的配置项和数据
-  const option = {
-    title: {
-      text: 'ECharts 入门示例'
-    },
-    tooltip: {},
-    legend: {
-      data: ['销量']
-    },
-    xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-    },
-    yAxis: {},
-    series: [
-      {
-        name: '销量',
-        type: 'bar',
-        data: [5, 20, 36, 10, 10, 20]
-      }
-    ]
-  }
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(option)
-}
+import NewsChg from '@/components/charts/NewsChg.vue'
 </script>
 
 <style scoped lang="scss">