vue echarts 水波图 占比

实现效果：

需要提前下载 echarts-liquidfill echarts没有这个插件

<template>
  <div id="waterChart" style="flex: 1; height: 150px; width: 100%"></div>
</template>
<script>
import { getNoteMatters } from '@/api/government';
export default {
  data() {
    return {
      durationData: [
      {name: "提前办结率", value: 0.9}
       {name: "按时办结率", value: 1}
       {name: "超时办结率", value: 0}],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
    // 这里this.$echarts相当于echarts  vue3.0不支持直接引入echarts 需要在全局挂载
    // import * as echarts from 'echarts';
    // import 'echarts-liquidfill';
    // app.config.globalProperties.$echarts = echarts;
      var myChart = this.$echarts.init(document.getElementById('waterChart'));
      const option = {
        title: [
          {
            text: this.durationData[0].name,
            left: '18%',
            bottom: '0%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontSize: 16,
              fontFamily: 'TencentSans',
            },
          },
          {
            text: this.durationData[1].name,
            left: '49%',
            bottom: '0%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontSize: 16,
              fontFamily: 'TencentSans',
            },
          },
          {
            text: this.durationData[2].name,
            left: '79%',
            bottom: '0%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontSize: 16,
              fontFamily: 'TencentSans',
            },
          },
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '60%',
            color: ['rgba(62, 249, 198, 1)'],
            center: ['20%', '45%'],
            data: [this.durationData[0].value],
            backgroundStyle: {
              borderWidth: 2,
              borderColor: 'rgba(62, 249, 198, 1)',
              color: 'rgb(0,23,74)',
            },
            outline: {
              itemStyle: {
                borderWidth: 3,
                borderColor: 'rgba(62, 249, 198, 1)',
                borderType: 'dotted',
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: 'rgba(62, 249, 198, 1)',
                  fontFamily: 'TencentSans',
                },
              },
            },
          },
          {
            type: 'liquidFill',
            radius: '60%',
            color: ['rgba(12, 176, 230, 1)'],
            center: ['50%', '45%'],
            data: [this.durationData[1].value],
            backgroundStyle: {
              borderWidth: 2,
              borderColor: 'rgba(12, 176, 230, 1)',
              color: 'rgb(0,23,74)',
            },
            outline: {
              itemStyle: {
                borderWidth: 3,
                borderColor: 'rgba(12, 176, 230, 1)',
                borderType: 'dotted',
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: '#e6e6e6',
                  fontFamily: 'TencentSans',
                },
              },
            },
          },
          {
            type: 'liquidFill',
            radius: '60%',
            color: ['rgb(255,191,67)'],
            center: ['80%', '45%'],
            data: [this.durationData[2].value],
            backgroundStyle: {
              borderWidth: 2,
              borderColor: 'rgb(255,191,67)',
              color: 'rgb(0,23,74)',
            },
            outline: {
              itemStyle: {
                borderWidth: 3,
                borderColor: 'rgb(255,191,67)',
                borderType: 'dotted',
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 20,
                  color: '#e6e6e6',
                  fontFamily: 'TencentSans',
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    },
  },
};
</script>