人员生产效率、设备负荷对比、物料需求、车间正品率样式修改及文字显示处理

yangfeng

2023-12-06 1c87fc91195ae116d7e491530137d0be01ce7f95

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -17,6 +17,7 @@
//引入echart
import * as echarts from "echarts";
let myChart;
let myRightChart;
export default {
  components: {
    ChartTitle,
@@ -73,7 +74,7 @@
          grid: {
            right: "80px",
            bottom: "60px",
            left: "60px",
            left: "70px",
            top: "30px",
          },
          dataZoom: [
@@ -83,6 +84,9 @@
              show: false,
              startValue: this.startValue, // 从头开始
              endValue: this.endValue, // 一次性展示几个
              zoomOnMouseWheel: false,
              moveOnMouseWheel: true,
              moveOnMouseMove: true,
            },
          ],
          legend: {
@@ -108,6 +112,7 @@
                // rotate:45,
                margin: 10,
                show: true,
                fontSize: 12,
                textStyle: {
                  color: function (params, index) {
                    let colorList = ["#dcb018", "#00FFFF"];
@@ -117,6 +122,12 @@
                      return colorList[1];
                    }
                  },
                },
                formatter: function (value) {
                  if (value.length > 5) {
                    return `${value.slice(0, 4)}...`;
                  }
                  return value;
                },
              },
              data: data.datax ? data.datax : [],
@@ -155,6 +166,9 @@
                textStyle: {
                  color: "#00FFFF",
                },
                formatter: function (value) {
                  return `${value}%`;
                },
              },
            },
          ],
@@ -166,7 +180,21 @@
              label: {
                show: true,
                position: "right",
                color: "#00FFFF",
                formatter: function (params) {
                  if (params.dataIndex % 2 == 0) {
                    return `{a|${params.value}%}`;
                  } else {
                    return `{b|${params.value}%}`;
                  }
                },
                rich: {
                  a: {
                    color: "#00FFFF",
                  },
                  b: {
                    color: "#dcb018",
                  },
                },
              },
              itemStyle: {
                normal: {
@@ -208,7 +236,15 @@
    },
    getChartRight(chartName, data) {
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      // let myRightChart = echarts.init(chartDom);
      if (
        myRightChart != null &&
        myRightChart != "" &&
        myRightChart != undefined
      ) {
        myRightChart.dispose(); //销毁
      }
      myRightChart = echarts.init(chartDom);
      let img = "/cockpitPage/dotted-circle.png";
      let option;
      if (data) {
@@ -224,8 +260,8 @@
                z: 3,
                style: {
                  image: img,
                  width: 238,
                  height: 238,
                  width: 240,
                  height: 240,
                },
                left: "center",
                top: "center",
@@ -288,10 +324,10 @@
          ],
        };

        option && myChart.setOption(option);
        option && myRightChart.setOption(option);
      } else {
        option = {};
        myChart.setOption(option, true);
        myRightChart.setOption(option, true);
      }
    },
  },