fire-mh/src/components/liquid-fill/index.vue

<template>
  <div ref="echartD"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-liquidfill";
export default {
  props: {
    dataMap: { type: Number, default: () => 0 },
  },
  data() {
    return {
      // wordcloud:wordcloud
    };
  },
  watch: {
    dataMap(val) {
      this.getData(val);
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let dataMap = [this.dataMap, this.dataMap, this.dataMap, this.dataMap];
      echarts.init(this.$refs.echartD).setOption({
        series: [
          {
            type: "liquidFill",
            data: dataMap,
            direction: "left",
            radius: "75%",
            center: ["50%", "50%"],
            backgroundStyle: {
              borderWidth: 5,
              borderColor: "#73FBFD",
              color: "rgb(255,255,255,0)",
            },
            label: {
              normal: {
                formatter: "",
                fontSize: "0.175rem",
                fontFamily: "syhtN",
              },
            },
            outline: {
              itemStyle: {
                borderColor: "#034748",
                borderWidth: 13,
              },
              borderDistance: 0,
            },
          },
        ],
      });
    },
    resize() {
      echarts.init(this.$refs.echartD).resize();
    },
  },
};
</script>

<style scoped></style>