echarts-liquidfill@3兼容echarts@5 echarts-liquidfill@2兼容echarts@4
npm install echarts
npm install echarts-liquidfill
 

设置水球图背景色和内边框样式

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        backgroundStyle: {
            borderWidth: 5,//边框宽度
            borderColor: 'red',//边框颜色
            color: 'yellow'//背景色
        }
    }]
};
 
设置外边框

设置outline.show为 false,隐藏外边框
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        outline: {
            show: false
        }
    }]
};
 
阴影

默认情况下,波浪和轮廓有阴影。以下是如何改变它们的方法
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        itemStyle: {
            shadowBlur: 0
        },
        outline: {
            borderDistance: 0,
            itemStyle: {
                borderWidth: 5,
                borderColor: '#156ACF',
                shadowBlur: 20,
                shadowColor: 'rgba(255, 0, 0, 1)'
            }
        }
    }]
};
 
outline外边框
outline.show {boolean}
是否显示外边框
outline.borderDistance {number}
外边框与内圈之间的距离。
 outline.itemStyle.borderColor {string}
外边框颜色
outline.itemStyle.borderWidth {number}
外边框宽度
outline.itemStyle.shadowBlur {number}
外边框阴影的模糊大小
outline.itemStyle.shadowColor {string}
外边框阴影颜色
 
backgroundStyle内圈
backgroundStyle.color {string}
内圈背景色
 backgroundStyle.borderWidth {string}
内圈描边边框
 backgroundStyle.borderColor {string}
内圈描边边框颜色
 backgroundStyle.itemStyle.shadowBlur {number}
背景色阴影的模糊大小
 backgroundStyle.itemStyle.shadowColor {string}
背景色阴影的颜色
 backgroundStyle.itemStyle.opacity {number}
背景色的透明度
 
itemStyle 水波
 itemStyle.opacity {number}
水波透明度
 itemStyle.shadowBlur {number}
水波阴影的模糊大小
 itemStyle.shadowColor {string}
水波阴影的颜色
emphasis.itemStyle.opacity {number}
当鼠标移入后,水波的透明度
 
参考:
 echarts-liquidfill水球图教程







![[java]小程序,输出20个随机数,并统计每个随机数出现的次数](https://img-blog.csdnimg.cn/d5de42f869834b67b3e63fd13e9e4332.png)










