echarts-liquidfill水波球图表

  //  "echarts": "5.4.0",
  //  "echarts-liquidfill": "^3.1.0"

import * as echarts from "echarts"
import "echarts-liquidfill"


      data = 50
      this.chartFunc("footer4", {
        title: {
          text: "水波球",
          left: "5%",
          top: "5%",
          textStyle: {
            fontSize: 22,
            fontWeight: "bold",
            color: "#333333"
          }},
        series: [
          {
            type: "liquidFill",
            radius: "75%",
            center: ["50%", "56%"],
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(207, 213, 238, 1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(112, 129, 202, 1)"
                  }
                ],
                globalCoord: false
              }
            ],
            data: [(data || 0) / 100, (data || 0) / 100], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: "RGBA(51, 66, 127, 0.2)"
            },
            label: {
              normal: {
                formatter: function(params) {
                  return data
                },
                textStyle: {
                  fontSize: 50,
                  color: "#fff"
                }
              }
            },
            outline: {
              // show: false
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: "#112165"
              }
            }
          }]
      })

makeapie echarts社区图表可视化案例