二.Echarts tooltip弹框封装(自适应分辨率,x轴标签处理)(包含show、trigger、confine、axisPointer)

封装echarts弹框(包含show、trigger、confine、axisPointer)

widthVal 鼠标悬浮时柱子或者折线的阴影,不是弹框阴影(阴影的宽度)

解释:本弹框axisPointers中的type参数只用到了两种

1.是"line"直线 当widthVal参数有 值(阴影的宽度) 的时候—type:“line”
2.是"shadow"阴影 当widthVal参数有 无值(阴影的宽度) 的时候—type:“shadow”
原因:当type为"line"时可以调整线的样式,具体可以调整哪些样式可以查看官方文档(我们这里主要是调整width属性的宽度模拟实现阴影(type:“shadow”)的效果,但是也用到color,type属性为的是更逼真的模拟阴影样式)
官方文档链接 https://echarts.apache.org/zh/option.html#tooltip.axisPointer.type

如下图示例1(当type:“line”)直线时

如下图示例2(当type:“line”)直线,调整width时

如下图示例3(当type:“shadow”)阴影时

此时你会发现两个阴影及其的相似,相似就对了

一个是type:"line"直线时控制线的宽度和颜色来模拟type:"shadow"时的阴影
另一个是纯正的type:"shadow"阴影

说了这么多,总结一下

如果没有对echarts图表特殊的需求那么可以直接使用type:"shadow"阴影,

如果对echarts图表有定制化的需求那么就可以用type:"line"来替代

当然tooltip框axisPointers中type属性不止这几种,具体需要还是要看自己的需求,

但是有些属性并不是所有的图形都适用具体可以看我另一篇文章

链接地址 https://blog.csdn.net/qq_42462993/article/details/125296566

接下来是封装的代码

// 测试封装echarts弹框(包含show、trigger、confine、axisPointer)
// widthVal 鼠标悬浮时柱子或者折线的阴影,不是弹框阴影
var tooltipCustomCs = function (nameNum, widthVal) {
    var clientW = $('body').width() || document.documentElement.clientWidth || document.body.clientWidth;
    var scale = clientW / 1920;
    var axisPointers = {};
    if (!!widthVal) {
        axisPointers = {
            type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
            lineStyle: {
                color: 'rgba(150,150,150,0.4)',
                type: 'solid',
                width: widthVal * scale
            }
        }
    } else {
        axisPointers = {
            type: 'shadow',
            snap: false, //自动吸附到最近的点上
        }
    }
    var tooltip = {
        show: "true",
        trigger: 'axis',
        confine: "true", //true tooltip框只显示在echarts模块内
        axisPointer: axisPointers,
        textStyle: {
            color: "#ffffff", //字体颜色
            fontSize: 14 * scale //字体大小
        },
        padding: [0, 0], //内边距
        borderColor: "rgba(0,0,0,0.7)",//边框颜色
        backgroundColor: 'rgba(0,0,0,0.7)', // 背景
        //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：
        extraCssText: 'padding:1vh 1.5vh;box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
        formatter: function (params) {
            var relVal = "";
            var marker = "";
            var res = "";
            if (params.length) {
                if (nameNum == 1) {
                    for (let i = 0; i < params.length; i++) {
                        if (typeof params[i].color == 'string' && params[i].color.substr(0, 1) == "#") {
                            marker = `<span style="display: inline-block;margin-right: 1vh;border-radius: 10px;width: 1vh;height: 1vh;background-color: ` + params[i].color + `;"></span>`
                        } else {
                            marker = `<span style="display: inline-block;margin-right: 1vh;border-radius: 10px;width: 1vh;height: 1vh;background-color: rgba(36,207,233,0.9);"></span>`
                        }
                        res += marker + params[i].seriesName + "：" + commonClass.toThousands(Math.abs(params[i].value)) + "<br/>"
                    }
                    relVal = params[0].name + "<br/>" + res
                } else if (nameNum == 2) {
                    for (let i = 0; i < params.length; i++) {
                        if (typeof params[i].color == 'string' && params[i].color.substr(0, 1) == "#") {
                            marker = `<span style="display: inline-block;margin-right: 1vh;border-radius: 10px;width: 1vh;height: 1vh;background-color: ` + params[i].color + `;"></span>`
                        } else {
                            marker = `<span style="display: inline-block;margin-right: 1vh;border-radius: 10px;width: 1vh;height: 1vh;background-color: rgba(36,207,233,0.9);"></span>`
                        }
                        res += params[i].name + "<br/>" + marker + params[i].seriesName + "：" + commonClass.toThousands(Math.abs(params[i].value)) + "<br/>"
                    }
                    relVal = res
                }
            } else {
                if (typeof params.color == 'string' && params.color.substr(0, 1) == "#") {
                    marker = `<span style="display: inline-block;margin-right: 1vh;border-radius: 10px;width: 1vh;height: 1vh;background-color: ` + params.color + `;"></span>`
                } else {
                    marker = `<span style="display: inline-block;margin-right: 1vh;border-radius: 10px;width: 1vh;height: 1vh;background-color: rgba(36,207,233,0.9);"></span>`
                }
                relVal = params.seriesName + "<br/>" + marker + params.name + ": " + commonClass.toThousands(params.value);
            }
            return relVal;
        }
    }
    return tooltip
}

当然对于一些样式也可以自己封装

仅是自己项目中遇到的问题,自己的简介,自己习惯使用的方法,如有错误或者其它更好的方法,欢迎留言指教,相互学习