Chars.vue

<!--
 * @Author: your name
 * @Date: 2022-04-11 17:13:13
 * @LastEditTime: 2022-04-20 13:48:45
 * @LastEditors: Please set LastEditors
 * @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>
    <!-- <slot> -->
    <!-- 如果是默认值，就显示这个 -->
    <div v-if="!options" class="text" :style="{ color: color }">
      <span class="num">87</span><span class="fh">%</span>
    </div>
    <!-- </slot> -->
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default: null,
    },
    // 默认饼图的颜色
    color: {
      tupe: String,
      default: "#399AF4",
    },
  },
  data() {
    return {
      myChats: null,
      // 默认options
      defaultOptions: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#ffffff", "#399AF4"],
        // 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: ["62%", "80%"],
            avoidLabelOverlap: false,
            // hoverAnimation: false,
            label: {
              // normal: {
              show: false,
              position: "center",
              // },
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
            },
            data: [
              {
                value: 13,
                name: "未完成",
              },
              {
                value: 87,
                name: "完成",
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    // if (!this.options) {
    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[1] = this.color;
      }
      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;
}
.text {
  position: absolute;
  width: 80px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -10px;
  text-align: center;
  color: #399af4;

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