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);