水滴图

需要引进

<script src="./js/echarts.min.js"></script>
<script src="./js/echarts-liquidfill.min.js"></script>

直接上代码

shuidi(id, color, data) {
      let water = echarts.init(document.getElementById(id))
      let option = {
          series: [{
              type: 'liquidFill',
              radius: '60%',
              data: [data], //datat
              center: ['50%', '60%'],
              outline: {
                  show: false,
              },
              backgroundStyle: {
                  borderColor: 'transparent',
                  borderWidth: 1,
                  shadowColor: 'rgba(0, 0, 0, 0.4)',
                  shadowBlur: 20,
                  color: "#084b8a"
              },
              itemStyle: {
                  normal: {
                      color: color
                  }
              },
              label: {
                  normal: {
                      position: ['50%', '30%'],
                      color: "#fff",
                      textStyle: {
                          fontSize: 30,
                      }
                  }
              }
          }]
      };
      water.setOption(option)
  },
},