一汽大屏 未提交的代码

liuying

2025-04-28 0630126012170da25291d55f0a1bd3130e64f434

 yiqi_screen/src/components/ProdlineHealthy.vue

@@ -1,8 +1,8 @@
<template>
  <div class="box-container" id="echarts2"></div>
</template>
        
        <script>

<script>
let timer = null;
export default {
  data() {
@@ -17,31 +17,38 @@
    this.option = {
      legend: {
        orient: "vertical",
        bottom: '10%',
        right: '6%',
        textStyle:{
            color:'#fff'
        },
        itemWidth: 5, // 设置图例项的宽度
        bottom: "20%",
        right: "6%",

        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:['43%','55%'],
        radius:'65%',
        center: ["40%", "55%"], // 更改为更小的百分比以往中间移动
        radius: "40%",
        indicator: [
          { name: "人", max: 100, color: "#fff" },
          { name: "环", max: 100, color: "#fff" },
@@ -49,19 +56,20 @@
          { name: "料", max: 100, color: "#fff" },
          { name: "机", max: 100, color: "#fff" },
        ],
        splitNumber: 0,

        // splitNumber: 0,
        axisLine: {
          show: false,
        },
        axisName:{
            padding:-10
        }
        axisName: {
          padding: -10,
        },

        // splitArea:{
        //   areaStyle:{
        //     color:'#fff'
        //   }
        // }
        splitArea: {
          areaStyle: {
            color: "rgba(131, 163, 178, 0.8)",
          },
        },
      },
      series: [
        {
@@ -69,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,
              },
            },
          ],
@@ -96,10 +108,10 @@
      ],
    };
    this.myChart.setOption(this.option);
    const that=this
    window.addEventListener('resize',()=>{
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    })
    });
    // this.defineEvent();
    // this.selectPie();
    // timer = setInterval(this.selectPie, 1500);
@@ -127,7 +139,7 @@
        type: "highlight",
        seriesIndex: 0,
        dataIndex: this.currentIndex,
      })
      });
    },

    // 鼠标触摸轮播悬停事件
@@ -162,6 +174,19 @@
  },
};
</script>
        
        <style>
</style>

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

  /*         
          margin-top: .4rem;
          width: 2.89rem;
          height: 2.0rem;
        transform: scaleY(2); */
  /* border: 1px solid red; */
}
</style>