大屏整改

liuying

2024-11-10 19b415a1aa36dc70e5546b0fdeefa6a39570f19b

 yiqi_screen/src/components/EquipmentRunStatus.vue

@@ -1,8 +1,9 @@
<template>
  <div class="box-container" id="echarts1"></div>
  <!-- <img :src="require(`@/assets/images/huan.png`)" class="huan" /> -->
  <div class="box-container   quan" id="echarts1"></div>
</template>
    
    <script>

<script>
let timer = null;
export default {
  props: {
@@ -47,7 +48,7 @@
            break;
        }
      });
      // console.log(val,data);
      console.log("++++++", data);
      // data = [
      //   { value: 2, name: "生产" },
      //   { value: 3, name: "完成" },
@@ -63,29 +64,35 @@
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts1"));
    this.option = {
      color: ["#00afb9", "#c3cbe4", "#2127ff", "#e0de00", "#c8003d"],
      // #00ff99 #fffff0 #0a0d7f #ffcc00 #fe0000
      color: ["#00ff99", "#fffff0", "#0a0d7f", "#ffcc00", "#fe0000"],
      
      legend: {
        orient: "vertical",
        top: "25%",
        right: "5%",
        // itemGap: 20,
        itemHeight: 5,
        top: "28%",
        right: "12%",
        itemGap: 12, //块之间的间距
        itemHeight: 9, // 设置图例项的高度
        itemWidth: 9, // 设置图例项的宽度
        data: ["生产", "完成", "待机", "警告", "故障"],
        textStyle: {
          color: "#fff",
          fontSize: 10,
        },
        formatter:  (name) =>{
          let res=this.option.series[0].data.filter(item=>item.name==name)
          return res.length>0?`${name}: ${res[0].value}台`:name;
        formatter: (name) => {
          let res = this.option.series[0].data.filter(
            (item) => item.name == name
          );
          return res.length > 0 ? `${name}: ${res[0].value}台` : name;
        },
      },
      series: [
        {
          type: "pie",
          radius: ["25%", "40%"],
          center: ["38%", "50%"],
          avoidLabelOverlap: false,
          center: ["33%", "50%"],
          radius: ["29%", "39%"],
          padAngle: 5, //环与环之间的间隙
          // avoidLabelOverlap: false,
          // left: "-30%",
          // top: "10%",
          label: {
@@ -93,6 +100,7 @@
            formatter: `{d}%`,
            color: "#fff",
            fontSize: 11,
            position: "outside",
          },
          labelLine: {
            show: true,
@@ -103,15 +111,19 @@
            borderRadius: 3,
            borderColor: "transparent",
            borderWidth: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
          shadowBlur: 10, // 阴影模糊程度
          shadowOffsetX: 20, // 水平阴影偏移
          shadowOffsetY: 20 // 垂直阴影偏移
          },
          // emphasis: {
          //   label: {
          //     show: false,
          //     fontSize: "15",
          //     color:'#fff',
          //     fontWeight: "normal",
          //   },
          // },
          emphasis: {
            label: {
              show: false,
              fontSize: "15",
              color: "#fff",
              fontWeight: "normal",
            },
          },
          data: [],
        },
      ],
@@ -183,11 +195,28 @@
  },
};
</script>
    
    <style>

<style>
#echarts1 {
  width: 3.84rem;
  /* height:5.2rem; */
  transform: scaleY(2);
}
</style>
.box-container {
  position: relative;
}

.quan::after {
  background-image: url("~@/assets/images/huan.png");
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  content: "";
  width: 56px;
  height: 32px;
  z-index: -1;
  /* opacity: 0.5; */
  top: 101px;
  left: 73px;
  transform: scaleY(2);
}
</style>