Echarts在线免费图表

 
            const dataset = {
	dimensions: ['name', 'score'],
	source: [
		['Hannah Krause', 314],
		['Zhao Qian', 351],
		['Jasmin Krause ', 287],
		['Li Lei', 219],
		['Karle Neumann', 253],
		['Mia Neumann', 165],
		['Böhm Fuchs', 318],
		['Han Meimei', 366]
	]
}

const pieOption = {
	dataset: [dataset],
	color: ['rgba(109,200,236,0.85)', 'rgba(90,216,166,0.85)', 'rgba(93,112,146,0.85)', 'rgba(246,189,22,0.85)', 'rgba(232,104,74,0.85)'],
	legend: {
		// orient: 'vertical',
		// right: 'center',
		bottom: '5%',
		data: dataset.source?.map((item) => item[0])
	},
	series: [
		{
			type: 'pie',
			radius: '55%',
			// center: ['30%', '50%'],
			center: ['50%', '35%'],
			labelLine: { length: 1, length2: 5 },
			// 通过 id 关联需要过渡动画的系列
			id: 'Score',
			universalTransition: true,
			animationDurationUpdate: 1000
		}
	]
}

const barOption = {
	dataset: [dataset],
	grid: { top: 50, left: 80, right: 25, bottom: 25 },
	xAxis: {
		position: 'top',
		type: 'value',
		boundaryGap: true,
		axisLine: { show: false, lineStyle: { color: '#4293F4' } },
		axisLabel: {
			fontSize: 16,
			color: 'rgba(0, 0, 0, .45)',
			//旋转
			rotate: 0
		},
		splitLine: { show: false },
		axisTick: { show: false } //坐标轴刻度
	},
	yAxis: {
		type: 'category',
		scale: true,
		min: 0,
		boundaryGap: [0.2, 0.2],
		// y轴线
		splitLine: { show: false },
		// y轴
		axisLine: { lineStyle: { color: '#4293F4' } },
		// 文字
		axisLabel: {
			fontSize: 12,
			color: 'rgba(0, 0, 0, .45)',
			formatter: (v) => {
				// 超过5个字换行展示
				return v.length > 5 ? `${v.slice(0, 5)}\n\n${v.slice(5, v.length)}` : v
			}
		},
		// 刻度
		axisTick: { show: true }
	},
	series: [
		{
			type: 'bar',
			// 通过 id 关联需要过渡动画的系列
			id: 'Score',
			// 每个数据都是用不同的颜色
			barWidth: 30, // 柱子宽度
			label: {
				show: true,
				position: 'right'
			},
			itemStyle: { color: '#4293F4', borderRadius: [4, 4, 0, 0] },
			colorBy: 'data',
			encode: { x: 'score', y: 'name' },
			universalTransition: true,
			animationDurationUpdate: 1000
		}
	],
	aria: {
		enabled: true,
		decal: {
			show: true,
			decals: {
				// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
				symbol: 'rect',
				dashArrayX: [2, 0],
				dashArrayY: [2, 2],
				rotation: 45
			}
		}
	}
}

option = barOption;

setInterval(() => {
  option = option === pieOption ? barOption : pieOption;
  // 使用 notMerge 的形式可以移除坐标轴
  myChart.setOption(option, true);
}, 2000);