利用ECharts绘制各式酷炫水球图

本文来自于ECharts官方博客。
原文地址：ECharts 水球图教程
责编：陈秋歌，关注前端开发等领域，寻求报道或者投稿请发邮件至chenqg#csdn.net。

水球图是一种适合于展现单个百分比数据的图表类型，ECharts 的水球图插件使你能够通过非常简单的配置，实现酷炫的数据展示效果。

先来个酷炫效果看看：效果+代码 。

那么，今天我们就一起来学习一下，如何使用 ECharts 水球图。

第一步：引入 JavaScript 文件

ECharts 的水球图是一个插件类型的图表。这意味着，在 ECharts 官网下载的完整版本将不包含水球图——这保证了不需要使用该图表的用户能够获得一个尽可能小的代码版本。使用时，需要在引入 echarts.js 之后，另外引入水球图对应的 echarts-liquidfill.js，可以在 GitHub 找到最新版本。

<script src="echarts.js"></script>
<script src="echarts-liquidfill.js"></script>

<script>
// 使用水球图的代码
</script>

第二步：指定 DOM 元素作为图表容器

和创建 ECharts 的其他图表一样，我们需要指定 DOM 中的一个有高度和宽度的元素作为图表的容器——也就是图表将会绘制的位置。

<div id="liquidfill-chart" style="width=100%; height = 400px"></div>

传入该 DOM 元素，使用 ECharts 初始化图表：

var chart = echarts.init(document.getElementById('liquidfill-chart'));

第三步：设置水球图参数

和其他 ECharts 图表一样，水球图提供将系列的 type 指定为 ‘liquidFill’（注意大小写）来表明这是