最终实现的效果
示例图
接下来上代码：
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值 获取折线最后一个点的值
},
]
}
}
})
}