Echarts在线免费图表

 
            let colorList = ['#FF4B01', '#FF7B00', '#FFE823', '#2379FF', '#2379FF', '#2379FF']
let colorListA = ['#FC7A24', '#FFC000', '#FFEA97', '#49B1FF', '#49B1FF', '#49B1FF']
let result = [
	{ name: '秦汉史·武威', value: 580 },
	{ name: '魏晋南北朝史·武威', value: 536 },
	{ name: '隋唐史·武威', value: 500 },
	{ name: '吐谷浑文化', value: 350 },
	{ name: '简牍文化', value: 300 }
]

option = {
	color: colorList,
	backgroundColor: '#000416',
	tooltip: {
		show: true,
		trigger: 'item',
		padding: [8, 15],
		backgroundColor: 'rgba(12, 51, 115,0.8)',
		borderColor: 'rgba(3, 11, 44, 0.5)',
		textStyle: {
			color: 'rgba(255, 255, 255, 1)'
		},
	},
	legend: {
		show: false,
	},
	grid: {
		left: '4%',
		right: '4%',
		top: '10%',
		bottom: '2%',
		containLabel: true,
	},
	xAxis: [
		{
			splitLine: {
				show: false,
			},
			type: 'value',
			show: false,
		},
	],
	yAxis: [
		{
			splitLine: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			type: 'category',
			axisTick: {
				show: false,
			},
			inverse: true,
			data: result.map((item) => item.name),
			axisLabel: {
				color: '#fff',
				fontSize: 14,
				padding: [0, -50, 35, 0],
				formatter: (name, index) => {
					const id = index + 1;
					if (id < 4) {
						return `{icon${id}|TOP${id}}`;
					} else {
						return `{count|TOP${id}}`;
					}
				},
				rich: {
					icon1: {
						width: 30,
						height: 25,
						padding: [5, 0, 2, 0],
						align: 'center',
						backgroundColor: 'transparent',
						color: '#ffffff',
						fontSize: 14,
					},
					icon2: {
						width: 30,
						height: 25,
						padding: [5, 0, 2, 0],
						align: 'center',
						color: '#ffffff',
						fontSize: 14,
					},
					icon3: {
						width: 30,
						height: 25,
						padding: [5, 0, 2, 0],
						align: 'center',
						color: '#ffffff',
						fontSize: 14,
					},
					count: {
						width: 30,
						height: 25,
						padding: [5, 0, 2, 0],
						align: 'center',
						color: '#ffffff',
						fontSize: 14,
					}
				},
			},
		},
		{
			type: 'category',
			inverse: true,
			axisTick: 'none',
			axisLine: 'none',
			show: true,
			axisLabel: {
				textStyle: {
					color: '#fff',
					fontSize: 12,
				},
				formatter: function (value) {
					return value + '次';
				},
			},
			data: result.map((item) => item.value),
		},
	],
	series: [
		{
			name: '',
			type: 'bar',
			barWidth: 10, // 柱子宽度
			MaxSize: 0,
			showBackground: true,
			barBorderRadius: [30, 0, 0, 30],
			backgroundStyle: {
				color: 'rgba(9, 68, 131, .2)',
			},
			label: {
				show: true,
				offset: [60, -17],
				color: '#fff',
				fontWeight: 500,
				position: 'left',
				align: 'left',
				fontSize: 14,
				formatter: function (params) {
					console.log(params)
					return params.data.name;
				}
			},
			data: result.map((item, index) => {
				return {
					name: item.name,
					value: item.value,
					itemStyle: {
						barBorderRadius: [3, 0, 0, 3],
						color: {
							type: "linear",
							x: 0,
							y: 0,
							x2: 1,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: colorListA[index],
								},
								{
									offset: 1,
									color: colorList[index],
								},
							],
						}
					}
				}
			}),
		},
		{
			name: "外圆",
			type: "scatter",
			emphasis: {
				scale: false,
			},
			symbol: "rect",
			symbolSize: [5, 16],// 进度条白点
			itemStyle: {
				barBorderRadius: [30, 0, 0, 30],
				color: '#FFF',
				shadowColor: "rgba(255, 255, 255, 0.5)",
				shadowBlur: 5,
				borderWidth: 1,
				opacity: 1,
			},
			z: 2,
			data: result,
			animationDelay: 500,
		},
	],
};