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

<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>