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

最新推荐文章于 2025-03-12 17:32:07 发布

HQBCK

最新推荐文章于 2025-03-12 17:32:07 发布

阅读量563

点赞数 2

文章标签： echarts 前端 vue.js

本文链接：https://blog.youkuaiyun.com/HQBCK/article/details/137289684

版权

效果图

图片资源

下载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.myCha