水滴球实现echarts，水滴球不出效果解决

这个图需要下载对应的插件

1：

npm install --save echarts-liquidfill@对应的版本号

 注：eacharts需要和水滴图的版本号对应 ！！！过高或过低都没效果

目前已知可生效版本：

一：

"echarts": "^5.3.3",

"echarts-liquidfill": "^3.1.0"

二：

"echarts": "^4.2.1",

"echarts-liquidfill": "^2.0.2"

如果插件下载失败可手动，操作如下：

https://download.csdn.net/download/iseyre/86747515https://download.csdn.net/download/iseyre/86747515

子组件：

注：记得引入：

import * as echarts from "echarts";
import 'echarts-liquidfill/src/liquidFill.js';

<template>
    <div class='box'   :id='id'></div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-liquidfill/src/liquidFill.js';
export default {
    // num是距离colors是颜色ratioColor是水波纹颜色
    props:['id','num','nums','colors','ratioColor'],
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.getwaterchart();
  },
  methods: {
    getwaterchart() {
    //   let myChart = echarts.init(this.$refs.titref);
     const myChart = echarts.init(document.getElementById(this.id))
      var ratio = 50; //占比数值  总数为100
      var ratioLength = 3; //波浪数量
      var ratioArr = [];
      // var ratioColor = ["#1991d2", "#3831f3", "#1991d2"]; //波浪内颜色
      var ratioColor = this.ratioColor; //波浪内颜色

      for (var ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
        ratioArr.push(ratio / 100);
      }
      var option = {
        // backgroundColor: "#003366",
        title: {
          text: ratio + "%",
          textStyle: {
            // fontSize: 50,
            fontSize: 30,
            fontFamily: "Microsoft Yahei",
            fontWeight: "bold",
            color: "#fff"
          },
        //   x: "center",
          x:this.nums, 
        //   x:'6%', 

          y: "center"
        },
        series: [
          {
            type: "liquidFill",
            radius: "45%",
            // center: ["50%", "50%"],
            center: [this.num, "50%"],

            color: ratioColor,
            data: ratioArr,
            backgroundStyle: {
              // borderWidth: 1,
              // color: "#1f2c52"
              // 内圆颜色
              color: this.colors

            },
            label: {
              normal: {
                formatter: ""
              }
            },
            outline: {
              show: false
            }
          },
          {
            //细的外圈
            type: "pie",
            // center: ["50%", "50%"],
            // center: [this.num, "50%"],

            // // radius: ["49%", "50%"],
            // radius: ["49%", "50%"],
             center: [this.num, "50%"],
            radius: ["54%", "50%"],

            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 50,
                labelLine: {
                  show: false
                },
                itemStyle: {
                //   color: "transparent"
                  // color: "#112833",
                  // backgroundColor:'#112833'
                  color:this.colors,
                  backgroundColor:this.colors

                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "transparent"
                  }
                }
              },

               { //画剩余的刻度圆环
                    name: "",
                    value: 80,
                    itemStyle: {
                        color: '#9b9c9e82'
                    },
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            color: '#9b9c9e82'
                        },
                    }
                }
            ]
          },
          {
            //粗的外圈
            type: "pie",
            // center: ["50%", "50%"],
            // center: [this.num, "50%"],

            // // radius: ["50%", "50%"],
            // radius: ["58%", "51%"],
             center: [this.num, "50%"],
            radius: ["50%", "58%"],

            hoverAnimation: false,
            zlevel: 2,
            data: [
              {
                name: "",
                value: 50,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      // color: "#00e2fe"
                      color:this.colors
                    },
                    {
                      offset: 1,
                      // color: "#0707ff"
                      color:this.colors
                    }
                  ])
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        // color: "#00e2fe"
                        color: this.colors

                      },
                      {
                        offset: 1,
                        // color: "#0707ff"
                        color: this.colors

                      }
                    ])
                  }
                }
              },

              {
                //画剩余的刻度圆环
                name: "",
                value: 50,
                itemStyle: {
                  color: "transparent"
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "transparent"
                  }
                }
              }
            ]
          }
        ]
      };
      window.addEventListener("resize", () => echart.resize(), false);
      option && myChart.setOption(option);
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

然后父组件引入调用就ok