DF22001YiQi.git

<template>
  <!-- 本班/本月产量统计 -->
  <div class="box-container box4" id="echarts4"></div>
</template>
 
<script>
let timer = null;
import * as echarts from "echarts";
export default {
  props: {
    produceStatisData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      option: {},
      myChart: {},
      currentIndex: -1,
      data1: [],
      data2: [{ actualData: 2782, planData: 11128 }],
    };
  },
  // watch: {
  //   produceStatisData(val) {
  //     // 测试用：
  //     val.currentShiftProduceNum = 280;
  //     val.currentShiftPlanNum = 300;
  //     // 当前班组实际生产数量 currentShiftProduceNum
  //     // 当前班组计划生产数量 currentShiftPlanNum
  //     var num1 = val.currentShiftProduceNum; //实际生产数量
  //     var num2 = val.currentShiftPlanNum - val.currentShiftProduceNum; //计划生产数量
  //     if (val.currentShiftPlanNum == 0) {
  //       //分母为0 显示0%
  //       num1 = 0;
  //       num2 = 10;
  //     }
  //     this.$set(this.option.series[0], "data", [
  //       // { value: 1 },  //实际生产数量 1/ (9+1) = 10%
  //       // { value: 9 },
  //       {
  //         value: num1,
  //       }, //实际生产数量
  //       {
  //         value: num2,
  //       },
  //     ]);
  //     var num3 = val.currentMonthProduceNum;
  //     var num4 = val.currentMonthPlanNum - val.currentMonthProduceNum;
  //     if (val.currentMonthPlanNum == 0) {
  //       //分母为0 显示0%
  //       num3 = 0;
  //       num4 = 10;
  //     }
  //     this.$set(this.option.series[1], "data", [
  //       { value: num3 },
  //       { value: num4 },
  //     ]);
 
  //     this.myChart.setOption(this.option);
  //     this.hignLightPie();
  //   },
  // },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById("echarts4"));
    var value = 60;
    var value2 = 15;
    let data1 = [
      {
        value: value,
        name: "",
        itemStyle: {
          normal: {
            color: "#62fbf8",
          },
        },
      },
      {
        value: 100 - value,
        name: "",
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
      },
    ];
 
    let data2 = [
      {
        value: value2,
        name: "",
        itemStyle: {
          normal: {
            color: "rgb(105,206,195)",
          },
        },
      },
      {
        value: 100 - value2,
        name: "",
        label: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            color: "rgba(0,0,0,0)",
          },
        },
      },
    ];
 
    this.option = {
      color: ["#00f6fe", "rgba(5, 19, 96, 0.5)"],
      // 插入背景图
      //    graphic: [
      //   {
      //     type: "image",
      //     id: "background1",
      //     left: "13px", // 根据环形图的位置调整
      //     top: "61px", // 根据环形图的位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // 第一个环形图的背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      //   {
      //     type: "image",
      //     id: "background2",
      //     left: "131px", // 根据环形图的位置调整
      //     top: "61px", // 根据环形图的位置调整
      //     z: -10,
      //     bounding: "raw",
      //     origin: [0, 0],
      //     style: {
      //       image: require(`@/assets/images/quan.png`), // 第一个环形图的背景图片路径
      //       width: 100,
      //       height: 100,
      //     },
      //   },
      // ],
      series: [
        // 左侧
        {
          name: "左-数据",
          type: "pie",
          // radius: ['65%', '75%'],
          radius: ["29%", "36%"], //环变细
          center: ["25%", "49%"],
          silent: true,
          // clockwise: false,
          startAngle: 90,
          z: 1,
          zlevel: 0,
          label: {
            normal: {
              position: "center",
            },
          },
          data: data1,
        },
        {
          name: "左-中间渐变",
          type: "pie",
          startAngle: 90,
          z: 20,
          zlevel: 20,
          radius: "28%",
          hoverAnimation: false,
          center: ["25%", "49%"],
 
          // zlevel: 2,
          itemStyle: {
            normal: {
              labelLine: {
                show: false,
              },
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 1,
                  color: "rgba(55,70,130, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(55,70,130, 0)",
                },
              ]),
              shadowBlur: 10,
              // shadowColor: 'rgba(55,70,130, 1)'
            },
          },
          data: [
            {
              value: 100,
            },
          ],
        },
        {
          name: "左-刻度间隔",
          z: 2,
          // zlevel: 1,
          type: "gauge",
          radius: "57%",
          center: ["25%", "49%"],
          startAngle: 20,
          endAngle: -360,
          splitNumber: 10,
          hoverAnimation: true,
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 14, //刻度长度
            // Distance: 40, //刻度间隔距离
            lineStyle: {
              width: 5,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(8, 52, 106, 0.039)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(8, 52, 106, 0.239)", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [100],
        },
 
        // 右侧
        {
          name: "右-数据",
          type: "pie",
          // radius: ['65%', '75%'],
          radius: ["29%", "36%"], //环变细
          center: ["74%", "49%"],
          silent: true,
          // clockwise: false,
          startAngle: 90,
          z: 1,
          zlevel: 0,
          label: {
            normal: {
              position: "center",
            },
          },
          data: data2,
        },
        {
          name: "右-中间渐变",
          type: "pie",
          startAngle: 90,
          radius: "28%",
          hoverAnimation: false,
          center: ["74%", "49%"],
          itemStyle: {
            normal: {
              labelLine: {
                show: false,
              },
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 1,
                  color: "rgba(55,70,130, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(55,70,130, 0)",
                },
              ]),
              shadowBlur: 10,
              // shadowColor: 'rgba(55,70,130, 1)'
            },
          },
          data: [
            {
              value: 100,
            },
          ],
        },
        {
          name: "右-刻度间隔",
          z: 2,
          type: "gauge",
          radius: "45%",
          center: ["74%", "49%"],
          startAngle: 90,
          endAngle: -360,
          splitNumber: 10,
          hoverAnimation: true,
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 20,
            lineStyle: {
              width: 10,
              color: "#1183a7",
              shadowColor: "rgb(4,31,62, 0.5)",
            },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [100],
        },
      ],
    };
    this.myChart.setOption(this.option);
    const that = this;
    window.addEventListener("resize", () => {
      that.myChart.resize();
    });
    // this.getData();
    this.defineEvent();
    // this.selectPie();
    this.hignLightPie();
    // timer = setInterval(this.selectPie, 1500);
  },
  methods: {
    // getData() {
    //   this.data1 = [{ actualData: 144, planData: 288 }];
    //   this.$set(this.option.series[0], "data", [
    //     { value: this.data1[0].actualData },
    //     { value: this.data1[0].planData - this.data1[0].actualData },
    //   ]);
    //   this.$set(this.option.series[1], "data", [
    //     { value: this.data2[0].actualData },
    //     { value: this.data2[0].planData - this.data2[0].actualData },
    //   ]);
    //   console.log(this.option.series[0].data);
    //   this.myChart.setOption(this.option);
    // },
    selectPie() {
      let dataLen = this.option.series[0].data.length;
      this.currentIndex = (this.currentIndex + 1) % dataLen;
      this.hignLightPie();
    },
    // 轮播点亮饼图
    hignLightPie() {
      const dataPie = this.option.series[0].data;
      // 熄灭所有扇形区域
      for (var index in dataPie) {
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });
 
        this.myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 1,
          dataIndex: index,
        });
      }
 
      // 点亮当前扇形区域
      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
 
      this.myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 1,
        dataIndex: 0,
      });
    },
 
    // 鼠标触摸轮播悬停事件
    defineEvent() {
      // 鼠标移出轮播继续
      this.myChart.on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });
 
      // 鼠标进入轮播悬停
      this.myChart.on("mouseover", (params) => {
        clearInterval(timer);
        this.currentIndex = params.dataIndex;
        this.hignLightPie();
      });
 
      // 鼠标移入legend轮播悬停
      this.myChart.getZr().on("mouseover", (event) => {
        const legendDataIndex = event.topTarget.parent.__legendDataIndex; // 每个legend的index
        clearInterval(timer);
        this.currentIndex = legendDataIndex;
        this.hignLightPie();
      });
 
      // 鼠标移出legend轮播继续
      this.myChart.getZr().on("mouseout", () => {
        if (timer) clearInterval(timer);
        timer = setInterval(this.selectPie, 1500);
      });
    },
  },
};
</script>
 
<style>
#echarts4 {
  transform: scaleY(2);
}
</style>