设置Echarts鼠标悬浮样式

原创
2020/05/10 20:30
阅读数 1.4W
tooltip: {//自定义tip
    show: true,
    trigger: 'axis',
    show: true,   //default true
    showDelay: 0,//显示延时,添加显示延时可以避免频繁切换
    hideDelay: 50,//隐藏延时
    transitionDuration: 0,//动画变换时长
    backgroundColor: 'rgba(0,0,0,0.7)',//背景颜色(此时为默认色)
    borderRadius: 8,//边框圆角
    padding: 10,    // [5, 10, 15, 20] 内边距
    position: function (p) {
        // 位置回调
        // console.log && console.log(p);
        return [p[0] + 10, p[1] - 10];
    },
    formatter: function (params, ticket, callback) {
        // console.log(params);
        var tip = "上报时间" + ' : ' + params[0].name + "<br/>";
        for (var i = 0, l = params.length; i < l; i++) {
            if(params[i].seriesName=='温度'){
                tip += '<br/>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;"></span>' + params[i].seriesName + ' : ' + params[i].value +'℃';//鼠标悬浮显示的字符串内容
            }else if(params[i].seriesName=='湿度'){
                tip += '<br/>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1bf55f;"></span>' + params[i].seriesName + ' : ' + params[i].value +'RH%' ;//鼠标悬浮显示的字符串内容
            }else {
                tip += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value ;//鼠标悬浮显示的字符串内容
            }
        }
        //同步加载
        return tip;
        //异步加载
        // setTimeout(function () {
        //     // 仅为了模拟异步回调
        //     callback(ticket, tip);
        // }, 10);//延时时间ms
        // return 'loading...';
    }
},

参考:

设置Echarts鼠标悬浮样式

echarts图形如何自定义tooltip文字内容和小圆点

数据可视化 Echarts 修改鼠标悬停时的高亮颜色

Echarts字体和线条颜色设置操作笔记

 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部
返回顶部
顶部