Chars.vue

<!--
 * @Author: your name
 * @Date: 2022-04-11 17:13:13
 * @LastEditTime: 2022-09-08 09:09:03
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/allCharsCom/Chars.vue
-->
<template>
  <div class="my-chars">
    <div ref="chars" class="chars"></div>
    <div v-if="!options" ref="circle" class="circle" />

    <!-- <slot> -->
    <!-- 如果是默认值，就显示这个 -->
    <div v-if="!options" class="text flex" :style="{ color: '#fffff' }">
      <span class="num">{{ num }}</span>
    </div>

    <!-- </slot> -->
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default: null,
    },
    // 默认饼图的颜色
    color: {
      tupe: String,
      default: "#399AF4",
    },
    num: {
      tupe: Number,
      default: 4,
    },
  },
  data() {
    return {
      myChats: null,
      // 默认options
      defaultOptions: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          show: false,
        },
        color: [this.color, "rgba(0,0,0,0)"],
        // title: {
        //   text: "资产总数",
        //   left: "center",
        //   top: "50%",
        //   textStyle: {
        //     textAlign: "center",
        //     fill: "#333",
        //     fontSize: 14,
        //     fontWeight: 400,
        //   },
        // },
        graphic: {
          type: "text",
          left: "center",
          top: "45%",
          style: {
            text: "",
            textAlign: "center",
            fill: "#399AF4",
            fontSize: 18,
          },
        },
        series: [
          {
            name: "完成情况",
            type: "pie",
            radius: ["72%", "90%"],
            avoidLabelOverlap: false,
            // hoverAnimation: false,
            label: {
              // normal: {
              show: false,
              position: "center",
              // },
            },
            itemStyle: {
              borderRadius: 10,
              // borderColor: "#fff",
            },
            data: [
              {
                value: this.num,
                name: "未完成",
              },
              {
                value: 96,
                name: "完成",
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    // if (!this.options) {
    this.$nextTick(() => {
      this.charsInit();
    });
    // }
  },
  watch: {
    options: {
      handler: function (val, oldVal) {
        console.log("val", val);
        this.charsInit();
      },
      deep: true,
    },
  },
  methods: {
    charsInit() {
      if (!this.myChats) {
        this.myChats = this.$echarts.init(this.$refs.chars);
      }
      let options;
      // 如果传进来的options就用传进来的，否则就用默认的
      if (this.options != null) {
        options = this.options;
      } else {
        options = JSON.parse(JSON.stringify(this.defaultOptions));
        options.color[0] = this.color;
        // 画个圆圈
        this.circleChats = this.$echarts.init(this.$refs.circle);
        let options2 = JSON.parse(JSON.stringify(this.defaultOptions));
        (options2.series[0].radius = ["60%", "65%"]),
          (options2.series[0].data = [
            {
              value: 24,
              name: "未完成",
            },
          ]);
        options2.color[0] = this.color;
        this.circleChats.setOption(options2);
      }
      this.myChats.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-chars {
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: blue;
}

.chars {
  width: 100%;
  height: 100%;
  // background: yellow;
}
.circle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.text {
  position: absolute;
  width: 100%;
  height: 100%;
  // background: red;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  // width: 80px;
  // height: 40px;
  // top: 50%;
  // left: 50%;
  // margin-left: -20px;
  // margin-top: -40px;
  // text-align: center;
  // color: #399af4;

  .num {
    font-size: 15px;
    letter-spacing: 0px;
  }
  .fh {
    font-size: 1px;
  }
}
</style>