echartliquidFill的配置
时间: 2023-11-11 14:23:28 浏览: 29
ECharts 中的 `liquidFill` 是一种特殊的图表类型,用于绘制水球图和水滴图。下面是 `liquidFill` 的常用配置项:
```javascript
option = {
// 系列列表
series: [{
type: 'liquidFill', // 指定图表类型
data: [0.6, 0.7, 0.8], // 数据,表示水球/水滴的占比
color: ['#57D9A3', '#FEE46B', '#E95C4F'], // 颜色,可以使用渐变色
radius: '70%', // 半径,可以是数字或字符串,表示相对于容器的大小
center: ['50%', '50%'], // 水球/水滴的中心位置,可以使用百分比或像素值
amplitude: '8%', // 水波的振幅,可以是数字或字符串,表示相对于容器的大小
waveLength: '80%', // 水波的长度,可以是数字或字符串,表示相对于容器的大小
phase: 0, // 水波的相位
period: 4, // 水波的周期
direction: 'right', // 水波的方向
outline: {
show: true,
borderDistance: 4,
itemStyle: {
borderWidth: 4,
borderColor: '#fff',
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,.35)'
}
}, // 水球/水滴的边框
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}, // 水球/水滴的背景
itemStyle: {
opacity: 0.95,
shadowBlur: 50,
shadowColor: 'rgba(0, 0, 0, 0.4)'
}, // 水球/水滴的样式
label: {
show: true,
color: '#000',
insideColor: '#fff',
fontSize: 50,
fontWeight: 'bold',
formatter: function (params) {
return (params.value * 100).toFixed(0) + '%'
}
} // 标签,用于显示水球/水滴的数值
}]
};
```
上面是 `liquidFill` 常用的配置项,你可以根据自己的需求进行修改和适配。其中比较重要的配置项包括:
- `data`:表示水球/水滴的占比,是一个数组类型,可以包含多个值,每个值表示一个水球/水滴的占比,取值范围为 0 到 1。
- `radius`:表示水球/水滴的半径,可以是数字或字符串类型,如果是字符串类型,可以使用百分比表示相对于容器的大小。
- `center`:表示水球/水滴的中心位置,可以是数组或字符串类型,如果是字符串类型,可以使用百分比表示相对于容器的大小。
- `amplitude`:表示水波的振幅,可以是数字或字符串类型,如果是字符串类型,可以使用百分比表示相对于容器的大小。
- `waveLength`:表示水波的长度,可以是数字或字符串类型,如果是字符串类型,可以使用百分比表示相对于容器的大小。
- `label`:用于显示水球/水滴的数值,可以进行样式和格式化设置。
除了上面列举的配置项之外,`liquidFill` 还支持边框设置、背景设置、样式设置、动画设置、交互设置等等。你可以参考 ECharts 官网的文档,进行更深入的学习和了解。