想要实现个公司发展历程的展示，年头比较长可以左右拖动
但是没有引线，怎么在每个小圆点上加根引线呢？然后引线边上还有字
半成品代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>企业大事记时间轴</title>
<script src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100vw;height:600px;"></div>
<script>
// 生成模拟数据（2015-2023年）
function generateData() {
let data = [];
let value = 10;
for (let year = 2005; year <= 2025; year++) {
data.push({
time: `${year}`,
event: `${year}年重要里程碑`,
value: value ++
});
}
return data;
}
var myChart = echarts.init(document.getElementById('main'));
var eventData = generateData();
console.log(eventData);
var option = {
grid: {
bottom: '25px',
top: '25px',
left: '25px',
right: '25px'
},
xAxis: {
type: 'time',
show: false,
},
yAxis: {
show: false
},
dataZoom: [{
height: 10,
start: 0,
end: 40
},
{
type: 'inside',
}
],
series: [{
type: 'line',
smooth: true,
data: eventData.map(item => ({
name: item.event,
value: [item.time, item.value],
time: item.time,
event: item.event
})),
lineStyle: {
color: '#aaabad',
width: 13,
},
markPoint: {
symbol: 'circle',
symbolSize: 16,
itemStyle: {
color: '#2f89cf',
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
position: 'bottom',
color: '#666',
fontSize: 12,
formatter: function(params) {
return params.data.time
}
},
data: eventData.map(item => ({
name: item.event,
coord: [item.time, item.value],
time: item.time
}))
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>
