Echarts折线图显示最高最低点以及首尾两点的标注

最终实现的效果

接下来上代码：

option = {
	series: [
		{
			markPoint:{
				data: [
					{
						type: 'max',
						name: '最大值',
					},	
					{
						type: 'min',
						name: '最小值',
					},
					{
						yAxis: 120,  //第一个值标注的Y轴位置
                        x: '11.65%', //第一个值标注的X轴位置   一般都要重新调整位置
                        value: 120  //第一个值标注的value值
					},
					{
						yAxis: 1000,  // 最后一个值标注的Y轴位置
                        x: '94%',  //最后一个值标注的X轴位置   一般都要重新调整位置
                        value: 1000  //最后一个值标注的value值
					},
				]
			}
		}
	]
}

上面这是写死的数据，接下来就用动态数据再写一遍

//手写假数据
let source = [
	{
		value: [120, 324, 435, 546, 1000],
	},
	{
		value: [120, 324, 435, 546, 1000],
	},
	{
		value: [120, 324, 435, 546, 1000],
	},
];

option = {
	series: source.map(function(item, index){
		return {
			data: item.value,
			markPoint:{
				data: [
					{
						type: 'max',
						name: '最大值',
					},	
					{
						type: 'min',
						name: '最小值',
					},
					{
						yAxis: item.value[0],  //第一个值标注的Y轴位置 获取折线第一个点的值
                        x: '11.65%', //第一个值标注的X轴位置  一般都要重新调整位置
                        value: item.value[0]  //第一个值标注的value值 获取折线第一个点的值
					},
					{
						yAxis: item.value[item.value.length - 1],  // 最后一个值标注的Y轴位置 获取折线最后一个点的值
                        x: '94%',  //最后一个值标注的X轴位置 一般都要重新调整位置
                        value: item.value[item.value.length - 1]  //最后一个值标注的value值   获取折线最后一个点的值
					},
				]
			}
		}
	})
}

如果此文对你有用请动动你的小手点个赞！谢谢！！！