饼图样式优化

yangfeng

2023-12-04 6f1229d08cf208bfb9ea71b6909e46620948ad9a

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -201,7 +201,7 @@
      let option;
      if (data) {
        option = {
          color: ["#dcb018", "#735b09", "#ebd68e", "#FF3000"],
          color: ["#dcb018", "#735b09", "#ebd68e", "#c7b36e"],
          tooltip: {
            trigger: "item",
          },
@@ -212,8 +212,8 @@
                z: 3,
                style: {
                  image: img,
                  width: 118,
                  height: 118,
                  width: 238,
                  height: 238,
                },
                left: "center",
                top: "center",
@@ -226,7 +226,7 @@
              name: "Access From",
              type: "pie",
              // center: ['80%', '46%'],
              radius: ["52%", "65%"],
              radius: ["52%", "62%"],
              // minAngle: 20,
              // startAngle: 60,
              avoidLabelOverlap: false,
@@ -234,15 +234,23 @@
              label: {
                normal: {
                  position: "outer",
                  paddding: [-100, 70],

                  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,
                    },
                  },
                },
              },
@@ -256,12 +264,16 @@
              },
              labelLine: {
                show: true,
                length: 20,
                length2: 10,
                length: 4,
                length2: 80,
                lineStyle: {
                  color: "#dcb018",
                },
              },
              labelLayout: {
                verticalAlign: "bottom",
                dy: -5,
              },
              data: data,
            },
          ],