【echarts】echarts-liquidfill 水球图

最新推荐文章于 2025-04-22 11:16:42 发布

533_

最新推荐文章于 2025-04-22 11:16:42 发布

阅读量641

点赞数 5

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_14993591/article/details/140789542

版权

echarts 专栏收录该内容

69 篇文章

订阅专栏

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水球图教程