goldenPig/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);
      });
      let start = time.length - 8;
      let end = time.length - 1;
      var option = {
        legend: {
          data: ["1号楼", "2号楼", "3号楼"],
        },
        color: ["#73C0DE", "#9A60B4", "#5470C6", "#91CB74"],
        tooltip: {
          trigger: "axis",
        },
        dataZoom: [
          {
            type: "inside",
            startValue: start,
            endValue: end,
            show: false,
          },
        ],
        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,
                  position: "top",
                  textStyle: {
                    fontSize: 14,
                  },
                },
              },
            },
          },
          {
            name: "2号楼",
            data: data2,
            type: "bar",
            itemStyle: {
              color: this.color,
              borderColor: this.color,
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: 14,
                  },
                },
              },
            },
          },
          {
            name: "3号楼",
            data: data3,
            type: "bar",
            itemStyle: {
              color: this.color,
              borderColor: this.color,
              normal: {
                label: {
                  show: true,
                  position: "top",
                  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>