echarts实现水滴效果

1.安装依赖

npm install echarts@5.2.0 --save-dev

npm install echarts-liquidfill@3.0.0 --save-dev
 

完整的例子：

<template>
 <div id="demoChart"></div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
   data(){
      return {
         demoChart:null   
      }  
  },
  mounted(){
    this.initChart();
  },
  methods:{
      //初始化chart
      initChart(){
        let option = {
        series: [{
        type: 'liquidFill',
        data: [0.6],
        radius:'90%',
        center: ['50%', '50%'],
        outline: {
            show: false,    //是否显示外圈线
        },
        shape:"path://M505.668923 74.919385c-17.142154 19.282708-34.282338 44.994954-100.688738 149.962831-32.143754 53.5552-59.984738 102.829292-85.698954 152.103385-49.274092 96.407631-98.548185 227.089723-98.548185 310.636308 2.140554 72.847754 29.993354 134.973046 85.698954 186.387692C364.266338 925.426215 430.682585 951.138462 509.950031 951.138462s147.822277-25.712246 203.52-79.267446c57.844185-53.565046 85.698954-115.688369 83.5584-188.526277C797.026462 462.684554 503.518523 72.778831 505.668923 74.919385z", //svg路径
        backgroundStyle:{
          color:'#3A63CB'
        },
        itemStyle: {
            opacity: 0.95,   //透明度
            color:'rgba(144, 194, 255, 0.6)',
            // shadowBlur: 50,
            // shadowColor: 'rgba(144, 194, 255, 0.6)'
        },
        emphasis: {
          itemStyle: {
              opacity: 0.8,
              color:'rgba(144, 194, 255, 0.6)',
          }
        },
        label: {
          normal: {
            //fontSize:80    //这里也可以设置
            textStyle: {
              fontSize: 12 //修改字体大小
            }
          }
        }
    }]
  }
         this.demoChart =             
         echarts.init(document.getElementById('demoChart'))
         this.demoChart.setOption(option)
         window.addEventListener('resize', () => {
           this.demoChart.resize()
         })
      }    
  }

}
</script>
<style>
#demoChart{width:200px;height:200px}
</style>