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' },