ldar/ui/src/views/statistics/plantCountChart.vue

<template>
  <div id="plantCountChart" :style="{height:height,width:width}"/>
</template>

<script>

import resize from "@/views/dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: {
    statistics: {
      type: Array,
      default() {
        return [];
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '490px'
    },
  },
  data() {
    return {
      chart: null,
      option: {
        title: {
          text: '按装置统计',
          textStyle: {color: '#666', fontSize: 14, fontWeight: 'normal'},
          padding: [5, 5, 5, 5],
        },
        legend: {
          orient: 'horizontal',
          top: 0,
          itemWidth: 30,
          itemHeight: 12,
          data: ['严重泄漏', '一般泄露', '未泄露']
        },
        grid: {left: 10, top: 50, bottom: 20, right: 20, containLabel: true},
        xAxis: {
          type: 'value',
          axisLine: {show: true, lineStyle: {color: '#ccc'}},
          axisLabel: {color: '#999'},
          splitLine: {lineStyle: {color: ['#CEEDFF'], type: [5, 8], dashOffset: 3}},
        },
        yAxis: {
          type: 'category',
          data: [],
          axisLine: {lineStyle: {color: '#ccc'}},
          axisTick: {length: 3},
          axisLabel: {color: '#999'},
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'shadow'},
          textStyle: {color: '#424242'},
          renderMode: 'html',
          className: 'tooltip',
          order: 'seriesDesc',
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '严重泄漏',
            type: 'bar',
            stack: 'total', // ! 多条数据总计 => 堆叠
            barWidth: 30,
            color: '#f5804d',
            itemStyle: {borderRadius: [5, 5, 5, 5]},
            data: [],
          },
          {
            name: '一般泄露',
            type: 'bar',
            stack: 'total', // ! 多条数据总计 => 堆叠
            barWidth: 30,
            color: '#FFC53D',
            itemStyle: {borderRadius: [5, 5, 5, 5]},
            data: [],
          },
          {
            name: '未泄露',
            type: 'bar',
            stack: 'total', // ! 多条数据总计 => 堆叠
            barWidth: 30,
            color: '#8bd46e',
            itemStyle: {borderRadius: [5, 5, 5, 5]},
            data: [],
          },
        ],
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    })
  },
  watch: {
    statistics: {
      deep: true,
      immediate: true, // 监听到后，立即执行 handler方法
      handler: function (newVal, oldVal) {
        this.statisticsList = newVal
        this.option.series[0].data=[];
        this.option.series[1].data=[];
        this.option.series[2].data=[];
        this.option.yAxis.data=[];
        this.statisticsList.forEach(item => {
          if (item.plantName != '合计') {
            this.option.series[0].data.push(item.yzxlCount);
            this.option.series[1].data.push(item.ybxlCount);
            this.option.series[2].data.push(item.wxlCount);
            this.option.yAxis.data.push(item.plantName);
          }
        })
        this.initChart();
      },
    }
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('plantCountChart'))
      this.chart.setOption(this.option)
    }
  }

}
</script>

<style scoped>

</style>