echarts 水球图

转载编辑。 原作者链接地址：https://zhuanlan.zhihu.com/p/25353670?group_id=827655855632715776

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

第一步：引入 JavaScript 文件

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

 

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

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

定义式样

<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
background: #F1F7FF;
}

.chart {
width: 100%;
height: 500px;
float: left;
}

</style>

定义DOM对象

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

</div>

 

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

var chart = echarts.init(document.getElementsByClassName('chart'));

第三步：设置水球图参数

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

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

var option = {
    series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3] }] }; chart.setOption(option); 

这样，就能得到水球图效果了：

 

 

水球图支持非常高度定制化的需求，包括颜色（color）、大小（radius）、波的振幅（amplitude）、波长（waveLength）、相位（phase）、周期（period）、移动方向（direction）、形状（shape）、动画（waveAnimation）等等，完整的配置项参数参见水球图 API。文档有针对每个配置项的详细说明，这里我们来介绍一些重要的参数。

 

direction 设为 'left' 或 'right'，指定波浪的移动方向，或者设为 'none' 表示静止。

shape 设置：除了默认的圆形（'circle'）水球图，还可以将 shape 设置为 ECharts Symbol 的其他类型：'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。甚至，使用 'path://...' 的形式，为其指定一个 SVG 路径，得到非常酷炫的效果

 data 中的一项默认是一个数字，而在需要做特殊定制的数据中，我们将其设置为一个对象，value 值是原先的数字，其他配置项将覆盖系列配置项的值。

以下代码将第二条水波设为红色，并且改变其移动方向。

var option = {
    series: [{ type: 'liquidFill', data: [0.6, { value: 0.5, direction: 'left', itemStyle: { normal: { color: 'red' } } }, 0.4, 0.3] }] };


水球图中间的文字有个酷炫的效果，在水波和背景前的文字颜色是不同的，可以通过 insideColor 设置水波处的文字颜色，color 设置背景处的文字颜色。

var option = {
    series: [{ type: 'liquidFill', radius: '80%', data: [0.5, 0.45, 0.4, 0.3], label: { normal: { textStyle: { color: 'red', insideColor: 'yellow', fontSize: 50 } } } }] };

图表中间默认显示百分比数据，如果你需要将其设置为其他文字内容，可以通过 formatter 指定，这与 ECharts 的其他格式化函数也是相同的。

formatter 可以是一个字符串，其中 '{a}'、'{b}'、'{c}' 会被分别替换成系列名称、数据名称、数据值。

如：

var option = {
    series: [{ type: 'liquidFill', name: 'Liquid Fill', data: [{ name: 'First Data', value: 0.6 }, 0.5, 0.4, 0.3], label: { normal: { formatter: '{a}\n{b}\nValue: {c}', textStyle: { fontSize: 28 } } } }] }; 

 

此外，formatter 也可以是一个函数，以下代码能得到和上面字符串形式同样的效果。

formatter: function(param) { return param.seriesName + '\n' + param.name + '\n' + 'Value:' + param.value; }

更完整的配置项请参考 GitHub 上详细的文档，或者到 ECharts Gallery 上查看其它水球图作品。

转载于:https://www.cnblogs.com/chenrongping/p/6599795.html