版本号：
echarts-liquidfill： ^3.1.0
echarts：^5.4.
简介：
水波图图是一种适合于展现单个百分比数据的图表类型，在Echarts 中 使用 liquidFill 需要额外导入 echarts-liquidfill，
额外导入水波图资源：
npm install echarts-liquidfill
yarn install echarts-liquidfill文章最后提供自定义图形示例代码，若对个别示例感兴趣的可私聊。
一、配置代码：
option:{
//系列中配置水波图
series:[
{
type:'liquidFill', // 图形类别
phase:0.5, // 起始相位
amplitude:10, // 波浪高度
shape:'diamond', // 水球形状 'circle'， 'rect'， 'roundRect'， 'triangle'， 'diamond'， 'pin'， 'arrow'，'container'
shape:'path://', // 水波球形状，通过自定义的svg数据格式设置
direction:'left', // 水波运动方向
data:[0.5,0.2], // 图形数据写法一，这里设置多个值时就会出现多个波浪 取值 0到1
data:[
0.2,{
value:0.5, // 图形数据写法二
direction:'left', // 水波运动方向
itemStyle:{
// 水波样式内容下同
},
emphasis:{
// 鼠标移入之后的样式内容与 itemStyle 一致
}
}
]
radius:'100%', // 圆形半径,默认50%
color:['#C23531','#fff','red'] // 调色板，每一个波浪颜色在这里取值,
center:['50%','50%'], // 图形中心坐标
waveAnimation:true, // 是否开启水波动画效果
amplitude:8, // 水波的振幅大小
waveLength:10, // 水波的长度
waveSpeed:0.05, // 水波的速度
animationEasing:'smooth', // 初始动画的加载效果线性（linear）、平滑（smooth）、加速（ease-in）、减速（ease-out）
animationEasingUpdate:'smooth', // 数据更新动画的缓动效果,上同
animationDuration:100, // 初始动画时长单位毫秒
animationDurationUpdate:100, // 数据更新时长单位毫秒
// 水波样式
itemStyle:{
opacity:0.5, // 透明度
color:'red', // 统一配置水波的颜色
shadowBlur:10, // 水波阴影大小
shadowColor:'red', // 阴影颜色
shadowOffsetX:10, // 阴影水平偏移量
shadowOffsetY:10, // 阴影竖直偏移量
}
// 鼠标移入水波时的样式
emphasis:{
// 内容与 itemStyle 一致
}
// 水波图背景颜色
backgroundStyle:{
borderWidth:0, // 背景边框宽度
color:'red', // 指定背景颜色
borderColor:'#fff', // 背景边框颜色，默认 none
shadowBlur: 0, // 背景阴影模糊大小，默认为0
shadowColor: 'none', // 背景阴影颜色，默认为无色
shadowOffsetX: 0, // 背景阴影水平偏移，默认为0
shadowOffsetY: 0 // 背景阴影垂直偏移，默认为0
},
// 水波图边框配置
outline:{
show: false, // 是否显示边框，默认为false
borderDistance: 10, // 边框距离水波图的距离，默认为0，也可以理解为边框宽度
// 边框样式
itemStyle: {
color: 'none', // 边框距离水波图以及边框的背景颜色颜色
borderWidth:3, // 图例图形的描边
borderColor:"rgba(40, 36, 36, 1)",// 图例图形描边的颜色
borderType: "dashed", // 图例图形描边线的类型可以是 'solid'（实线）、'dashed'（虚线）或 'dotted'（点线），默认为 'solid'
borderDashOffset: 10, // 图例图形描边虚线的位移量
shadowBlur:2.5, // 图例的阴影模糊大小
shadowColor:"rgba(228, 2, 2, 1)", // 图例图形阴影颜色
shadowOffsetX: -1.5, // 图例图形阴影水平偏移量
shadowOffsetY: 1.5, // 图例图形阴影竖直偏移量
opacity:0.5, // 图例图形的透明度
}
},
// 水波图标签配置
label:{
show: false, // 是否显示标签，默认为 false
position: 'inside', // 标签的位置，可以是 'inside'（内部）、'left'、'right'、'top'、'bottom' 或具体的像素值，默认为 'inside'
baseline: 'middle' // 设置标签居中对齐 "top"、"bottom" 或 "center"
align:'left', // 水平对齐方式 "left" 或 "right"
color: '#000', // 标签的颜色
insideColor:'red', // 与波浪覆盖时的颜色
fontSize: 12, // 标签的字体大小，默认为 12
fontWeight: 'normal', // 标签的字体粗细，可以是 'normal' 或 'bold'，默认为 'normal'
fontFamily: 'sans-serif', // 标签的字体类型，默认为 'sans-serif'
formatter: null, // 格式化标签文本的回调函数，默认为 null
backgroundColor: 'none', // 标签的背景颜色，默认为无色
borderRadius: 0, // 标签的圆角半径，默认为 0
borderColor: 'none', // 标签的边框颜色，默认为无色
borderWidth: 0, // 标签的边框宽度，默认为 0
padding: [0, 0, 0, 0], // 标签内容的内边距，可以是一个数组或单个数值，默认为 [0, 0, 0, 0]
shadowBlur: 0, // 标签的阴影模糊大小，默认为 0
shadowColor: 'none', // 标签的阴影颜色，默认为无色
backgroundColor:'auto', //文本标签的背景颜色
borderColor:'red', //文本标签的边框颜色
borderWidth:20, //文本标签的边框宽度
shadowBlur:20, //文本标签阴影大小
shadowColor:'red', //阴影颜色
textBorderColor:'red', //文本描边颜色
textBorderWidth:10, //文本描边宽度
textBorderType:'solid', //描边类型
textBorderDashOffset:10, //描边为虚线时的偏移量
textShadowColor:'transparent', //文字阴影颜色
textShadowBlur:10, //文字阴影长度
textShadowOffsetX:10, //文字阴影水平偏移量
textShadowOffsetY:10, //文字阴影竖直偏移量
overflow:'none', //文字超出是否截断
ellipsis:'···', //文字截断时末尾显示内容
// 文本标签偏移视乎有问题，我这边偏移的只有文本标签的盒子，而显示的内容没有被偏移
shadowOffsetX:20, //文本标签的阴影水平偏移
shadowOffsetY:20, //文本标签的阴影竖直偏移
}
}
]
}二、水波图示例展示
三、示例代码
下列代码为图片中的自定义盒子的配置代码。
React：
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import { useState } from 'react';
const Liquidfill = () => {
const option = {
title: {
text: '自定义盒子',
left: 'center'
},
series: [
{
name: '自定义盒子',
type: 'liquidFill',
phase: 0.1,
amplitude: 10,
data: [
{
value: 0.6,
itemStyle: {
color: '#136CEA'
}
},
{
value: 0.4,
itemStyle: {
color: '#4D8EE8'
}
}
],
shape: `path://M9110 6363 c775 40 1482 284 2240 776 556 360 1011 738
// 1945 1617 668 629 894 831 1195 1066 644 504 1159 708 1619 640
// 63 -10 119 -19 123 -22 4 -3 -3 -27 -17 -53 -93 -184 -526 -596 -1005 -956 -179 -134 -200
// -160 -200 -241 0 -56 27 -104 74 -133 36 -23 149 -40 451 -68 238 -22 895 -25
// 1045 -5 158 22 358 63 426 89 7 3 13 -32 18 -104 16 -259 84 -682
// 162 -1022 84 -363 241 -885 286 -951 47 -69 138 -89 213 -47 54 30 84 94
// 179 377 118 355 208 710 271 1070 60 346 79 569 79 920 0 319
// -12 466 -60 713 -146 750 -550 1304 -1182 1621 -308 154 -628 244 -1087 303
// -116 15 -320 17 -1951 20 l-1821 4 -7 67 c-16 163 -78 315 -168 417 -287 322
// -851 295 -1698 -82 -157 -70 -525 -257 -683 -347 l-99 -56 -1386 0 c-1315 0 -1392 -1 -1477
// -19 -365 -76 -671 -346 -899 -794 -116 -228 -159 -367 -210 -684 -46 -280 -60 -472 -60 -818 0
// -325 11 -491 50 -725 214 -1283 969 -2112 2214 -2429 308 -78 636 -124 1020
// -141 215 -9 276 -10 400 -3z`,
radius: '95%',
// 波浪颜色
itemStyle: {
shadowBlur: 5
},
backgroundStyle: {
borderWidth: 5,
borderColor: '#056CFC'
},
outline: {
show: false
},
// 水波图标签配置
label: {
show: true,
align: 'center',
distance: 50,
color: '#05FCF6',
fontSize: 32,
insideColor: 'red'
}
}
]
};
return (
<ReactECharts
option={option}
style={{ width: '200px', height: '200px' }}
echarts={echarts}
></ReactECharts>
);
};
export default Liquidfill;
Vue3：
<template>
<div id="liquidfill" style="width: 200px;height:200px">
</div>
</template>
<script setup lang="ts">
import { onMounted,ref, markRaw} from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill'
onMounted(() => {
const chartInstance: any = ref(null);
const updateChart = () => {
chartInstance.value = markRaw(echarts.init(document?.getElementById(`liquidfill`)));
const option = {
title: {
text: '自定义盒子',
left: 'center'
},
series: [
{
name: '自定义盒子',
type: 'liquidFill',
phase: 0.1,
amplitude: 10,
data: [
{
value: 0.6,
itemStyle: {
color: '#136CEA'
}
},
{
value: 0.4,
itemStyle: {
color: '#4D8EE8'
}
}
],
shape: `path://M9110 6363 c775 40 1482 284 2240 776 556 360 1011 738
// 1945 1617 668 629 894 831 1195 1066 644 504 1159 708 1619 640
// 63 -10 119 -19 123 -22 4 -3 -3 -27 -17 -53 -93 -184 -526 -596 -1005 -956 -179 -134 -200
// -160 -200 -241 0 -56 27 -104 74 -133 36 -23 149 -40 451 -68 238 -22 895 -25
// 1045 -5 158 22 358 63 426 89 7 3 13 -32 18 -104 16 -259 84 -682
// 162 -1022 84 -363 241 -885 286 -951 47 -69 138 -89 213 -47 54 30 84 94
// 179 377 118 355 208 710 271 1070 60 346 79 569 79 920 0 319
// -12 466 -60 713 -146 750 -550 1304 -1182 1621 -308 154 -628 244 -1087 303
// -116 15 -320 17 -1951 20 l-1821 4 -7 67 c-16 163 -78 315 -168 417 -287 322
// -851 295 -1698 -82 -157 -70 -525 -257 -683 -347 l-99 -56 -1386 0 c-1315 0 -1392 -1 -1477
// -19 -365 -76 -671 -346 -899 -794 -116 -228 -159 -367 -210 -684 -46 -280 -60 -472 -60 -818 0
// -325 11 -491 50 -725 214 -1283 969 -2112 2214 -2429 308 -78 636 -124 1020
// -141 215 -9 276 -10 400 -3z`,
radius: '95%',
// 波浪颜色
itemStyle: {
shadowBlur: 5
},
backgroundStyle: {
color:'rgba(5, 108, 252, 0.1)',
borderWidth: 5,
borderColor: '#056CFC'
},
outline: {
show: false
},
// 水波图标签配置
label: {
show: true,
align: 'center',
distance: 50,
color: '#05FCF6',
fontSize: 32,
insideColor: 'red'
}
}
]
}
chartInstance.value.setOption(option, true);
chartInstance?.value?.resize()
}
updateChart()
})
</script>
<style scoped></style>文章中配置项 若有错误请评论或者私聊，谢谢，最后提前祝大家龙年行大运，祥瑞照门庭，新年快乐！！！
270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
