大屏整改

liuying

2024-11-10 19b415a1aa36dc70e5546b0fdeefa6a39570f19b

 yiqi_screen/src/components/ProdlineHealthy.vue

@@ -17,32 +17,38 @@
    this.option = {
      legend: {
        orient: "vertical",
        bottom: "30%",
        bottom: "20%",
        right: "6%",
        textStyle: {
          color: "#fff",
          fontSize: 8,
        },
        itemHeight: 5, // 设置图例项的高度
        itemWidth: 5, // 设置图例项的宽度

        itemGap: 8, //块之间的间距
        itemHeight: 9, // 设置图例项的高度
        itemWidth: 9, // 设置图例项的宽度
        data: [
          {
            name: "实际",
            itemStyle: {
              color: "#fff",
            },
          },
          {
            name: "目标",
            itemStyle: {
              color: "#01afba",
              color: "#f2f45b",
            },
            textStyle: {
              color: "#f2f45b", //黄色
              fontSize: 10,
            },
          },
          {
            name: "实际",
            itemStyle: {
              color: "#1fe9dc",
            },
            textStyle: {
              color: "#1fe9dc",
              fontSize: 10,
            },
          },
        ],
      },
      radar: {
        center: ["40%", "50%"], // 更改为更小的百分比以往中间移动
        radius: "30%",
        center: ["40%", "55%"], // 更改为更小的百分比以往中间移动
        radius: "40%",
        indicator: [
          { name: "人", max: 100, color: "#fff" },
          { name: "环", max: 100, color: "#fff" },
@@ -50,7 +56,8 @@
          { name: "料", max: 100, color: "#fff" },
          { name: "机", max: 100, color: "#fff" },
        ],
        splitNumber: 0,

        // splitNumber: 0,
        axisLine: {
          show: false,
        },
@@ -58,11 +65,11 @@
          padding: -10,
        },

        // splitArea:{
        //   areaStyle:{
        //     color:'#fff'
        //   }
        // }
        splitArea: {
          areaStyle: {
            color: "rgba(131, 163, 178, 0.8)",
          },
        },
      },
      series: [
        {
@@ -70,25 +77,29 @@
          type: "radar",
          data: [
            {
              value: [90, 90, 90, 90, 90],
              name: "实际",
              lineStyle: {
                color: "#fff",
                opacity: 0,
              },
              value: [90, 80, 80, 80, 80],
              areaStyle: {
                color: "#fff",
                color: {
                  type: "linear-gradient",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#b2f2bb" }, // 渐变开始颜色
                    { offset: 1, color: "#a0e6a0" }, // 渐变结束颜色
                  ],
                },
                opacity: 0.9,
              },
            },
            {
              value: [100, 100, 100, 100, 100],
              name: "目标",
              lineStyle: {
                color: "#01afba",
                opacity: 0,
              },
              value: [90, 80, 80, 80, 80],
              areaStyle: {
                color: "#01afba",
                color: "#6ee6db",
                opacity: 0.3,
              },
            },
          ],
@@ -166,8 +177,8 @@

<style>
#echarts2 {
  margin-top: .1rem;
  width: 2.89rem;
  margin-top: 0.1rem;
  width: 100%;
  height: 2.5rem;
  transform: scaleY(2);