admin-fiveFollowing/src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/loopLineChart.vue

<template>
  <div shadow="never" class="homeBoxCard" v-loading="loading">
    <div class="height400" ref="lineChartBanlance" />
  </div>
</template>
<script>
import { defineComponent, onMounted, ref, watch } from 'vue'
// import { useStore } from 'vuex'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'LoopLineChart',
  props: {
    num: Number,
    unit:String
  },
  setup(props) {
    // const store = useStore()
    const lineChartBanlance = ref(null)

    // 读取数据 func
    const loading = ref(true)
    const getData = async () => {
      loading.value = false
    }
    function echarts2() {
      let myChart = echarts.init(lineChartBanlance.value)
      // 绘制图表
      myChart.setOption({
        // backgroundColor: "pink",
        color: ['#f2e251', '#40ABFE', '#fe8161'],

        legend: {
          icon: 'rect',
          // bottom: "0",
          right: 40,
          data: ['A', 'B', 'C'],
        },
        // toolbox: {
        //   show: false,
        // },
        tooltip: {
          // trigger: 'axis',
          // axisPointer: { type: 'cross' },

          trigger: 'axis',
          formatter: function (params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                '<br/>' + params[i].seriesName + ' : ' + params[i].value + props.unit
            }
            return relVal
          },
        },
        grid: {
          left: '20',
          right: '40',
          top: '40',
          bottom: '20',
          containLabel: true,
        },
        xAxis: {
          axisLabel: {
            color: '#444',
            fontSize: 14,
          },
          /*改变xy轴颜色*/
          axisLine: {
            lineStyle: {
              color: '#444',
              width: 1, //这里是为了突出显示加上的
            },
          },
          boundaryGap: false,
          data:
            props.num == 0
              ? [
                  '总谐波',
                  '3次谐波',
                  '5次谐波',
                  '7次谐波',
                  '9次谐波',
                  '11次谐波',
                  '13次谐波',
                  '15次谐波',
                  '17次谐波',
                  '19次谐波',
                  '21次谐波',
                  '23次谐波',
                  '25次谐波',
                  '27次谐波',
                  '29次谐波',
                  '31次谐波',
                ]
              : [
                  '2总谐波',
                  '4次谐波',
                  '6次谐波',
                  '8次谐波',
                  '10次谐波',
                  '12次谐波',
                  '14次谐波',
                  '16次谐波',
                  '18次谐波',
                  '20次谐波',
                  '22次谐波',
                  '24次谐波',
                  '26次谐波',
                  '28次谐波',
                  '30次谐波',
                ],
        },
        yAxis: {
          // name: "A",
          nameTextStyle: {
            color: '#707070',
            fontSize: 14,
          },
          axisLabel: {
            color: '#444',
            fontSize: 14,
          },

          axisLine: {
            symbolOffset: [0, 4],
            lineStyle: { color: '#444' },
          },
          splitArea: {
            show: false,
          },
        },

        series: [
          {
            name: 'A',
            type: 'line',
            symbolSize: 7,
            smooth: false,
            data: [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
              0, 0, 0, 0, 0, 0,
            ],
          },
          {
            name: 'B',
            type: 'line',
            symbolSize: 7,
            smooth: false,
            data: [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
              0, 0, 0, 0, 0, 0,
            ],
          },
          {
            name: 'C',
            type: 'line',
            symbolSize: 7,
            smooth: false,
            data: [
              0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
              0, 0, 0, 0, 0, 0,
            ],
          },
        ],
      })
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }

    const writeValue = (val) => {
      val
      getData()
      echarts2()
    }

    //监听变化
    watch(
      () => props.num,
      (newVal, oldVal, clear) => {
        // 执行异步任务，并得到关闭异步任务的 id
        newVal
        let id = writeValue(newVal, oldVal)
        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
        clear(() => clearTimeout(id))
      },
      { lazy: true }
    )

    onMounted(() => {
      getData()
      echarts2()
    })

    return {
      lineChartBanlance,
      loading,
      echarts2,
    }
  },
})
</script>
<style lang="scss" scoped>
.homeBoxCard {
  height: 100%;
  margin-bottom: 24px;
  .height400 {
    height: 80%;
  }
}
</style>