设备超出点点点

haoxuan

2023-12-05 aba444f58264a5b6a016ddc3e6076de8e9379950

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -24,8 +24,18 @@
  data() {
    return {
      chartData: {
        datax: ["人员1", "人员2", "人员3", "人员4", "人员5", "人员6"],
        datay: [120, 200, 150, 380, 470, 150, 230],
        datax: [
          "人员1",
          "人员2",
          "人员3",
          "人员4",
          "人员5",
          "人员6",
          "人员7",
          "人员8",
          "人员9",
        ],
        datay: [120, 200, 150, 380, 470, 150, 230, 330, 190, 440],
      },
    };
  },
@@ -43,6 +53,7 @@
  methods: {
    //在职
    pieChart(chartName, data) {
      let that = this;
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      let option;
@@ -65,24 +76,10 @@
          dataZoom: [
            {
              type: "inside",
              // show: true, //显示滚动条
              start: 0,
              end: 100,
              yAxisIndex: 0,
              minSpan: 20,
              maxSpan: 100,
              // handleSize: 8
            },
            {
              //   type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
              type: "inside",
              // show: true,
              // realtime : true,
              yAxisIndex: 0,
              minSpan: 20,
              maxSpan: 100,
              start: 0,
              end: 100,
              show: false,
              startValue: 0, // 从头开始
              endValue: 5, // 一次性展示几个
            },
          ],
          legend: {
@@ -124,7 +121,7 @@
          ],
          xAxis: [
            {
              type: "",
              type: "value",
              name: "单位：件",
              // min: data.yAxis[0].min?data.yAxis.min:0,
              minInterval: 1, //坐标轴是整数
@@ -151,7 +148,6 @@
              axisTick: {
                show: false,
              },

              axisLabel: {
                textStyle: {
                  color: "#00FFFF",
@@ -188,7 +184,22 @@
          ],
        };

        setInterval(function () {
          // 每次向左滑动一个，最后一个从头开始。
          if (option.dataZoom[0].endValue == that.chartData.datay.length) {
            option.dataZoom[0].startValue = 0;
            option.dataZoom[0].endValue = 5;
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          myChart.setOption(option);
        }, 4000);

        option && myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } else {
        option = {};
        myChart.setOption(option, true);
@@ -201,7 +212,7 @@
      let option;
      if (data) {
        option = {
          color: ["#dcb018", "#735b09", "#ebd68e", "#FF3000"],
          color: ["#dcb018", "#735b09", "#ebd68e", "#c7b36e"],
          tooltip: {
            trigger: "item",
          },
@@ -212,8 +223,8 @@
                z: 3,
                style: {
                  image: img,
                  width: 118,
                  height: 118,
                  width: 238,
                  height: 238,
                },
                left: "center",
                top: "center",
@@ -225,23 +236,29 @@
            {
              name: "Access From",
              type: "pie",
              // center: ['80%', '46%'],
              radius: ["52%", "65%"],
              // minAngle: 20,
              // startAngle: 60,
              radius: ["52%", "62%"],
              avoidLabelOverlap: false,

              label: {
                normal: {
                  position: "outer",
                  padding: [0, -55],
                  padding: [0, -62],
                  color: "#01f7fd",
                  fontSize: 12,
                  borderWidth: 20,
                  borderWidth: 5,
                  borderRadius: 4,
                  formatter: function (params) {
                    let str = params.name + params.value + "%";
                    return str;
                    return `{a|${params.name}} {b|${params.value + "%"}}`;
                  },
                  rich: {
                    a: {
                      color: "#00ffff",
                      fontSize: 14,
                    },
                    b: {
                      color: "#fccd1d",
                      fontSize: 14,
                    },
                  },
                },
              },
@@ -255,8 +272,8 @@
              },
              labelLine: {
                show: true,
                length: 5,
                length2: 70,
                length: 4,
                length2: 80,
                lineStyle: {
                  color: "#dcb018",
                },