Echarts水球图(Liquid Fill Chart)

2024-07-12 07:23| 来源: 网络整理| 查看: 265

水球图(Liquid Fill Chart)是Echarts的一个插件(在官方文档中没有)，可以用来优雅的展示百分比数据。

水球图.gif 安装

HTML中引入水球图:

其中这两个文件都可以在官方github项目中dist目录下获取到，echarts、echarts-liquidfill。通过npm引入:

npm install echarts npm install echarts-liquidfill

注意:echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本

最简单的例子 const option = { series: [{ type: 'liquidFill', data: [0.6] }] };

像其他echarts图配置一样，都需要配置type属性

简单例子.gif 多个波浪效果 const option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3] }] };

通过传入多个数据值来展示多个数值或制造多个波浪的效果

多个波浪效果.gif 静止的波浪效果 const option = { series: [{ type: 'liquidFill', waveAnimation: false, animationDuration: 0, animationDurationUpdate: 0, data: [0.6, 0.5, 0.4, 0.3] }] };

通过设置 waveAnimation 属性为 false，可以实现静止的波浪效果，另外，通过设置 animationDuration 和 animationDurationUpdate 属性的值，可以调整波浪的动画，同样可以实现静止的效果。

静止的波浪效果.gif 静止水面效果 const option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], amplitude: 0, waveAnimation: 0 }] };

通过设置 amplitude(振幅) 属性可以实现水面的效果

静止水面效果.gif 其他形状的水球图

水球图不仅能被设定为圆形，也可以被设置为其他形状，如矩形、钻石菱形、箭头型等，也可以设置为包含其容器的形状，甚至可以通过SVG来设定

默认水球图的配置

{ data: [], color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'], center: ['50%', '50%'], radius: '50%', amplitude: '8%', waveLength: '80%', phase: 'auto', period: 'auto', direction: 'right', shape: 'circle', waveAnimation: true, animationEasing: 'linear', animationEasingUpdate: 'linear', animationDuration: 2000, animationDurationUpdate: 1000, outline: { show: true, borderDistance: 8, itemStyle: { color: 'none', borderColor: '#294D99', borderWidth: 8, shadowBlur: 20, shadowColor: 'rgba(0, 0, 0, 0.25)' } }, backgroundStyle: { color: '#E3F7FF' }, itemStyle: { opacity: 0.95, shadowBlur: 50, shadowColor: 'rgba(0, 0, 0, 0.4)' }, label: { show: true, color: '#294D99', insideColor: '#fff', fontSize: 50, fontWeight: 'bold', align: 'center', baseline: 'middle' position: 'inside' }, emphasis: { itemStyle: { opacity: 0.8 } } }

部分属性：

data {(number|Object)[]} 数据项的值，介于0-1之间 color {string[]} 波浪颜色 shape {string} 波浪形状，可被设置为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' 或者 svg路径 center {string[]} 图的位置，第一个值为横坐标，第二个值为纵坐标；可设置为百分比如"50%"或者像素值如"100px" radius {string} 图的半径，可设置为百分比如"50%"或者像素值如"100px" amplitude {number} 波浪的振幅，可设置为像素值或百分比，其中百分比是相对图的直径 waveLength {string|number} 波浪的长度，可设置为百分比如"50%"或者像素值如"100px" phase {number} 波浪的相位 period {number|'auto'|function} 向前移动一个波长所需的毫秒数 direction {string} 波浪滚动的方向 waveAnimation {boolean} 是否开启波浪动画 animationEasing {string} 当波浪从底部开始上升时，初始动画的简化方法。 animationEasingUpdate {string} 其他动画的简化方法，例如，当数据值改变及波位改变时。 animationDuration {number} 动画持续时间，单位为毫秒 animationDurationUpdate {number} 数据更新动画持续时间

【本文地址】

公司简介

联系我们