Echarts在线免费图表

 
            let colorList = ['#FF4B01', '#FF7B00', '#FFE823','#2379FF', '#2379FF', '#FFD37A']
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: '200',
		right: '16%',
		top: '15%',
		bottom: '8%',
	},
	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,
				margin: 10,
				formatter: (name, index) => {
                    const id = index + 1;
                    if (id < 4) {
                        return `{icon${id}|${id}}`;
                     } else {
                        return `{count|${id}}`;
                     }
                },
				rich: {
					icon1: {
						width: 30,
						height: 25,
						padding: [5, 0, 2, 0],
						align: 'center',
						backgroundColor: '#FF4B01',
						color: '#ffffff',
						fontSize: 20,
					},
					icon2: {
						width: 30,
						height: 25,
						padding: [5, 0, 2, 0],
						align: 'center',
						backgroundColor: '#FF7B00',
						color: '#ffffff',
						fontSize: 20,
					},
					icon3: {
						width: 30,
						height: 25,
						padding: [5, 0, 2, 0],
						align: 'center',
						backgroundColor: '#FFD000',
						color: '#ffffff',
						fontSize: 20,
					},
					count: {
						width: 30,
						height: 25,
						padding: [5, 0, 2, 0],
						align: 'center',
						backgroundColor: '#2379FF',
						color: '#ffffff',
						fontSize: 20,
					}
				},
			},
		},
		{
			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:'#194B72',
			},
			 label: {
				show: true,
				offset: [10, -16],
				color: '#fff',
				fontWeight: 500,
				position: 'left',
				align: 'left',
				formatter: function (params) {
					console.log(params)
					return params.data.name;
				}
			},
			data: result.map((item,index)=>{
				return{
					name:item.name,
					value:item.value,
					itemStyle:{
						barBorderRadius: [30, 0, 0, 30],
						color:{
							type: "linear",
							x: 0,
							y: 0,
							x2: 1,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: "#0F1F45",
								},
								{
									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,
		},
	],
};