水波球的使用

//组件
<!--水球比例饼图  -->
<template>
  <div ref="main" :style="{ height: height, width: width }" style="overflow:hidden" />
</template>

<script>
import { number } from "echarts";
import "echarts-liquidfill";
export default {
  props: {
    dataOption: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    rotate: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      setTimeout(function () {
        that.initChart();
      }, 500);
    });
  },
  watch: {
    dataOption: {
      deep: true,
      handler(val) {
        let that = this;
        setTimeout(function () {
          that.initChart();
        }, 500);
      },
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    Pie() {
      let dataArr = [];
      for (var i = 0; i < 150; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: this.dataOption.borderColor,
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      return dataArr;
    },
    initChart() {
      let that = this;
      this.chart = this.$echarts.init(this.$refs.main);
      this.chart.setOption({
        title: {
          show: true,
          subtext: this.dataOption.subtextData
            ? this.dataOption.subtextData
            : "- 吨",
          text: this.dataOption.textData
            ? this.dataOption.textData
            : "暂无数据", //主标题
          x: "50%",
          y: "30%",
          padding: [20, 0, 0, 0],
          itemGap: 46, // 调整主副标题之间的间距
          textStyle: {
            //主标题样式
            fontSize: 32,
            fontWeight: "bold",
            color: "#fff",
          },
          subtextStyle: {
            fontSize: 20,
            color: "#fff",
          },
          textAlign: "center",
        },
        series: [
          {
            // value: 50, //  内容 配合formatter
            type: "liquidFill",
            radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
            center: ["50%", "50%"],
            data: [
              this.dataOption.dataVal ? this.dataOption.dataVal : "-100", //为了使无数据时没有波浪纹，所以无数据时就加一个负值，就看不到了
              {
                value: this.dataOption.dataVal
                  ? this.dataOption.dataVal
                  : "-100", //为了使无数据时没有波浪纹，所以无数据时就加一个负值，就看不到了
                direction: "left", //波浪方向
              },
            ], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "rgba(" + this.dataOption.bgColor + ",0.3)", // 球体本景色
            },
            amplitude: "6  %", //波浪的振幅
            // 修改波浪颜色
            // color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: this.dataOption.wavyBottomColor, //波浪纹渐变 - 下方颜色
                  },
                  {
                    offset: 0,
                    color: this.dataOption.wavyTopColor, //波浪纹渐变 - 上方颜色
                  },
                ],
                globalCoord: false,
              },
            ],
            itemStyle: {
              opacity: 1,
              shadowColor: this.dataOption.dataVal
                ? "rgba(0, 0, 0, 0.15)"
                : "rgba(0, 0, 0, 0)", //水波球波浪纹的阴影，//为了使无数据时没有阴影，所以无数据时更换阴影值
            },
            label: {
              show: false,
              // normal: {
              //   // formatter: 0.87 * 100 + '\n%',
              //   // formatter: 0.6 * 100 + "\n{d|%}",
              //   formatter: function (params) {
              //     return (
              //       params.value * 100 +
              //       "%" +
              //       "\n\n\n" +
              //       that.dataOption.dataVal
              //     );
              //   },
              //   rich: {
              //     d: {
              //       fontSize: 36,
              //     },
              //   },
              //   textStyle: {
              //     fontSize: 48,
              //     color: "#fff",
              //   },
              // },
            },
            outline: {
              show: false,
            },
          },
          {
            type: "pie",
            z: 1,
            center: ["50%", "50%"],
            radius: ["72%", "73.5%"], // 控制外圈圆的粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 500,
                labelLine: {
                  show: false,
                },
                itemStyle: {
                  color: this.dataOption.borderColor,
                },
                emphasis: {
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: this.dataOption.borderColor,
                  },
                },
              },
            ],
          },
          {
            //外发光
            type: "pie",
            z: 1,
            zlevel: -1,
            radius: ["70%", "90.5%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                borderWidth: 20,
                color: "rgba(" + this.dataOption.bgColor + ",0.07)",
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
          {
            //底层外发光
            type: "pie",
            z: 1,
            zlevel: -2,
            radius: ["70%", "100%"],
            center: ["50%", "50%"],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                borderWidth: 20,
                color: "rgba(" + this.dataOption.bgColor + ",.055)",
              },
            },
            label: {
              show: false,
            },
            data: [100],
          },
          {
            type: "pie",
            zlevel: 0,
            silent: true,
            radius: ["78%", "80%"],
            z: 1,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: that.Pie(),
          },
        ],
      });
    },
  },
};
</script>

//使用
项目中安装echarts-liquidfill
npm install echarts-liquidfill
版本号
"echarts":"5.4.6"
"echarts-liquidfill": "^3.1.0"

<waterBalloonRatioChart v-else :height="'246px'" :dataOption="dataOption"></waterBalloonRatioChart>
import waterBalloonRatioChart from "@/components/charts/waterBalloonRatioChart.vue";
components: { waterBalloonRatioChart },
dataOption: {
        bgColor: "0, 146, 63", //球体的本景色以及外发光两层的颜色
        wavyTopColor: "#35FBC5", 波浪纹渐变 - 上方颜色
        wavyBottomColor: "#41DE23", //波浪纹渐变 - 下方颜色
        borderColor: "#70C422", //两条边框线的颜色（虚线和是先）
        dataVal: 0.3, //数据值
        textData: "30%", //上方数据值
        subtextData: "1.2吨", //下方数据值
      },