web-prod2/src/views/dashboard-screen/screen/ScreenSyjhbydxqk.vue

<template>
  <div class="common-wrap">
    <div class="chart">
      <v-chart :option="option" autoresize/>

    </div>
  </div>
</template>
<script>
import {chartSyjhbydxqk} from '@/api/dashboard-json'

export default {
  name: 'ScreenSyjhbydxqk',
  data() {
    return {
      option: {}
    }
  },
  created() {
    this.getOption()
  },
  methods: {
    async getOption() {
      const arrMap = {
        '计划': [],
        '完成': []
      }
      const res = await chartSyjhbydxqk()
      if (res?.code === 200) {
        arrMap['计划'] = [
          res.info.series[0].data[0],
          res.info.series[2].data[0],
          res.info.series[4].data[0],
          res.info.series[6].data[0]
        ]
        arrMap['完成'] = [
          res.info.series[1].data[0],
          res.info.series[3].data[0],
          res.info.series[5].data[0],
          res.info.series[7].data[0]
        ]
      }
      this.option = {
        title: {},
        color: ['rgb(86, 202, 149)', 'rgb(96, 150, 230)'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['计划', '完成'],
          position: 'top',
          textStyle: {
            color: '#ffffff',
            fontSize: this.EchartfontSize(18)
          }

        },
        toolbox: {
          show: true
        },
        calculable: true,
        xAxis: {
          type: 'category',
          // prettier-ignore
          data: ['开关分合本月', '开关分合本周', '单体本月', '单体本周'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',
              fontSize: this.EchartfontSize(18)
            }
          }

        },
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '计划',
            type: 'bar',
            data: arrMap['计划']

          },
          {
            name: '完成',
            type: 'bar',
            data: arrMap['完成']

          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.common-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .chart {
    width: 90%;
    height: 90%;
  }
}

</style>