echarts 鼠标滑过饼图换行提示换行

最新推荐文章于 2025-02-06 17:20:00 发布

原创最新推荐文章于 2025-02-06 17:20:00 发布 · 960 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #echarts

本文介绍如何在Echarts饼图中实现鼠标悬浮时，提示信息的换行展示，包括自定义提示内容及后台数据动态获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts 中设置鼠标滑过显示自定义或者后台取值

tooltip: {
            trigger: 'item',
            enterable: true,
            position: 'top',//文字位置-文字在上方显示
            show: true,//鼠标滑过显示提示
            confine: true,//解决文字太长，超出屏幕,治标不治本
            // formatter:"{b}"
            formatter: function (val) {
                // return val.name;
                var namezrsx = val.name.split("-")[1];
                var name = namezrsx.split(",")[0];
                var type = namezrsx.split(",")[1];
                $.ajax({
                    url: "../aaaaaa/aaaaaa.ht",
                    type: "post",
                    datatype: "json",
                    data: {"name": name, "type": type},
                    async: true,
                    success: function (data) {
                        var json = eval(data);
                        re = json[0].zrsx.toString();
                    }
                })
                return huanhang(re, 30);
            }

        },

页面饼图上文字换行

   itemStyle: {
                    normal: {
                        label: {
                            position:
                                'inside',
                            fontSize: 13,
                            color: '#000000',
                            fontFamily: 'Microsoft Yahei',
                            formatter: function (val) {
                                var name = val.name.split("-")[0]
                                return name.split("*").join("\n");
                            }
                        },

换行

function huanhang(params, num) {
    var newParamsName = "";// 最终拼接成的字符串
    var paramsNameNumber = params.length;// 实际标签的个数
    var provideNumber = num;// 每行能显示的字的个数
    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
    /**
     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
     */
    // 条件等同于rowNumber>1
    if (paramsNameNumber > provideNumber) {
        /** 循环每一行,p表示行 */
        for (var p = 0; p < rowNumber; p++) {
            var tempStr = "";// 表示每一次截取的字符串
            var start = p * provideNumber;// 开始截取的位置
            var end = start + provideNumber;// 结束截取的位置
            // 此处特殊处理最后一行的索引值
            if (p == rowNumber - 1) {
                // 最后一次不换行
                tempStr = params.substring(start, paramsNameNumber);
            } else {
                // 每一次拼接字符串并换行
                tempStr = params.substring(start, end) + "<br/>";
            }
            newParamsName += tempStr;// 最终拼成的字符串
        }

    } else {
        // 将旧标签的值赋给新标签
        newParamsName = params;
    }
    //将最终的字符串返回
    return newParamsName
}