heli-mes/mes-ui/mes-echarts/src/views/btmleft.vue

<template>
  <div id="center">
    <dv-border-box-13>
      <div class="dvrow">
        <div>
          <span class="title-span">当前生产进度跟踪表</span>
        </div>

      </div>
      <div id="progressChart" class="progressChart"></div>
    </dv-border-box-13>
    <dv-border-box-13>
      <div class="dvrow">
        <div>
          <span class="title-span">当前设计进度跟踪表</span>
        </div>
      </div>
      <leftbottom />
    </dv-border-box-13>
  </div>
</template>

<script>
import { request } from "@/utils/request.js";
import leftbottom from "./leftbottom.vue";

export default {
  components: {
    leftbottom,
  },
  data() {
    return {
      dataA: 0,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // const labelval1= {}
      const labelOption = {
        show: true,
        formatter: "{c}{name|%}",
        fontSize: 14,
        rich: {
          name: {},
        },
      };
      const labelOption2 = {
        show: true,
        formatter: (obj) => {
          let data1 = [10, 30, 10, 5, 5, 10];
          let data2 = [10, 10, 30, 10, 10, 10];
          let data3 = [10, 10, 40, 10, 10, 10];
          let data4 = [20, 10, 15, 10, 10, 20];
          let arrC = 0;
          let dataA = data1[obj.dataIndex];
          let dataB = data2[obj.dataIndex];
          let dataC = data3[obj.dataIndex];
          let dataD = data4[obj.dataIndex];
          let dataAll = 0;
          switch (obj.componentIndex) {
            case 0:
              if (dataA) {
                dataAll = dataAll + dataA;
              }
              break;
            case 1:
              if (dataA) {
                dataAll = dataAll + dataA;
              }
              if (dataB) {
                dataAll = dataAll + dataB;
              }
              break;
            case 2:
              if (dataA) {
                dataAll = dataAll + dataA;
              }
              if (dataB) {
                dataAll = dataAll + dataB;
              }
              if (dataC) {
                dataAll = dataAll + dataC;
              }
              break;
            case 3:
              if (dataA) {
                dataAll = dataAll + dataA;
              }
              if (dataB) {
                dataAll = dataAll + dataB;
              }
              if (dataC) {
                dataAll = dataAll + dataC;
              }
              if (dataD) {
                dataAll = dataAll + dataD;
              }
              break;
          }
          // for (var i = 0; i < obj.dataIndex; i++) {
          //   switch (obj.componentIndex) {
          //     case 1:
          //       if (data2[i]) {
          //         arrC = arrC + data2[i];
          //       }
          //       break;
          //   }
          // }
          // console.log(arr);
          // this.dataA = this.dataA + obj.value;
          //console.log(obj);
          return dataAll + "%";
        },
        textStyle: {
          // 数值样式
          color: "#fff",
          fontSize: 12,
        },
        fontSize: 14,
        rich: {
          name: {},
        },
      };
      let progressChart = this.$echarts.init(
        document.getElementById("progressChart")
      );
      let dataX = [
        "DDZZ-自动化夹具",
        "BX-VM项目",
        "CQHQ-BAIC缸盖低压模具",
        "CA-HE15-AA缸盖",
        "CA-HE15-TG-AA缸盖",
        "SDWC-226B缸盖",
      ];
      // dataX对应的数据
      let data1 = [10, 30, 10, 5, 5, 10];
      let data2 = [10, 10, 30, 10, 10, 10];
      let data3 = [10, 10, 40, 10, 10, 10];
      let data4 = [20, 10, 15, 10, 10, 20];
      const option = {
        dataZoom: [
          {
            // 第一个 dataZoom 组件
            type: "inside",
            yAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个
            startValue: 0, // 数据窗口范围的起始数值index
            endValue: 2, // 数据窗口范围的结束数值index
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle: {
            color: "white",
          },
        },
        grid: {
          top: "15%",
          left: "33%",
          right: "5%",
          bottom: "13%",
          // containLabel: true,
        },
        xAxis: {
          min: "0",
          max: "100",
          interval: 20,
          type: "value",
          axisLabel: {
            formatter: "{value}%",
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", //solid实线;dashed虚线
              color: "rgb(81, 82, 8,0.4)",
            },
          },
        },
        yAxis: {
          type: "category",
          data: dataX,
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
            rotate: 0, // 文字倾斜显示
          },
          // 背景刻度线
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed", //solid实线;dashed虚线
              color: "rgb(81, 82, 8,0.4)",
            },
          },
        },
        series: [
          {
            name: "3月第1周",
            type: "bar",
            stack: "total",
            label: labelOption2,

            data: data1,
          },
          {
            name: "3月第2周",
            type: "bar",
            stack: "total",
            label: labelOption2,
            data: data2,
          },
          {
            name: "3月第3周",
            type: "bar",
            stack: "total",
            label: labelOption2,
            data: data3,
          },
          {
            name: "3月第4周",
            type: "bar",
            stack: "total",
            label: labelOption2,
            data: data4,
          },
        ],
      };
      progressChart.setOption(option);
      // 设置定时器, 每隔2s判断是否滚动到末尾, 是则重置为初始状态, 否则向前滚动一位
      this.timerId = setInterval(() => {
        if (option.dataZoom[0].endValue == dataX.length - 1) {
          option.dataZoom[0].endValue = 3;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        progressChart.setOption(option);
      }, 2000);
    },
  },
};
</script>

<style lang="scss" scoped>
#center {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .dv-border-box-13 {
    height: 540px;
    padding: 0 20px;
    padding-top: 30px;
    .dvrow {
      display: flex;
      justify-content: space-between;
    }
  }
  .progressChart {
    width: 100%;
    height: 300px;
  }
}
</style>