Echarts 的悬浮框tooltip显示自定义格式化

16 篇文章 0 订阅
1 篇文章 0 订阅
    /**
     * tooltip配置项示例
     */
    tooltip: {
        trigger: 'item'
    },

默认提示框效果一:显示当前单个数据项的提示框

    /**
     * tooltip配置项示例
     */
    tooltip: {
        trigger: 'axis'
    },

默认提示框效果二:显示当前横坐标下多个数据项的提示框

   /**
     * tooltip配置项示例
     */
    //用formatter回调函数显示单项数据内容
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            var color = params.color;//图例颜色
            var htmlStr ='<div>';
            htmlStr += params.name + '<br/>';//x轴的名称
            
            //为了保证和原来的效果一样,这里自己实现了一个点的效果
            htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
            
            //添加一个汉字,这里你可以格式你的数字或者自定义文本内容
            htmlStr += params.seriesName + ':'+params.value + '笔';
            
            htmlStr += '</div>';
            
            return htmlStr; 
        }
    }

默认提示框效果三:显示当前单个数据项的自定义提示框

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义echarts折线图tooltip的样式,可以使用tooltip的formatter属性和CSS样式来实现。以下是一个示例代码: ```javascript option = { tooltip: { trigger: 'axis', formatter: function(params) { var html = '<div class="tooltip">'; html += '<div class="tooltip-header">' + params[0].name + '</div>'; params.forEach(function(item) { html += '<div class="tooltip-item">'; html += '<div class="tooltip-point" style="background-color:' + item.color + '"></div>'; html += '<div class="tooltip-name">' + item.seriesName + ':</div>'; html += '<div class="tooltip-value">' + item.value + '</div>'; html += '</div>'; }); html += '</div>'; return html; }, axisPointer: { type: 'cross' } }, // 其他配置项 // ... } ``` 上面代码中,我们使用了tooltip的formatter属性来自定义tooltip的内容。在函数中,我们可以通过params参数获取到当前tooltip中包含的所有数据项,然后根据需要来组装html字符串。在这个例子中,我们使用了一个`<div>`元素来作为tooltip的容器,并且为它添加了一个自定义的CSS类名`tooltip`,以便后面可以通过CSS样式来对tooltip进行样式调整。 接下来,我们在formatter函数中遍历params参数,将每个数据项的名称、数值、颜色等信息组装成一个html字符串,并添加到tooltip容器中。在这个例子中,我们使用了一个`<div>`元素来作为每个数据项的容器,并为它添加了一个自定义的CSS类名`tooltip-item`,以便后面可以通过CSS样式来对每个数据项进行样式调整。 最后,我们在CSS样式中定义了`.tooltip`和`.tooltip-item`两个类的样式,来对tooltip进行样式调整。以下是CSS样式的示例代码: ```css .tooltip { background-color: #fff; border: 1px solid #ccc; padding: 10px; } .tooltip-header { font-weight: bold; margin-bottom: 5px; } .tooltip-item { margin-bottom: 5px; } .tooltip-point { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; } .tooltip-name { display: inline-block; font-weight: bold; margin-right: 5px; } .tooltip-value { display: inline-block; } ``` 上面代码中,我们定义了`.tooltip`类的背景色、边、内边距等样式,以及`.tooltip-header`、`.tooltip-item`、`.tooltip-point`、`.tooltip-name`、`.tooltip-value`等类的其他样式,来对tooltip进行样式调整。其中,`.tooltip-point`类的样式用于设置每个数据项的颜色标识符,`.tooltip-name`类的样式用于设置每个数据项的名称,`.tooltip-value`类的样式用于设置每个数据项的数值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值