一、效果
二、代码
tooltip: {
show: true,
axisPointer: {
// 十字交叉
type: 'cross',
lineStyle: {
type: 'dashed' // 虚线
}
},
// 自定义
formatter: p => {
// 图表中线或柱的name
const pre = p.name
const start = '<ul type="none" style="margin:2px 0 15px -40px;">'
const end = '</ul>'
const textStart = '<li style="text-align: left;padding-left: 10px;">'
const textEnd = '</li>'
const titleStart = '<li style="text-align: left;">'
const titleEnd = '</li>'
const dom = titleStart + p.marker + p.seriesName + titleEnd + textStart + '时间:' + p.value.weekTime + textEnd + textStart + '数值:' + p.value.valueData + textEnd
// p.marker + p.seriesName + ':<br/> ' + style + '时间:' + p.value.weekTime + '<br/> ' + style + '数值:' + p.value.value + '<br/>'
// 拼接h5
return pre + start + dom + end
},
// tooltip样式
extraCssText: 'background: linear-gradient(#3EC1FF, #0F3D74, #0F3D74, #0F3D74, #3EC1FF);color:#FFFFFF'
// className 仅适用于版本5以上,可用于自定义样式
className: 'test'
},
版权声明:本文为qq_42151956原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。