soc_web/src/views/board/charts/resumption/report_line.vue

<!--  -->
<template>
  <div class="chart-template chart-template-withperiod">
    <p>
      <span> {{ title }} </span>
    </p>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="t in types"
          :key="t.value"
          :label="t.text"
          :name="t.value"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div ref="chart"></div>
  </div>
</template>

<script>
import "./../../board.scss";
import * as echarts from "echarts";
import {
  findMaxIndex,
  getChartDOMSize,
  getNextPeriod,
  getPeriodText,
} from "../../utils.js";
const types = [
  {
    text: "近7天",
    value: "1",
  },
  {
    text: "近七周",
    value: "2",
  },
  {
    text: "近七月",
    value: "3",
  },
];
export default {
  props: {
    orgId: {
      type: String,
      isRequired: true,
    },
    title: {
      type: String,
      isRequired: true,
    },
  },
  data() {
    return {
      data: {
        all: [],
        completed: [],
        name: [],
      },
      activeName: types[0].value,
    };
  },

  components: {},

  computed: {},

  watch: {
    orgId: {
      deep: true,
      handler(val) {
        this.resetTimer();
        this.getData();
      },
    },
    data: {
      deep: true,
      handler() {
        this.initMap();
      },
    },
  },

  created() {
    this.types = types;
    this.maxDisplay = 16;
    this.refreshTime = 1 * 10 * 1000;
    this.isMouseOver = false;
  },

  async mounted() {
    window.addEventListener("resize", this.windowResize);
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
    this.timer = null;

    window.removeEventListener("resize", this.windowResize);
  },

  methods: {
    handleClick() {
      this.resetTimer();
      this.getData();
    },
    handleMouseEnter() {
      this.isMouseOver = true;
    },
    handleMouseLeave() {
      this.isMouseOver = false;
    },
    async getData() {
      let bs = parseInt(this.activeName) + 1;
      this.data = {
        all: [
          210 * bs,
          101 * bs,
          117 * bs,
          78 * bs,
          107 * bs,
          105 * bs,
          124 * bs,
        ],
        completed: [
          155 * bs,
          99 * bs,
          110 * bs,
          78 * bs,
          104 * bs,
          102 * bs,
          115 * bs,
        ],
        name: ["10.25", "10.24", "10-23", "10-22", "10-21", "10-20", "10-19"],
      };
      this.data.rate = [];
      this.data.all.forEach((v, i) => {
        this.data.rate[i] = (this.data.completed[i] / this.data.all[i]) * 100;
      });
      console.info(this.data);
    },

    windowResize() {
      this.myChart && this.myChart.resize();
    },
    initMap() {
      this.myChart && this.myChart.dispose();
      let chart = this.$refs["chart"];

      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(
        chart
        // document.getElementById("commAlarmEvent_Chart")
      );

   
      let t = this;
      // 指定图表的配置项和数据
      var option = {
          color: ["rgb(250,200,88)"],
        tooltip: {
          trigger: "axis",
          confine: true,
          axisPointer: {
            type: "shadow",
          },
          formatter: "{c}%",
        },
        legend: {
          show: true,
          textStyle: {
            color: "rgb(245, 245, 245)",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          top: "40px",
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            data: this.data.name,
            // data: this.mapdata.totalDataVo.xlist,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "rgb(245, 245, 245)", //左边线的颜⾊
              },
            },
            axisLabel: {
              interval: 0,
              rotate: -30,
              fontSize: 12,
              // color: "#fff",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            minInterval: 1,
            min:Math.min(...this.data.rate,50),
            max:100,
            // max: function (value) {
            //   let m = value.max == Math.ceil(value.max) ? Math.ceil(value.max * 1.0001) : Math.ceil(value.max);
            //   return m
            // },
          },
        ],
        series: [
          // {
          //   name: "总数",
          //   type: "bar",
          //   barWidth: "14",
          //   // label: {
          //   //   show: true,
          //   //   position: 'top',
          //   // },
          //   data: this.data.all,
          // },
          {
            name: "完成率",
            type: "line",
            barWidth: "14",
            // label: {
            //   show: true,
            //   position: 'top',
            // },
            data: this.data.rate,
            itemStyle: {
              normal: {
                label: {
                  formatter: function (param) {
                    // if (t.data.all[param.dataIndex]) {
                    //   let rate = param.value / t.data.all[param.dataIndex];
                    //   return (Math.floor(rate * 1000) / 10).toFixed(1) + "%";
                    // } else {
                    //   return "";
                    // }
                    return param.value.toFixed(1) + "%";
                  },
                  show: true,
                  position: "top",
                  textStyle: {
                    fontWeight: "bolder",
                    fontSize: "12",
                    color: "rgb(245, 245, 245)",
                  },
                },
              },
            },
          },
        ],
      };
      if (option && typeof option === "object") {
        this.myChart.setOption(option);
      }
    },

    resetTimer() {
      this.timer && clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.isMouseOver) {
          return;
        }
        this.activeName = getNextPeriod(this.types, this.activeName);
        this.getData();
      }, this.refreshTime);
    },
  },
};
</script>
<style lang="less" scoped></style>