ISMS-Visualization-BJGD-TKT/src/views/components/chart/DateTimeBar.vue

<template>
  <div :id="baseConfig.ids" :style="{ width: width, height: height }"></div>
</template>
<script>
import resize from "./resize";
export default {
  props: {
    data: {
      default: () => ({
        date: [],
        seriesData: [],
        chartType: "",
        limitNumber: 30,
      }),
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    baseConfig: {
      default: function () {
        return {
          ids: "EchartsBar",
          title: "",
          unit: "人",
        };
      },
    },
  },
  mixins: [resize],
  data() {
    return {
      chart: null,
      colorConfig: [
        {
          name: "人员报警",
          code: "100001",
          color: "#FF83DF",
        },
        {
          name: "周界报警",
          code: "100002",
          color: "#8023FF",
        },
        {
          name: "火灾报警",
          code: "100003",
          color: "#00ACFF",
        },
        {
          name: "门禁报警",
          code: "100006",
          color: "#39CD1A",
        },
        {
          name: "生产报警",
          code: "100010",
          color: "#F8E71C",
        },
        {
          name: "阴保报警",
          code: "100011",
          color: "#EC576A",
        },
      ],
      colors: [
        "#FF83DF",
        "#8023FF",
        "#0064FF",
        "#00ACFF",
        "#50E3C2",
        "#39CD1A",
        "#B8E986",
        "#F8E71C",
        "#FF9F00",
        "#EC576A",
      ],
      dataZoomMix: 0,
      chartType: "bar",
    };
  },
  mounted() {
    this.drawChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  watch: {
    data: {
      //深度监听，可监听到对象、数组的变化
      handler(newVal) {
        let length = newVal.date.length;
        //显示数据数量
        if (newVal.limitNumber === 0) {
          this.dataZoomMix = 0;
        } else {
          if (length > newVal.limitNumber) {
            this.dataZoomMix = (1 - newVal.limitNumber / length) * 100;
          } else {
            this.dataZoomMix = 0;
          }
        }
        //默认图表类型
        if (newVal.chartType || newVal.chartType === "") {
          this.chartType = "bar";
        } else {
          this.chartType = "line";
        }
        // console.log(this.dataZoomMix);
        this.$nextTick(() => {
          this.chart.clear();
          this.drawChart();
        });
      },
      deep: true,
    },
  },
  methods: {
    drawChart() {
      //$("#你的画布名称").removeAttr("_echarts_instance_").empty()
      this.chart = this.$echarts.init(
        document.getElementById(this.baseConfig.ids)
      );
      this.chart.off("click");
      let option = {
        title: {
          show: false,
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "10%",
          bottom: "15%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            // magicType: {
            //   show: true,
            //   type: ["line", "bar"],
            // },
            // restore: { show: true },
            // saveAsImage: { show: true },
            myTool1: {
              show: true,
              title: "切换折线图",
              icon: "path://M193.422222 648.533333l-45.511111-45.511111L398.222222 358.4l199.111111 199.111111 347.022223-352.711111 45.511111 45.511111-392.533334 386.844445L398.222222 438.044444z",
              onclick: () => {
                this.chartType = "line";
                this.chart.clear();
                this.drawChart();
              },
            },
            myTool2: {
              show: true,
              title: "切换柱状图",
              icon: "path://M194.56 386.048q31.744 0 46.592 19.456t14.848 43.008l0 447.488-192.512 0 0-443.392q0-31.744 19.968-49.152t43.52-17.408l67.584 0zM514.048 134.144q27.648 0 44.032 16.896t16.384 40.448l0 704.512-191.488 0 0-702.464q0-15.36 6.144-26.624t15.36-18.432 20.48-10.752 20.48-3.584l68.608 0zM832.512 577.536q9.216 0 19.968 5.12t20.48 14.336 16.384 20.992 6.656 25.088l0 252.928-191.488 0 0-250.88q0-11.264 4.608-23.552t12.8-22.016 19.456-15.872 24.576-6.144l66.56 0z",
              onclick: () => {
                this.chartType = "bar";
                this.chart.clear();
                this.drawChart();
              },
            },
          },
          iconStyle: {
            borderColor: "#fff",
          },
          emphasis: {
            iconStyle: {
              borderColor: "#409EFF",
            },
          },
        },
        dataZoom: [
          {
            show: true,
            start: this.dataZoomMix,
            end: 100,
            height: 20,
            bottom: 2,
            textStyle: {
              color: "#fff",
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "dashed",
            },
          },
          padding: 10,
          textStyle: {
            fontSize: 12,
          },
        },
        color: [
          "#00ACFF",
          "#FF83DF",
          "#8023FF",
          "#0064FF",
          "#50E3C2",
          "#39CD1A",
          "#B8E986",
          "#F8E71C",
          "#FF9F00",
          "#EC576A",
        ],
        legend: {
          top: 2,
          itemWidth: 24,
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            data: this.data.date,
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              margin: 10,
              // interval: 0,
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#99FFFA",
              },
            },
          },
        ],
        yAxis: {
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#99FFFA",
            },
          },
          splitLine: {
            show: false,
            // interval: 4,
          },
          minInterval: 1,
          boundaryGap: [0, "5%"],
        },
        series: this.data.seriesData.map((item, index) => {
          if (this.chartType === "bar") {
            return {
              name: item.name,
              stack: "total",
              type: this.chartType,
              barMaxWidth: 30,
              itemStyle: {
                normal: {
                  opacity: 0.8,
                },
                emphasis: {
                  opacity: 1,
                },
              },
              data: item.data,
              markPoint: {
                data: item.markPointData,
              },
            };
          } else {
            return {
              name: item.name,
              type: this.chartType,
              itemStyle: {
                normal: {
                  opacity: 0.8,
                },
                emphasis: {
                  opacity: 1,
                },
              },
              data: item.data,
              markPoint: {
                data: item.markPointData,
              },
            };
          }
        }),
      };
      // this.chart.clear();
      this.chart.setOption(option);
      this.chart.on("click", (params) => {
        this.$emit("handleChartClick", params);
      });
    },
  },
};
</script>