zqy233的前端学习笔记tooltip
自定义悬浮提示框文本
设置 tooltip 中 formatter 属性为函数，return 一个 html 字符串用于渲染鼠标悬浮提示框，params 是当前悬浮处的属性
json
tooltip: {
trigger: 'item',
formatter: params => {
return `<div><span style="color:#F2D15C">${params.value}</span>%</div>`
}
},
tooltip: {
trigger: 'item',
formatter: params => {
return `<div><span style="color:#F2D15C">${params.value}</span>%</div>`
}
},
不响应鼠标事件
json
tooltip: {
trigger: "item",
triggerOn: "none",
formatter: params => {
return `<div><span style="color:#F2D15C">${params.value}</span>%</div>`
}
},
tooltip: {
trigger: "item",
triggerOn: "none",
formatter: params => {
return `<div><span style="color:#F2D15C">${params.value}</span>%</div>`
}
},
设置悬浮提示框位置
json
tooltip: {
trigger: "item",
position: ["70%", "30%"],
formatter: params => {
return `<div><span style="color:#F2D15C">${params.value}</span>%</div>`
}
},
tooltip: {
trigger: "item",
position: ["70%", "30%"],
formatter: params => {
return `<div><span style="color:#F2D15C">${params.value}</span>%</div>`
}
},
设置默认显示悬浮提示框
json
tooltip: {
trigger: "item",
alwaysShowContent: true,
formatter: params => {
return `<div><span style="color:#F2D15C">${params.value}</span>%</div>`
}
},
tooltip: {
trigger: "item",
alwaysShowContent: true,
formatter: params => {
return `<div><span style="color:#F2D15C">${params.value}</span>%</div>`
}
},
自定义悬浮文本-保留
js
// formatter属性支持返回一个html字符串
// formatter返回参数中，比较常用的是：axisValue x轴的坐标值，value x轴对应的值，seriesName折线的名称，marker颜色小点的html
option = {
tooltip: {
trigger: "axis",
formatter: params => {
let str = `<div>${params[0].axisValue}</div>`
params.forEach(item => {
str += `<div style="display:flex;justify-content:space-between;width:150px;"><span>${item.marker}${item.seriesName}</span><span style="marigin-left:20px;">${item.value ? item.value : "-"
}</span></div>`
})
// 数据差
let result = "未超过"
if (params[0].value && params[1].value) {
// 比较不同
const num = params[0].value - params[1].value
if (num < 0) {
result = Math.abs(num).toFixed(2)
}
}
str += `<div style="display:flex;justify-content:space-between;"><span><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#FFDEE0;"></span>超过情况</span><span style="marigin-left:40px;">${result}</span></div>`
return str
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: 'a',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9]
},
{
name: 'b',
type: 'line',
data: [1, 13, 2, 15, 3, 2, 0]
}
]
};
// formatter属性支持返回一个html字符串
// formatter返回参数中，比较常用的是：axisValue x轴的坐标值，value x轴对应的值，seriesName折线的名称，marker颜色小点的html
option = {
tooltip: {
trigger: "axis",
formatter: params => {
let str = `<div>${params[0].axisValue}</div>`
params.forEach(item => {
str += `<div style="display:flex;justify-content:space-between;width:150px;"><span>${item.marker}${item.seriesName}</span><span style="marigin-left:20px;">${item.value ? item.value : "-"
}</span></div>`
})
// 数据差
let result = "未超过"
if (params[0].value && params[1].value) {
// 比较不同
const num = params[0].value - params[1].value
if (num < 0) {
result = Math.abs(num).toFixed(2)
}
}
str += `<div style="display:flex;justify-content:space-between;"><span><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#FFDEE0;"></span>超过情况</span><span style="marigin-left:40px;">${result}</span></div>`
return str
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: 'a',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9]
},
{
name: 'b',
type: 'line',
data: [1, 13, 2, 15, 3, 2, 0]
}
]
};