[JavaScript知识库]e-charts水球图，Liquid Fill Chart

echarts-liquidfill 是 Echarts 的一个插件，所以需要额外的npm引入

npm install echarts-liquidfill

页面中导入 ：

import "echarts-liquidfill";

?全部代码：

<template>
  <div v-allSafeArea class="page">
    <Header :isBack="false" />
    <div ref="container" class="container">
      <div ref="content" class="content">
        <div ref="liquidFill" class="charts-view"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import * as echarts from "echarts";
import "echarts-liquidfill";

@Component
export default class My extends Vue {
  mounted() {
    this.liquidFillInit();
  }
  liquidFillInit() {
    const chartView = echarts.init((this.$refs as any).liquidFill);
    const value = 0.6;
    const option = {
      title: [
        {
          text: (value * 100).toFixed(0) + "%",
          left: "50%",
          top: "45%",
          textAlign: "center",
          textStyle: {
            fontSize: "36",
            fontWeight: "400",
            color: "#8b8d90",
            textAlign: "center",
            textBorderColor: "rgba(0, 0, 0, 0)",
            textShadowColor: "#000",
            textShadowBlur: "0",
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
        },
      ],
      backgroundColor: "rgba(0, 0, 0, 0)", // 背景颜色
      series: [
        {
          name: "温度", // 系列名称
          type: "liquidFill",
          data: [
            {
              value: value,
              direction: "left",
              itemStyle: {
                color: "pink",
                opacity: 0.8,
              },
            },
            {
              value: value,
              itemStyle: {
                color: "pink", // 水波颜色
                opacity: 0.6,
              },
            },
          ],
          center: ["50%", "50%"],
          radius: "80%",
          amplitude: 15, // 振幅
          direction: "right", // 波移动的方向 left 从右往左 right 从左往右
          animationDuration: 3600, // 初始动画的时长
          label: {
            // 图表内部字体
            normal: {
              formatter: ``,
            },
          },
          outline: {
            // 外轮廓
            show: false,
          },
          backgroundStyle: {
            // 图表背景样式
            borderColor: "transparent", // 背景颜色
            borderWidth: 1, // 图表的边框宽度
            shadowColor: "rgba(0, 0, 0, 0.4)", // 阴影颜色
            shadowBlur: 20, // 阴影模糊
          },
          // 图表的形状
          // shape:
          //   "path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z",
        },
      ],
    };
    chartView.setOption(option);
    // 屏幕重置大小
    window.addEventListener("resize", () => {
      chartView.resize();
    });
  }
}
</script>

<style lang="scss" scoped>
.page {
  .container {
    .charts-view {
      height: 360px;
      width: 100%;
    }
  }
}
</style>