echarts实现水球图，并添加背景图片

 效果图

 

图片资源

 

下载echarts及echarts-liquidfill，我这里使用的是echarts 4.9.0 和 echarts-liquidfill 2.0.6

npm i echarts
npm i echarts-liquidfill

完整代码

<template>
  <div class="page">
    <div class="liquidFill" id="liquidFill"></div>
  </div>
</template>

<script>
import "echarts-liquidfill";
import liquidFillBg from "@/assets/images/liquidFillBg.png";
export default {
  data() {
    return {
      liquidFillValue: 0.2,
      myChart: null,
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.myChart = this.$echarts.init(document.getElementById("liquidFill"));
      let option = {
        graphic: {
          type: "image",
          id: "background",
          left: "center",
          top: "center",
          z: -10,
          bounding: "raw",
          origin: [200, 200],
          style: {
            image: liquidFillBg, // 背景图片地址
            width: 210,
            height: 210,
            opacity: 1,
          },
        },
        polar: {
          radius: "100%",
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          clockwise: false,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: "category",
          show: false,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            type: "liquidFill",
            waveAnimation: true,
            radius: "85%",
            center: ["50%", "50%"],
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(33, 126, 214)",
                  },
                  {
                    offset: 1,
                    color: "rgb(15, 64, 117)",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              textStyle: {
                color: "#fff",
                fontSize: 18,
              },
            },
            data: [this.liquidFillValue],
            backgroundStyle: {
              color: "transparent",
            },
            outline: {
              show: false,
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  height: 100vh;
  background-color: #000;
  .liquidFill {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
}
</style>