Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts雷达图系列之战力分析图

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);
点击展开全文

相关文章

  1. 百度Echarts中国相声名家师承关系图
  2. ECharts水球图图表展示数据占比和目标完成情况
  3. 如何利用ECharts中使用地图热力图展示城市热度
  4. 如何利用ECharts中使用地图展示数据
  5. ECharts多轴图如何实现多维度数据