PC_FiveFollowing/src/views/site_ehcarts/Device_distion.vue

<template>
  <div
    ref="distion"
    :class="className"
    :style="{ height: height, width: width }"
  ></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    defaul_tTime: {
      type: Array,
    },
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
    perData: {
      type: Array,
      default: () => [
        {
          color: "#01ACFF",
          name: "摄像头",
          value: [39],
          // nAmount: 566557.14,
        },
      ],
    },
  },
  data() {
    return {
      chart: null,
      color_XY: "rgba(0, 244, 253, 0.1)",
      msgFormSon: null,
      data_time: [
        "2021-07-01 00:00:00",
        "2021-07-02 00:00:00",
        "2021-07-03 00:00:00",
        "2021-07-04 00:00:00",
        "2021-07-05 00:00:00",
        "2021-07-06 00:00:00",
        "2021-07-07 00:00:00",
        "2021-07-08 00:00:00",
        "2021-07-09 00:00:00",
        "2021-07-10 00:00:00",
        "2021-07-11 00:00:00",
        "2021-07-12 00:00:00",
        "2021-07-13 00:00:00",
        "2021-07-14 00:00:00",
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      console.log(this.defaul_tTime);
    });
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  methods: {
    //次数分布折线图
    initChart() {
      var _this = this;
      var chart = echarts.init(this.$refs.distion);
      var option;

      var data = [0, 0, 0, 0, 0, 1, 1,1,1,1,1,1,1,1].map((val, ind) => {
        return [_this.data_time[ind], val];
      });

      option = {
        title: [
          {
            text: "OFF次数分布",
            left: "center",
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          {
            text: `OFF次数：${0}`,
            left: "right",
            padding: [0, "7", 0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
        ],
        tooltip: {
          backgroundColor: "rgba(0, 244, 253, 0.1)",
          borderColor: "rgba(0, 244, 253, 0.3)",
          textStyle: {
            color: "#fff",
          },
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          formatter: function (params) {
            // console.log(params);
            var res = params[0].data[0];
            for (let i in params) {
              res += `
              <div style="display:flex">
                  <div style="width:10px;height:10px;background:${
                    params[i].color
                  };border-radius: 10px;margin:10px 0;"></div>
                  <div style="padding:4px 0px 0px 10px;">${
                    params[i].seriesName
                  }:</div>
                  <div style="padding:4px 0px 0px 10px;">${
                    params[i].data[1]
                  }</div>
              </div>`; //可以在这个方法中做改变
            }
            return res;
          },
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
          nameTextStyle: {
            // 名称样式
            fontSize: 12,
            color: "#fff",
            fontWeight: "bold",
          },

          axisLabel: {
            showMaxLabel: true,
            textStyle: {
              color: "#fff", //坐标值得具体的颜色
            },
            formatter: {
              year: "{MM}-{dd}\n{yyyy}",
              month: `{MM}-{dd}\n{yyyy}`,
              day: `{MM}-{dd}\n{yyyy}`,
              hour: "{HH}:{mm}\n{MM}-{dd}",
              minute: "{HH}:{mm}",
              second: "{HH}:{mm}:{ss}",
              millisecond: "{hh}:{mm}:{ss} {SSS}",
              none: "{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}",
            },
          },
          axisLine: {
            lineStyle: {
              color: this.color_XY,
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: [this.color_XY],
            },
          },
          type: "value",
          // splitNumber: 4,
          // min: 4,
          max: 4,
          axisLabel: {
            textStyle: {
              color: "#fff", //坐标值得具体的颜色
            },
          },
        },
        series: [
          {
            name: `OFF次数`,
            type: "line",
            smooth: true,
            data: data,
          },
        ],
      };

      chart.setOption(option);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>