hyyfClient/src/views/Env/chart/ChartStarkBar.vue

<template>
  <div :id="'chart-stark-bar-'+ id" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "ChartStarkBar",
  props: {
    id: {
      type: String,
      default: () => '0'
    },
    starkList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    starkList: {
      handler(newVal) {
        if(newVal) {
          this.myChart.clear();
          this.init()
        }
      },
      deep: true
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      var time = [];
      var data1 = [];
      var data2 = [];
      var data3 = []
      this.starkList.forEach(item => {
        time.push(item.screateTime);
        data1.push(item.onevalue)
        data2.push(item.twovalue)
        data3.push(item.threevalue)
      })
      var option = {
        legend: {
          data: ['1号楼', '2号楼', '3号楼']
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: [
          {
            type: 'category',
            data: time,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '用料统计情况',
            axisLabel: {
              formatter: '{value} 吨'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
          }
        ],
        series: [
          {
            name: '1号楼',
            data: data1,
            type: 'bar',
            itemStyle : {
              color: this.color,
              borderColor: this.color,
              normal: {
                label : {
                  show: true,
                  textStyle: {
                    fontSize: 14
                  }
                }
              }
            },
          },
          {
            name: '2号楼',
            data: data2,
            type: 'bar',
            itemStyle : {
              color: this.color,
              borderColor: this.color,
              normal: {
                label : {
                  show: true,
                  textStyle: {
                    fontSize: 14
                  }
                }
              }
            },
          },
          {
            name: '3号楼',
            data: data3,
            type: 'bar',
            itemStyle : {
              color: this.color,
              borderColor: this.color,
              normal: {
                label : {
                  show: true,
                  textStyle: {
                    fontSize: 14
                  }
                }
              }
            },
          }
        ]
      };
      this.myChart.setOption(option)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chart-stark-bar-' + this.id));
    this.init()
  }
}
</script>

<style scoped>

</style>