echart自定义tooltip

青旅半醒 2021-07-26 17:41 740阅读 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 条评论，740人围观）

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

相关阅读

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

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

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

相关 echarts自定义样式

一、柱状图x、y轴：（1）实现隐藏x轴，y轴，刻度线，网格 yAxis: { show: true, type: 'value',

迷南。/ 2022年12月15日 03:39/ 0 赞/ 234 阅读

相关 Echart自定义tooltip带小圆点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lh

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 echart自定义tooltip

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

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

相关 echart自定义主题

(function (root, factory) { if (typeof define === 'function' && define.amd)

不念不忘少年蓝@/ 2021年07月26日 15:25/ 0 赞/ 576 阅读

相关 echarts tooltip信息添加%

tooltip : { trigger: 'axis', formatter:function(params)

柔光的暖阳◎/ 2021年06月24日 14:00/ 0 赞/ 666 阅读