情绪指标数据完成

src/components/charts/ContinuousLine.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <div ref="ContinuousLine" 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 chgContent = toRef(props, 'chgContent')
+
+const ContinuousLine = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
+
+watch(chgContent, (newValue) => {
+  console.log('watch 已触发', newValue)
+  init()
+})
+
+const init = () => {
+  const dateStr = chgContent.value.map(x => x.dateStr)
+  // 最高空间板
+  const maxLimitUpDay = chgContent.value.map(x => x.maxLimitUpDay)
+  // 首板数量
+  const firstLimitUpCount = chgContent.value.map(x => x.firstLimitUpCount)
+  // 二板数量
+  const secondLimitUpCount = chgContent.value.map(x => x.secondLimitUpCount)
+  // 三板数量
+  const thirdLimitUpCount = chgContent.value.map(x => x.thirdLimitUpCount)
+  const myChart = echarts.init(ContinuousLine.value)
+  // 指定图表的配置项和数据
+  const option = {
+    title: {
+      text: '连板晋级情绪',
+      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,
+        data: dateStr
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: [
+      {
+        name: '最高空间板',
+        type: 'line',
+        smooth: true,
+        lineStyle: {
+          width: 1.5
+        },
+        data: maxLimitUpDay
+      },
+      {
+        name: '首板数量',
+        type: 'line',
+        smooth: true,
+        // yAxisIndex: 1,
+        lineStyle: {
+          width: 1
+        },
+        data: firstLimitUpCount
+      },
+      {
+        name: '二板数量',
+        type: 'line',
+        smooth: true,
+        // yAxisIndex: 1,
+        lineStyle: {
+          width: 1
+        },
+        data: secondLimitUpCount
+      },
+      {
+        name: '三板数量',
+        type: 'line',
+        smooth: true,
+        // yAxisIndex: 1,
+        lineStyle: {
+          width: 1
+        },
+        data: thirdLimitUpCount
+      }
+    ]
+  }
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/charts/NewsChg.vue

@@ -44,7 +44,8 @@ const init = (data) => {
   // 指定图表的配置项和数据
   const option = {
     title: {
-      text: '中国A股市场情绪指数'
+      text: '中国A股市场情绪指数',
+      left: 'center'
     },
     xAxis: {
       type: 'category',

src/components/charts/UpLow.vue

@@ -30,13 +30,13 @@ const UpLow = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
 
 watch(chgContent, (newValue) => {
   console.log('watch 已触发', newValue)
-  init(chgContent.value)
+  init()
 })
 
-const init = (chgContent) => {
+const init = () => {
-  const dateStr = chgContent.map(x => x.dateStr)
+  const dateStr = chgContent.value.map(x => x.dateStr)
-  const upCount = chgFlag ? chgContent.map(x => x.upCount) : chgContent.map(x => x.limitUpCount)
+  const upCount = chgFlag ? chgContent.value.map(x => x.upCount) : chgContent.value.map(x => x.limitUpCount)
-  const lowCount = chgFlag ? chgContent.map(x => x.lowCount) : chgContent.map(x => x.limitLowCount)
+  const lowCount = chgFlag ? chgContent.value.map(x => x.lowCount) : chgContent.value.map(x => x.limitLowCount)
   const myChart = echarts.init(UpLow.value)
   // 指定图表的配置项和数据
   const option = {

src/components/charts/UpLowLine.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <div ref="UpLowLine" 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 chgContent = toRef(props, 'chgContent')
+
+const UpLowLine = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
+
+watch(chgContent, (newValue) => {
+  console.log('watch 已触发', newValue)
+  init()
+})
+
+const init = () => {
+  const dateStr = chgContent.value.map(x => x.dateStr)
+  // 最高空间板
+  const maxLimitUpDay = chgContent.value.map(x => x.maxLimitUpDay)
+  // 炸板数量
+  const brokenSlabCount = chgContent.value.map(x => x.brokenSlabCount)
+  // 连板总数
+  const continuous = chgContent.value.map(x => x.continuous)
+  const myChart = echarts.init(UpLowLine.value)
+  // 指定图表的配置项和数据
+  const option = {
+    title: {
+      text: '空间板、炸板、连板',
+      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'
+      }
+    ],
+    series: [
+      {
+        name: '最高空间板',
+        type: 'line',
+        smooth: true,
+        lineStyle: {
+          width: 1.5
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: maxLimitUpDay
+      },
+      {
+        name: '炸板数量',
+        type: 'line',
+        smooth: true,
+        // yAxisIndex: 1,
+        lineStyle: {
+          width: 1
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: brokenSlabCount
+      },
+      {
+        name: '连板总数',
+        type: 'line',
+        smooth: true,
+        // yAxisIndex: 1,
+        lineStyle: {
+          width: 1
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: continuous
+      }
+    ]
+  }
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(option)
+}
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/stock/chg/Index.vue

@@ -5,6 +5,8 @@
       <UpLow :chg-content="chgContent" :chart-type="uplow" style="flex: 1" />
       <UpLow :chg-content="chgContent" :chart-type="uplowlimit" style="flex: 1" />
     </div>
+    <UpLowLine :chg-content="chgContent" :chart-type="uplowlimit" style="flex: 1" />
+    <ContinuousLine :chg-content="chgContent" :chart-type="uplowlimit" style="flex: 1" />
   </div>
 </template>
 
@@ -13,6 +15,8 @@ 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'
+import UpLowLine from '@/components/charts/UpLowLine.vue'
+import ContinuousLine from '@/components/charts/ContinuousLine.vue'
 
 const chgContent = ref([])
 const uplow = ref('uplow')