udi-cpt-vue/src/views/daping/sup3/jinKouItem.vue

<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
  <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts"/>
  <Reacquire v-else @onclick="getData" style="line-height:200px">
    重新获取
  </Reacquire>
</template>

<script>
import {currentGET} from  "../../../api/modules"

export default {
  data() {
    return {
      options: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0
      },
      pageflag: true,
      timer: null
    };
  },

  props: {
    statBustype: {
      type: Object,
      required: true,
    },
  },
  watch: {
    statBustype: function () {
      this.init()
    }
  },
  created() {

  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.clearData()

  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData() {
      this.pageflag = true
      // this.pageflag =false

      currentGET('nmapCount').then(res => {
        //只打印一次
        if (!this.timer) {
          console.log("国家库产品标识分类", res);
        }
        if (res.code == 20000) {
          this.countUserNumData = res.data
          this.$nextTick(() => {
            this.init()
          })

        } else {
          this.pageflag = false
          this.$Message({
            text: res.msg,
            type: 'warning'
          })
        }
      })
    },
    // //轮询
    // switper() {
    //   if (this.timer) {
    //     return
    //   }
    //   let looper = (a) => {
    //     this.getData()
    //   };
    //   this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    //   let myChart = this.$refs.charts.chart
    //   myChart.on('mouseover', params => {
    //     this.clearData()
    //   });
    //   myChart.on('mouseout', params => {
    //     this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    //   });
    // },
    init() {
      let total = this.statBustype.productCount;
      let colors = ["#ffca29", "#01c6fd"];
      let piedata = {
        name: "进口/非进口",
        type: "pie",
        radius: ["42%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 2,
        },

        color: colors,
        data: [
          {
            value: this.statBustype.unImportCount,
            name: "非进口",
            label: {
              shadowColor: colors[0],
            },
          },
          {
            value: this.statBustype.importCount,
            name: "进口",
            label: {
              shadowColor: colors[2],
            },
          },

        ],
      };
      this.options = {
        title: {
          // zlevel: 0,
          text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#ffffff",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 20,
              },
              name: {
                color: "#ffffff",
                lineHeight: 20,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          show: false,
          top: "5%",
          left: "center",
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: {show: true},
            label: {
              formatter: "   {b|{b}}   \n   {c|{c}个}",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: true,

            },
            emphasis: {
              show: true,
            },
          },
          {
            ...piedata,
            tooltip: {show: true},
            itemStyle: {},
            label: {
              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: "auto",
              padding: [2.5, -2.5, 2.5, -2.5],
              normal: {
                show: true,
                position: 'inner',
                formatter: "{d}%",
                color: "#fff",
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 36, // 第二段线 长度
              show: false,
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
</style>