项目中需要用到动态波纹的水球图,在网站上没找到合适的,于是自己封装了一个,需要的自取。
var path ='path://M82.6,85.5c0-1.1,0.4-2.1,1.4-2.9s2-1.3,3.1-1.3l19.5,0c1.1,0,2,0.4,2.9,1.3c0.9,0.9,1.3,1.8,1.3,2.9l0.1,54.1c0,1-0.4,1.9-1.3,2.8c-0.9,0.9-1.8,1.3-2.9,1.3l-19.5,0c-1.1,0-2.2-0.4-3.1-1.3c-0.9-0.9-1.4-1.7-1.4-2.8L82.6,85.5z M91.5,80.5z';
option = {
backgroundColor:"rgba(0, 0, 0,)",
grid: { y:0,x:0,x2:-100,y2:-100},
series: [
{
type: 'liquidFill',
// center: center,
data:[0.42,0.4],
radius: '45%',
waveLength: '99%',
waveHeight: '10',
amplitude: 10,
outline: {show: false},
backgroundStyle: {
color: {
type:'radial',
x: 0.5,
y: 0.5,
r: 1.1,
colorStops: [
{
offset: 0,
color: 'rgba(105, 158, 230, 0.1)',
},
{
offset: 0.75,
color: 'rgba(105, 158, 230, 0.2)',
},
{
offset: 1,
color: 'rgba(105, 158, 230, 0.25)',
},
],
globalCoord: false,
},
borderColor: 'rgba(105, 158, 230, 0.25)',
borderWidth: 1,
},
shape: path,
color: ['rgba(255, 255, 255, 0.2)',
{
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 1,
color: ["rgba(249, 250, 251, 1)"], // 0% 处的颜色
},
{
offset: 0,
color: ["rgba(134, 160, 196, 1)"], // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
],
label: {normal: {formatter:'',}}
}
],
};
效果展示: