stock-web/src/components/charts/UpLow.vue

<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()
})

const init = () => {
  const dateStr = chgContent.value.map(x => x.dateStr)
  const upCount = chgFlag ? chgContent.value.map(x => x.upCount) : chgContent.value.map(x => x.limitUpCount)
  const lowCount = chgFlag ? chgContent.value.map(x => x.lowCount) : chgContent.value.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>