echarts水球图，仅供参考

安装

npm install echarts
npm install echarts-liquidfill

全局引入

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

代码实现

<template>
  <div :class="className" :style="{ minHeight: height, width: width }"/>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Array,
      default: () => [0]
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '85px'
    },
    barWidth: {
      type: Number,
      default: 34
    },
    labelShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  created() {
  },
  watch: {
    chartData() {
      this.initChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        title: {
          text: '未处理',
          left: 'center',
          top: 28,
          textStyle: {
            color: '#ffffff',
            fontWeight: '500',
            fontSize: 14
          }
        },
        series: [
          {
            name: '水球图',
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '55%'],
            waveAnimation: 10, // 动画时长
            amplitude: 3, // 振幅
            data: this.chartData,
            label: {
              normal: {
                position: ['50%', '70%'],
                color: '#FFFFFF', //中间字体的颜色
                textStyle: {
                  fontSize: 14,
                  fontWeight: 500
                }
              }
            },

            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#1890FF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1EE7E7' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderColor: '#35A6BB', //外边的圈的颜色
                borderWidth: 2
              }
            },
            backgroundStyle: {
              color: '#02427D'
            }
          }
        ]
      })
    }
  }
}
</script>