echarts水球图liquidfill在vue中的使用

echarts-liquidfill虽然是echarts的插件，但是并不在echarts的内置组件中，而且官方文档里也没有，因此需要自己安装一下。
npm 或者cnpm都行，我用cnpm，淘宝镜像安装快一些。@后面的是版本号，-S和–save都是保存的意思。如果不写版本号，会默认安装最新版本。
如果你echarts也没安装过，就先安装echarts。

cnpm install echarts@4.9.0 -S

如果以前已经安装了echarts，就再安装一个echarts-liquidfill，这里要注意echarts和echarts-liquidfill的版本的对应关系，如果版本不适配，会报一些奇奇怪怪的错误，所以我这里安装的是4.9.0对应2.0.6，亲测是可以的。

npm install echarts-liquidfill@2.0.6 --save

在vue文件中
首先在template中创建一个div，作为你这个水球图的画布

<template>
  <div ref='liquidEchart' class="liquidData"></div>
</template>

对应可以在style里写一点css，定义画布的大小之类的

<style scoped>
.liquidData {
  width: 500px;
  height: 400px;
}
</style>

在script中定义一些数据

<script>
import 'echarts-liquidfill'; // 引入水球图的组件
export default {
  name: '',
  data () {
    return {
      chartsLiquid: '', // 初始化图表
    };
  },
  mounted () {
    this.initLiquidEchart();
  },
  methods: {
    initLiquidEchart () {
      setTimeout(() => {
        this.chartsLiquid = this.$echarts.init(this.$refs['liquidEchart'])
        // 把配置和数据放这里
        this.chartsLiquid.setOption({
          series: [{
            type: 'liquidFill',
            data: [0.52, 0.17], // 两条水波
          }]
        });
      }, 50)
    }
  },
};
</script>

这里因为我已经全局引入了echarts，所以直接使用this.$echarts就行了
全局引入可以在main.js中进行

// 这里是main.js文件
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

这个就是比较基础的水球图，大概长这样：有两条水波，显示第一个水波的数字。也就是data数组里第一个数字。

注意：要想让水球好看，数字最好的从大到小排列，因为后面的数字画出来的水波会覆盖前一个水波的波纹，所以如果我上面的数据不是

data: [0.52, 0.17]

而是

data: [0.17, 0.52]

那图表就会变成这样

0.52的水波盖住了0.17的水波，导致了0.17的看不太清楚。