VUE实现水球图

由于Echarts官网没有给出水波球案例，选择别的技术方案；使用的是v-charts， v-charts = Vue+ echarts

相关具体文档可以查看：v-charts

简单记录一下使用过程
效果如图：

导入echarts依赖

	npm i v-charts echarts -S

在main.js中添加：

import 'echarts-liquidfill' // 水波球
import VCharts from 'v-charts'

Vue.use(VCharts)

在VUE页面中添加：

<div style="width: 100%;height: 100%;margin: auto">
	<ve-liquidfill :data="chartData" :settings="serviceChartSettings" style="height:100%;width:100%;margin-top: auto">ve-liquidfill>
div>

添加配置项：

      chartData: {
        columns: ['name', 'percent'],
        rows: [
          {
            name: '',
            percent: 0.5  //球里的水也就是图中红色部分的占比；因为我要的是这个动态背景，所以直接写死了
          }
        ]
      },
serviceChartSettings: {
        seriesMap: [
          {
            label: {
              // show: false,
              fontSize: 20,
              color: '#ffffff',
              insideColor: '#ffffff',
              position: ['50%', '50%'],
              formatter: function () {
                return '17\n\n\n服务能力' //这个可以配置水波球里的显示内容
              }
            },
            center: ['50%', '25%'], //调整位置
            radius: '80%',
            color: ['#F75169'],
            waveAnimation: 10,
            amplitude: 10, // 振幅
            // 设置背景色
            backgroundStyle: {
              borderColor: 'transparent',
              borderWidth: 1,
              shadowColor: 'transparent',
              shadowBlur: 20,
              opacity: '100%',
              // 环状里边的背景色
              color: 'transparent'
            },
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                borderColor: '#F75169',
                borderWidth: 2
              }
            }
          }
        ]
      }