vue实现水滴球

在已经引入好echarts的前提下进行以下步骤
一、展示效果

二、使用步骤

1. 引入依赖
   执行命令npm install echarts-liquidfill@3.0.0 --save
2. 页面引用使用

<template>
  <div class="charts">
    <div id="demo1Chart2" :style="{width: '500px', height: '300px'}"></div>
  </div>
</template>

<script>
require("echarts-liquidfill");
export default {
  data () {
    return {
    };
  },
  components: {
  },
  computed: {},
  mounted() {
    this.drowWorldCloud()
  },
  created() {},
  methods: {
    drowWorldCloud(){
      let myChart2 = this.$echarts.init(document.getElementById('demo1Chart2'))
      myChart2.setOption({
	    series: [
	      {
	        type: "liquidFill",
	        radius: '60%',
	        center: ['70%', '50%'],
	        data: [{
	          value: data,
	          direction: 'left',
	        }],
	       color: [{
	          type: 'linear',
	          x: 0,
	          y: 1,
	          x2: 0,
	          y2: 0,
	          colorStops: [{
	            offset: 0,
	            color: ['white'], // 0% 处的颜色
	          }, {
	            offset: 1,
	            color: ['#369f8c'], // 100% 处的颜色
	          }],
	          global: false // 缺省为 false
	        }],
	        outline: { // 是否显示外圈
	          show: true,
	          borderDistance: 0, //边框距离
	          itemStyle: {
	            borderWidth: 1,
	            borderColor: '#369f8c',
	
	          }
	        },
	        label: {
	          color: '#369f8c',//和边框颜色同色
	          normal: {
	            textStyle: {
	              fontSize: 35,
	              color: '#369f8c',
	            },
	            position: ['-100%', '35%'],
	          }
	        }
	      },
	    ],
	  });
    }
  }
}
</script>
<style scoped>
  .charts{
      width: 1010px;
      height: 650px;
      display: flex;
      flex: 1;
      flex-wrap: wrap;
    }
  #demo1Chart2{
    border: solid 1px #eea7ba;
  }
</style>