ybxf-security-ui/src/views/backend/statisticsFire/component/barChart.vue

<template>
  <div
    :class="className"
    :style="{
      height: height,
      width: width,
      background: background,
      marginRight: '16px',
    }"
  >
    <div ref="chart" class="chart"></div>
  </div>
</template>
  
  <script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

const animationDuration = 6000;

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "464px",
    },
    background: {
      type: String,
      default: "#fff",
    },
    watcherList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chart: null,
      people: [],
      quality: [],
    };
  },
  watch: {
    watcherList: function (newData, oldData) {
      if (newData !== oldData) {
        this.initChart();
      }
    },
  },
  methods: {
    initChart() {
      this.watcherList.forEach((item) => {
        this.people.push(item.watcher);
        this.quality.push(item.quality);
      });
      console.log("fithis.watcherListrst", this.watcherList);
      this.chart = echarts.init(this.$refs.chart, "macarons");
      this.chart.setOption({
        title: {
          text: "监督员质态统计",
          textStyle: {
            color: "#0F2B4C",
          },
          top: 10,
          left: 5,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            var tar = params[0];
            return (
              "监督人:" + tar.name + "<br/>" + "质态数" + " : " + tar.value
            );
          },
        },
        xAxis: {
          type: "category",
          data: this.people,
          axisLabel: {
            rotate: 45, // 设置标签倾斜角度，单位为度
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.quality,
            type: "bar",
            barWidth: "16px",
            itemStyle: {
              color: "#0147EB",
            },
          },
        ],
      });
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
};
</script>
  
  <style lang="scss">
.chart {
  height: 100%;
  width: 100%;
}
</style>