echarts中,自定义tooltip提示框样式
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
echarts中,⾃定义tooltip提⽰框样式
最近在做echarts图表的时候,由于数据需要保留两位⼩数显⽰,结果桑吉图他有个总数值是⾃⼰计算的,所以浮点数计算导致数值⼩数位不⽌两位,就需要做处理,记录⼀下踩过的坑
1.采⽤了formatter回调函数的⽅式,⾃⼰拼写字符串,给显⽰的数值做⼀个数据处理保留两位⼩数
2.由于数据过多,导致tooptip被遮盖,显⽰不全各种问题,也同样可以解决
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指⽰器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
enterable: true, // ⿏标是否可进⼊提⽰框浮层中
hideDelay: 200, // 浮层隐藏的延迟
confine: true,
backgroundColor: 'rgba(255,255,255, 1)',
formatter: function (params) {
var htmlStr = '<div style="height: auto;max-height: 240px;overflow-y: auto;"><p>' + params[0].axisValue + '</p>';
for (var i = 0; i < params.length; i++) {
htmlStr += '<p style="color: #666;">' + params[i].marker + params[i].seriesName + ':' + params[i].value + '</p>';
}
htmlStr += '</div>'
return htmlStr
},
extraCssText: 'box-shadow: 0 0 3px rgba(150,150,150, 0.7);',
textStyle: {
fontSize: 12,
color: '#fff'
}
},
legend: {
type: 'scroll',
orient: 'horizontal',
left: 15,
right: 15,
bottom: 10,
data: legendData,
pageButtonPosition: 'end'
},。