vue2+echarts实现水球图

<template>
  <div ref="chart" style="width: 400px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill';

export default {
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    // 初始化 ECharts 实例
    this.chartInstance = echarts.init(this.$refs.chart);

    // 调用方法生成水球图
    this.renderLiquidFillChart();
  },
  methods: {
    renderLiquidFillChart() {
      // 使用 ECharts 生成水球图
      this.chartInstance.setOption({
        series: [{
          type: 'liquidFill',
          radius: '70%',
          center: ['50%', '50%'],
          data: [{
            value: 0.6, // 初始水位，范围 0~1
            itemStyle: {
              color: '#1E90FF' // 水球颜色
            }
          }],
          outline: {
            show: false // 不显示外轮廓
          },
          backgroundStyle: {
            color: '#F0F0F0' // 背景颜色
          },
          label: {
            normal: {
              formatter: '{a|Completion Rate}\n{b|60%}', // 文字标签内容
              rich: {
                a: {
                  fontSize: 14,
                  color: '#555'
                },
                b: {
                  fontSize: 24,
                  color: '#1E90FF'
                }
              },
              position: ['50%', '50%'],
              align: 'center',
              verticalAlign: 'middle'
            }
          }
        }]
      });
    }
  }
};
</script>

<style>
/* 可选：样式 */
</style>

注意:echarts与liquidfill有版本要求

"echarts-liquidfill": "^3.0.0",
"element-ui": "^2.15.14",