ECharts 水球图

水球图是一种合适于展现单个百分比数据的图表典范，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’（注意轻重写）来标明这是一个水球图典范。

一个简便的设置项可以是：

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


如此，就能取得水球图后果了：

假如发觉图表没有准确体现，你可以反省以下几种约莫：

JS 文件对否准确加载；echarts 变量对否存在；控制台对否报错（假如报错体现 liquidFill 系列不存在，则很约莫 echarts-liquidfill.js 没有准确加载）；DOM 元素在 echarts.init 的时分对否有高度和宽度。

可以发觉，在外表的代码中，我们只指定了图表典范为 ‘liquidFill’，以及把数据设置为 [0.6, 0.5, 0.4, 0.3]（对应天生的四个波浪），而其他的参数都是预设的。

即使不设置很多参数，预设的参数也可以使你取得一个优雅的水球图后果。而假如有特定的需求，ECharts 水球图又支持十分高度定制的后果。底下我们具体分析怎样定制化你的水球图。

第四步：定制化水球图

水球图支持十分高度定制化的需求，包含颜色（color）、轻重（radius）、波的振幅（amplitude）、波长（waveLength）、相位（phase）、周期（period）、挪动朝向（direction）、外形（shape）、动画（waveAnimation）等等，完备的设置项参数参见水球图 API。文档有针对每个设置项的具体分析，这里我们来先容一些紧张的参数。

外形与动画

除了默许的圆形（’circle’）水球图，还可以将 shape 设置为 ECharts Symbol 的其他典范：’rect’、’roundRect’、’triangle’、’diamond’、’pin’、’arrow’。乃至，使用 ‘path://…’ 的情势，为其指定一个 SVG 途径，取得十分酷炫的后果：

经过将 direction 设为 ‘left’ 或 ‘right’，指定波浪的挪动朝向，大概设为 ‘none’ 表现运动。

外表的例子完备的设置项代码为：

// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '40%',
shape: 'diamond',
center: ['25%', '25%']
}, {
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
direction: 'left',
radius: '40%',
shape: 'rect',
center: ['75%', '25%']
}, {
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '40%',
shape: 'roundRect',
center: ['25%', '75%'],
backgroundStyle: {
borderColor: '#156ACF',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
outline: {
show: false
},
waveAnimation: false, // 克制支配动摇
}, {
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '50%',
shape: 'pin',
center: ['75%', '75%'],
amplitude: 0,
waveAnimation: false,
outline: {
show: false
},
backgroundStyle: {
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},

}]
};


单个波的设置

除了对一切水波做的设置之外，每个水波可以举行单独的设置。和 ECharts 的其他设置项一样，对单个数据的设置项将掩盖整个系列的设置项。

在这个例子中，我们将第二条水波设为赤色，并且改动其挪动朝向。

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


可以发觉，原先 data 中的一项是一个数字，而在必要做特别定制的数据中，我们将其设置为一个目标，value 值是原先的数字，其他设置项将掩盖系列设置项的值。

笔墨体现

水球图正中的笔墨有个酷炫的后果，在水波和背景前的笔墨颜色是不同的，可以经过 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;
}