const luffyData = [{
name: 'Second',
value: [55, 30, 20, 40, 20, 25],
zlevel: 7,
animationEasing: "quinticOut"
},
{
name: 'Third',
value: [20, 50, 40, 15, 30, 45],
zlevel: 5,
animationEasing: "quinticOut"
},
{
name: 'Bound Man',
value: [50, 85, 60, 35, 40, 60],
zlevel: 4,
animationEasing: "backInOut"
},
{
name: 'Tank Man',
value: [5, 60, 90, 5, 35, 20],
zlevel: 6,
animationEasing: "backInOut"
},
{
name: 'Snake Man',
value: [90, 70, 40, 60, 40, 60],
zlevel: 3,
animationEasing: "backInOut"
},
{
name: '普通路飞',
value: [20, 20, 20, 20, 20, 20],
zlevel: 11,
animationEasing: "elasticInOut"
},
{
name: '流樱武装色路飞',
value: [20, 40, 20, 20, 80, 20],
zlevel: 8,
animationEasing: "elasticInOut"
},
{
name: '超见闻色路飞',
value: [20, 20, 20, 90, 20, 20],
zlevel: 9,
animationEasing: "elasticInOut"
},
{
name: '霸王色路飞',
value: [20, 20, 20, 20, 20, 100],
zlevel: 10,
animationEasing: "elasticInOut"
},
{
name: 'SnakeMan 流樱X超见闻色',
value: [90, 70, 40, 95, 85, 65],
zlevel: 2,
animationEasing: "elasticInOut"
},
{
name: '橡胶橡胶觉醒',
value: [99, 99, 99, 80, 99, 90],
zlevel: 1,
animationEasing: "elasticInOut"
}
]
const powerColor = ['#4cd137', '#f0932b', '#EA2027', '#1e272e', '#8F33CC', '#c7ecee', '#f368e0', '#0652DD', '#ffdd59', '#474787', '#00FFFF']
option = {
radar: {
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
textStyle: {
fontSize: 20
},
indicator: [{
name: '速度',
max: 100
},
{
name: '力量',
max: 100
},
{
name: '肉肉',
max: 100
},
{
name: '闪避',
max: 100
},
{
name: '破甲',
max: 100
},
{
name: 'AOE',
max: 100
}
]
},
color: powerColor,
series: []
}
let tempSeries = {
type: 'radar',
areaStyle: {
opacity: 0.4,
},
emphasis: {
areaStyle: {
opacity: 0.8,
shadowBlur: 10,
},
},
label: {
show: true,
position: "inside",
fontSize: 16
},
lineStyle: {
shadowBlur: 20,
opacity: 0.8,
}
}
let tempData = [...luffyData]
let tempColor = [...powerColor]
const intv = setInterval(function() {
if (tempData.length === 0) {
clearInterval(intv)
return
}
let copySeries = JSON.parse(JSON.stringify(tempSeries))
copySeries.data = [tempData.shift()]
copySeries.zlevel = copySeries.data[0].zlevel
copySeries.animationEasing = copySeries.data[0].animationEasing
// copySeries.lineStyle.shadowColor = tempColor.shift()
option.series.push(copySeries)
myChart.setOption(option)
}, 2000)
const 白熱ゾロ = document.createElement('div')
白熱ゾロ.style.display = 'none'
白熱ゾロ.innerHTML = ``
setTimeout(_ => {
document.body.appendChild(白熱ゾロ)
})
setTimeout(_ => {
document.body.removeChild(白熱ゾロ)
}, 108000)
const 路飞vs凯多 = "http://tiebapic.baidu.com/forum/w%3D580/sign=5093d9636cf40ad115e4c7eb672d1151/0e32be096b63f6243188d7589044ebf81b4ca346.jpg"
const 草帽一伙少了甚平大和 = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600519707361&di=d598c2cc71f90a176770b5342fb9ffa8&imgtype=0&src=http%3A%2F%2Fwallpoper.com%2Fimages%2F00%2F34%2F86%2F26%2Fone-piece_00348626.jpg"
myChart._dom.style.backgroundImage = "url('" + 路飞vs凯多 + "')"
myChart._dom.style.backgroundSize = "100% 100%"
myChart._dom.style.animation = "bang 1s cubic-bezier(1,1.75,0,-0.89) 3s 13"
myChart._dom.style.transition = "all 5s ease 0s"
myChart._dom.style.overflow = 'hidden'
setTimeout(function() {
myChart._dom.style.backgroundImage = "url('" + 草帽一伙少了甚平大和 + "')"
}, 10000)
let 动画 = document.createElement("style")
动画.append(`
@keyframes bang {
0% {background-position-x: -20px;}
20%{background-position-x: 20px;}
30%{background-position-x: -10px;}
33%{background-position-x: 7px;}
36%{background-position-x: -2px;}
40%{background-position-x: 3px;}
43%{background-position-x: -2px;}
46%{background-position-x: 3px;}
50%{background-position-x: 0px;}
53%{background-position-x: -2px;}
56%{background-position-x: 2px;}
60%{background-position-x: -3px;}
63%{background-position-x: 2px;}
66%{background-position-x: -3px;}
70%{background-position-x: 7px;}
80%{background-position-x: -10px;}
90%{background-position-x: 5px;}
100%{background-position-x: -20px;}
}
`)
document.body.appendChild(动画)
setTimeout(_ => {
let canvas图层 = myChart._dom.querySelectorAll('canvas:nth-child(n+2)');
[...canvas图层].reverse().forEach((v, index) => {
v.style.animation = "upFly 10s cubic-bezier(.99,.01,.02,.99) " + index / 5 + "s 1"
})
动画.append(`
@keyframes upFly {
from{transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);}
to{transform:rotateY(18000deg) rotateX(360deg) rotateZ(360deg);}
}
`)
}, 24000);