公司有个平台有改版的打算，UI 出了首页的设计稿，我看了下，大致构思了一下，打算用 vue 和 Element-UI 来写。前阵子刚忙完，这几天比较空，我就看着 UI 稿在想实现方式，其中一个是水球图。这篇先记录一下 vue-cli 中生成水球图的方法。

首先npm包下载必不可少：

//安装 ECharts
npm install echarts
//安装 水球图插件
npm install echarts-liquidfill

随后在.vue文件中引入

import echarts from "echarts";
import "echarts-liquidfill/src/liquidFill.js";

之后就该怎么用就怎么用。可以参考 官方例子 ，也可以参考 echarts-liquidfill 的 github 文档。