想要的效果：
我实现的效果：
半成品源码：
<!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: "公司成立",
value: 60,
detail: "在北京中关村创立，注册资本500万元"
},
{
time: "2006",
event: "首款产品上市",
value: 50,
detail: "发布企业级软件V1.0，获得市场认可"
},
{
time: "2007",
event: "华东分公司成立",
value: 45,
detail: "设立上海分公司，拓展华东市场"
},
{
time: "2008",
event: "获高新技术认证",
value: 40,
detail: "通过国家高新技术企业认定"
},
{
time: "2009",
event: "完成A轮融资",
value: 48,
detail: "获得红杉资本2000万美元投资"
},
{
time: "2010",
event: "用户突破100万",
value: 55,
detail: "企业用户数达到120万家"
},
{
time: "2011",
event: "移动端产品发布",
value: 45,
detail: "推出移动办公解决方案"
},
{
time: "2012",
event: "海外市场拓展",
value: 60,
detail: "在新加坡设立国际业务总部"
},
{
time: "2013",
event: "年营收突破10亿",
value: 52,
detail: "全年营收达12.8亿元"
},
{
time: "2014",
event: "行业解决方案发布",
value: 50,
detail: "推出五大行业定制解决方案"
},
{
time: "2015",
event: "成功上市",
value: 55,
detail: "在深交所创业板挂牌上市"
},
{
time: "2016",
event: "人工智能实验室",
value: 42,
detail: "建立AI研发中心，团队规模达200人"
},
{
time: "2017",
event: "品牌升级",
value: 55,
detail: "启用新品牌标识，确立'科技赋能'理念"
},
{
time: "2018",
event: "社会责任报告",
value: 60,
detail: "首次发布企业社会责任报告"
},
{
time: "2019",
event: "全球创新百强",
value: 77,
detail: "荣登《财富》全球创新企业TOP100"
},
{
time: "2020",
event: "抗疫科技支援",
value: 70,
detail: "向医疗机构捐赠智能防疫系统"
},
{
time: "2021",
event: "元宇宙布局",
value: 70,
detail: "启动元宇宙办公场景研发项目"
},
{
time: "2022",
event: "国家级实验室",
value: 50,
detail: "获批建设国家级企业技术中心"
},
{
time: "2023",
event: "全球战略发布",
value: 60,
detail: "公布'2025全球领先计划'"
},
{
time: "2024",
event: "绿色计算中心",
value: 51,
detail: "建成首个零碳数据中心"
},
{
time: "2025",
event: "二十周年庆典",
value: 80,
detail: "举办全球合作伙伴峰会"
}
];
const yMax = 100;
var option = {
grid: {
bottom: '0px',
top: '25px',
left: '18%',
right: '18%'
},
xAxis: {
type: 'time',
show: false,
},
yAxis: {
max: yMax,
show: false
},
dataZoom: [{
height: 6,
start: 0,
end: 25
},
{
type: 'inside',
}
],
tooltip: {
trigger: 'item',
formatter: function(params) {
return `
<b>${params.data.time}年</b>
<br/>${params.data.event}
<br/>${params.data.detail}
`;
}
},
series: [{
type: 'line',
smooth: true,
data: eventData.map(item => ({
...item,
name: item.event,
value: [item.time, item.value]
})),
lineStyle: {
color: '#c1c5d0',
width: 12,
},
markPoint: {
symbol: 'circle',
symbolSize: 20,
itemStyle: {
color: '#2f89cf',
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'bottom',
color: '#666',
fontSize: 22,
formatter: function(params) {
return params.data.time
}
},
data: eventData.map(item => ({
...item,
name: item.event,
coord: [item.time, item.value],
}))
},
markLine: {
silent: true,
symbol: 'none',
lineStyle: {
color: '#2f89cf',
width: 2,
type: 'solid'
},
label: {
show: true,
position: 'start',
formatter: function(params) {
console.log(params);
return params.data.event;
},
color: '#333',
fontSize: 12,
backgroundColor: 'rgba(255,255,255,0.8)',
padding: [3, 5],
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: {
// position: 'start',
// distance: [10, 0]
// }
},
{
coord: [item.time, coord1]
}
]
})
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>
