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