echart自定义tooltip

青旅半醒 2021-07-26 17:41 785阅读 0赞

## 给echart的tooltip数据提示部分增加单位 ##

tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter:function(params){
              console.log(params);//帮助我们了解参数信息
              return `${params[0].marker}
                      ${params[0].seriesName}：
                      ${params[0].data}辆<br>
                      ${params[1].marker}
                      ${params[1].seriesName}：
                      ${params[1].data}辆<br>
                      ${params[2].marker}
                      ${params[2].seriesName}：
                      ${params[2].data}%`
          }
        }

## 如果数据列个数不确定，可以通过循环设置 ##

tooltip : {
    		trigger : 'axis',
    		showDelay : 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    		axisPointer: { // 坐标轴指示器，坐标轴触发有效
    			type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    		},
    		formatter:function(params){
    			    var tooltip = ""
    			    for (var i = 0; i < params.length; i++) {
    			    	tooltip+= `${params[i].marker}
    		          	${params[i].seriesName}：
    		            ${params[i].data}辆<br>`
    				}
    			     return tooltip;
    			          
    			}
    		}

发表评论取消回复

表情：

评论列表（有 0 条评论，785人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 使用tooltip.formatter自定义提示框格式时保留默认图标

1 原始效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

谁借莪１个温暖的怀抱￠/ 2023年10月05日 16:46/ 0 赞/ 27 阅读

相关 echarts自定义tooltip提示框内容

最近做一个展示需要在显示的tooltip上加上单位。。。需要自定义tooltip提示框内容效果如下先看效果和代码设置： ![watermark_type_ZHJvaWRz

秒速五厘米/ 2023年10月03日 15:47/ 0 赞/ 19 阅读

相关 leaflet自定义toolTip样式

`leaflet`自带`tooltip`相关api，支持传入自定义内容，但容器不支持自定义样式，通过`leaflet`[源码][Link 1]`_initLayout`函数可以

我不是女神ヾ/ 2023年07月08日 02:44/ 0 赞/ 29 阅读

相关 vue中对echarts的tooltip自定义内容

先看一下后端返回的数据结构 change: { date: { date_x: ["2020-11-12"], date_y:

约定不等于承诺〃/ 2022年12月22日 04:50/ 0 赞/ 205 阅读

相关 Echart自定义tooltip带小圆点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lh

系统管理员/ 2022年11月17日 11:22/ 0 赞/ 292 阅读

相关自定义Echarts地理分布图tooltip显示内容

> 在为某省开发手机版环境监测系统中需要在Echarts tooltip 中展示特定的内容，echarts默认的展示方案并不能满足我们的需求，因此就需要我们进行手动改造。最

﹏ヽ暗。殇╰゛Y/ 2022年07月03日 13:57/ 0 赞/ 558 阅读

相关 echarts组件自定义---tooltip

tooltip: { trigger: 'axis', axisPointer: {

冷不防/ 2022年04月13日 04:54/ 0 赞/ 367 阅读

相关自定义echarts中tooltip提示框显示的内容和格式

自定义echarts中tooltip提示框显示的内容和格式公司最近在做的项目里,所有图表全部都是用echarts组件做的,包括柱状图,折线图,雷达图,扇形图,圆环图(饼

蔚落/ 2022年04月03日 18:12/ 0 赞/ 489 阅读

相关 echarts tooltip提示框自定义小圆点(颜色、形状和大小等等)

虽然文章是复制过来的，但是文章写得不错，实际的解决了问题先附代码: ![复制代码][copycode.gif] formatter: function(para

朱雀/ 2022年03月20日 09:20/ 0 赞/ 1659 阅读

相关 echart自定义tooltip

给echart的tooltip数据提示部分增加单位 tooltip: { trigger: 'axis', axisPoi

青旅半醒/ 2021年07月26日 17:41/ 0 赞/ 786 阅读