admin-fiveFollowing/src/views/powerQuality/harmonicReport/curveComB.vue

<template>
  <div shadow="never" class="homeBoxCard" v-loading="loading">
    <div style="text-align: center;font-weight:bold">B相电流（A）</div>
    <div class="height300" id="curveComB" ref="curveComB" />
  </div>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import * as echarts from 'echarts'
import { useStore } from 'vuex'
import { ElMessage, ElNotification } from 'element-plus'
import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const store = useStore()
const props = defineProps({
  curveComList: Object,
}) //数据双向绑定
/*----------------------------------变量声明-----------------------------------*/
// 读取数据 func
const loading = ref(true)

onMounted(() => {
  loading.value = false;
  let myChart = echarts.init(document.getElementById('curveComB'))
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      show: false,
      data: ['平均值', '95%', '最大值'],
      // align: 'right',
      right: 60,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 35,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '1次',
          '3次',
          '5次',
          '7次',
          '9次',
          '11次',
          '13次',
          '15次',
          '17次',
          '19次 ',
        ],
        axisLine: {
          show: true,
          lineStyle: {
            color: '#444',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: '#444',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: 'A',
        nameTextStyle: {
          color: '#444',
        },
        axisLabel: {
          formatter: '{value} ',
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#444',
            width: 1,
            type: 'solid',
          },
        },
        splitLine: {
          lineStyle: {
            color: '#444',
          },
        },
      },
    ],
    series: [
      {
        name: '平均值',
        type: 'bar',
        data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
        barWidth: 10, //柱子宽度
        barGap: '1', //柱子之间间距
        itemStyle: {
          normal: {
            color: '#5b82ee',
            opacity: 1,
          },
        },
      },
      {
        name: '95%',
        type: 'bar',
        data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
        barWidth: 10,
        barGap: '1',
        itemStyle: {
          normal: {
            color: '#f2e251',
            opacity: 1,
          },
        },
      },
      {
        name: '最大值',
        type: 'bar',
        data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
        barWidth: 10,
        barGap: '1',
        itemStyle: {
          normal: {
            color: '#fe8161',
            opacity: 1,
          },
        },
      },
    ],
  })
  window.onresize = function () {
    // 自适应大小
    myChart.resize()
  }
})
</script>
<style lang="scss" scoped>
.homeBoxCard {
  margin-bottom: 24px;

  ::v-deep(.el-card__header) {
    padding-left: 12px;
    padding-right: 12px;
  }

  ::v-deep(.el-card__body) {
    padding: 12px;
    font-size: 14px;
    line-height: 1.5715;
  }

  ::v-deep(.el-divider) {
    margin: 8px 0;
  }

  .num {
    font-size: 30px;
    color: #515a6e;
  }

  .height300 {
    height: 300px;
  }
}
</style>