echarts绘制曲线，并添加标记点⽬标效果图：
相关代码：
const _historyEventList = [
{
time: '1921年7⽉23⽇',
event: '党的成⽴',
},
{
time: '1949年10⽉1⽇',
event: '新中国成⽴',
},
{
time: '1978年12⽉18⽇',
event: '第⼗⼀届三中全会，改⾰开放',
}
]
initHistoryLine(_historyEventList)
/**
* @description 绘制历史轨迹曲线
* @param {Array} _eventList 事件列表
*/
const initHistoryLine = function(_eventList) {
let chartDom = ElementById('curve_box')
let myChart = echarts.init(chartDom)
let _xAsix = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let _yAsix = [1.5, 3.75, 4.5, 3.75, 3, 4.75, 5.5, 4.75, 4, 5.75, 6.5]
let pointXList = []
// 根据事件数量，⾃定义每个点的 x 轴位置
switch(_eventList.length) {
case 1:
pointXList = [5]
break;
case 2:
pointXList = [4, 8]
break;
case 3:
pointXList = [2, 5, 8]
break;
case 4:
pointXList = [2, 4, 6, 8]
break;
case 5:
pointXList = [1, 3, 5, 7, 9]
break;
case 5:
pointXList = [0, 2, 4, 6, 8, 10]
break;
default:
setoptionpointXList = _xAsix.slice(0, _eventList.length)
break;
}
// 标记点配置数组
let pointList = []
_eventList.forEach((item, index) => {
// 标记点位置
let coordX = pointXList[index]
let coordY = _yAsix[coordX]
// 当前标记点
let cachePoint = {
name: item.event,
coord: [coordX, coordY],
label: {
show: true,
align: 'center',
verticalAlign: 'top',
offset: [0, -30],
formatter: function() {
let _event = item.event;
let _resEvent = '';
// 超出 10 位后换⾏
for (let i = 0; i < _event.length; i++) {
_resEvent += _event[i];
if (!((i + 1) % 10)) _resEvent += '\n';
}
// 富⽂本结果
let _result = [`{time|${item.time}}`, `{event|${_resEvent}}`].join(      '\n'
);
console.log(_result);
return _result;
},
rich: {
time: {
color: '#6a8dcd',
lineHeight: 20
},
event: {
color: '#fff',
padding: [40, 0, 0, 0],
lineHeight: 20
}
}
},
itemStyle: {
color: '#6a8dcd'
}
}
pointList.push(cachePoint)
})
let option = {
xAxis: {
type: 'category',
axisTick: {
show: false,
axisLine: {
show: false
}
},
grid: {
left: 0,
top: 30,
right: 0,
bottom: 30
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
show: false,
boundaryGap: false
},
yAxis: {
type: 'value',
axisTick: {
show: false,
axisLine: {
show: false
}
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
scale: true
},
series: [{
data: _yAsix,
markPoint: {
symbol: 'circle',
symbolSize: 10,
data: pointList
},
symbol: 'none',
type: 'line',
smooth: true
}]
};
option && myChart.setOption(option); }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。