echarts实现企业大事记时间轴-CSDN博客

本文链接：https://blog.csdn.net/qq_42618566/article/details/149572477
在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>企业大事记时间轴</title>
		<script src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
		<style>
			#main {
				background-image: url(./lc_bg.png);
			}
		</style>
	</head>
	<body>
		
		
		
		<div id="main" style="width: 100vw;height:600px;"></div>


		<script>
			var myChart = echarts.init(document.getElementById('main'));
			// 模拟数据（2015-2023年）
			var eventData = [{
					time: "2005",
					event: "在北京成立，\n与中国移动建立合作关系",
					value: 35,
				},
				{
					time: "2016",
					event: "开始进入IT服务领域，\n组建技术部",
					value: 45,
				},
				{
					time: "2019",
					event: "首次提出连锁类企业CIT服务新概念，\n开启全国门店一站式服务的合作模式",
					value: 40,
				},
				{
					time: "2021",
					event: "开始CIT服务平台的研发，\n业绩突破7600万销售额，\n服务连锁门店及集团分支突破1500家",
					value: 45,
				},
				{
					time: "2022",
					event: "业绩突破9400万销售额，\n服务连锁门店及集团分支突破 4000家",
					value: 60,
				},
				{
					time: "2023",
					event: "业绩突破1.2亿销售额，\n服务连锁门店及集团分支突破9000 家",
					value: 75,
				},
				{
					time: "2024",
					event: "业绩突破1.35亿销售额，\n服务连锁门店及集团分支突破12000 家",
					value: 85,
				}
			];


			const yMax = 100;
			var option = {
				grid: {
					bottom: '0px',
					top: '25px',
					left: '18%',
					right: '18%'
				},
				xAxis: {
					type: 'category',
					show: false,
				},
				yAxis: {
					max: yMax,
					show: false
				},
				dataZoom: [{
						height: 8,
						start: 0,
						end: 50
					},
					{
						type: 'inside',
					}
				],
				tooltip: {
					trigger: 'item',
					formatter: function(params) {
						return `
							<b>${params.data.time}年</b>
							<br/>${params.data.event}
						`;
					}
				},
				series: [{
					type: 'line',
					smooth: true,
					data: eventData.map(item => ({
						...item,
						name: item.event,
						value: [item.time, item.value]
					})),
					lineStyle: {
						color: '#c1c5d0',
						width: 5,
					},
					markPoint: {
						symbol: 'circle',
						symbolSize: 20,
						itemStyle: {
							color: '#2f89cf',
							borderColor: '#fff',
							borderWidth: 2,
							shadowColor: 'rgba(47,137,207,0.5)',
							shadowBlur: 10
						},
						label: {
							show: true,
							color: '#666',
							fontSize: 18,
							formatter: function(params) {
								return `
									${params.data.time}年
									${params.data.event}
								`;
							}
						},
						data: eventData.map(item => {
							const middle = yMax / 2;
							const position = item.value > middle ? 'bottom' : 'top';
							return {
								...item,
								name: item.event,
								coord: [item.time, item.value],
								label: {
									position
								}
							}
						})
					},
					// markLine: {
					// 	silent: true,
					// 	symbol: 'none',
					// 	lineStyle: {
					// 		color: '#2f89cf',
					// 		width: 2,
					// 		type: 'solid'
					// 	},
					// 	label: {
					// 		show: true,
					// 		align: 'left',
					// 		position: 'end',
					// 		formatter: function(params) {
					// 			return eventData[params.dataIndex].event
					// 		},
					// 		color: '#333',
					// 		fontSize: 18,
					// 		padding: [0, 12],
					// 		borderRadius: 3
					// 	},
					// 	data: eventData.map(item => {
					// 		const middle = yMax / 2;
					// 		const lineHeight = 30;
					// 		const coord1 = item.value > middle ? item.value - lineHeight : item.value + lineHeight;
					// 		return [{
					// 				coord: [item.time, item.value],
					// 				label: {
					// 					distance: [10, -(middle + lineHeight)]
					// 				}
					// 			},
					// 			{
					// 				coord: [item.time, coord1]
					// 			}
					// 		]
					// 	})
					// }
				}]
			};


			myChart.setOption(option);
			
			window.addEventListener('resize', function() {
			  myChart.resize();
			});
		</script>
	</body>
</html>