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的看不太清楚。