echarts 球形水波_ECharts 水球图教程

ECharts 水球图教程

羡辙

2017-02-21

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

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

第一步：引入 JavaScript 文件

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

1

2

3

4

5

6

// 使用水球图的代码

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

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

1

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

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

第三步：设置水球图参数

和其他 ECharts 图表一样，水球图提供将系列的 type 指定为 'liquidFill'(注意大小写)来表明这是一个水球图类型。

一个简单的配置项可以是：

1

2

3

4

5

6

7var option = {

series: [{

type: 'liquidFill',

data: [0.6, 0.5, 0.4, 0.3]

}]

};

chart.setOption(option);

这样，就能得到文章开头的水球图效果了：

如果发现图表没有正确显示，你可以检查以下几种可能：

JS 文件是否正确加载；

echarts 变量是否存在；

控制台是否报错(如果报错显示 liquidFill 系列不存在，则很可能 ec