原理:等于画了两条线,一条实线一条虚线;把实线的最后的值给虚线;再将提示框进行过滤,防止多个点以及值为空的情况
初步实现参考:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
series: [
{
data: [150, 230, 224, 124, 218, 135],
type: 'line'
},
{
data: ['-', '-', '-', '-', '-', 135, 260],
type: 'line',
lineStyle: {
type: 'dotted',//'dotted'虚线 'solid'实线
color: "#F02FC2"
}
}
]
};
最终实现:
options = {
tooltip: {
trigger: "axis",
formatter: function (params) {
var htmlStr = '';
var valMap = {};
for (var i = 0; i < params.length; i++) {
var param = params[i];
var xName = param.name;//x轴的名称
var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值
var color = param.color;//图例颜色
//过滤无效值
if (value == '-') {
continue;
}
//过滤重叠值
if (valMap[seriesName] == value) {
continue;
}
if (i === 0) {
htmlStr += xName + '<br/>';//x轴的名称
}
htmlStr += '<div>';
//为了保证和原来的效果一样,这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
//圆点后面显示的文本
htmlStr += seriesName + ':' + value;
htmlStr += '</div>';
valMap[seriesName] = value;
}
return htmlStr;
},
axisPointer: {
type: 'cross',
label: {
show: true,
backgroundColor: "#7B7DDC"
}
}
},
legend: {
x: 'center',
y: '6%',
// itemWidth: 18, // 图例标记的图形宽度。[ default: 25 ]
textStyle: {
color: '#bcf',
fontSize: 10,
},
// icon: 'circle',
data: ['上游流速', '下游流速', '平均流速']
},
grid: {
right: '5%',
bottom: '10%',
left: '2%',
top: '18%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ["2021", "2022", "2023", "2024", "2025", "2026"],
name: '时间',
nameTextStyle: {
color: '#d4ffff'
},
axisLine: {
lineStyle: {
color: '#0B4CA9'
}
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#FFF",
fontSize: 12,
},
},
}],
yAxis: [{
type: 'value',
name: '次数',
nameTextStyle: {
color: '#d4ffff'
},
position: 'left',
axisLine: {
lineStyle: {
color: '#0B4CA9'
}
},
splitLine: {
lineStyle: {
color: "#0B4CA9",
}
},
axisLabel: {
color: '#d4ffff',
fontSize: 12,
}
},],
series: [
{
name: '上游流速',
type: 'line',
smooth: true,
yAxisIndex: 0,
symbol: "circle",
symbolSize: 5,
itemStyle: {
normal: {
color: "#2EF7F3",
}
},
data: [12, 12, 26, 22, 24, 15]
},
{
name: '下游流速',
type: 'line',
smooth: true,
yAxisIndex: 0,
symbol: "circle",
symbolSize: 5,
itemStyle: {
normal: {
color: "#5EBEFC",
}
},
data: [13, 7, 10, 18, 17, 28]
},
{
name: '平均流速',
type: 'line',
smooth: true,
yAxisIndex: 0,
symbol: "circle",
symbolSize: 5,
itemStyle: {
normal: {
color: "#9BBEFC",
lineStyle: {
width: 2,
// type: 'dotted' //'dotted'虚线 'solid'实线
}
}
},
// data: [20, 21, 16, 22, 21, 31]
data: [20, 21, 16, 22]
},
// 平均流速- 末尾虚线
{
name: "平均流速",
type: "line",
smooth: true,
barWidth: 10,
itemStyle: {
normal: {
color: "#F02FC2",
// 最后一个点的边框颜色
borderWidth: 2,
lineStyle: {
width: 2,
type: 'dotted',
color: "yellow"//'dotted'虚线 'solid'实线
}
}
},
data: ["-", "-", "-", 22, 31, 12]
},
]
}