• echarts中自定义tooltip的换行问题


    问题描述:

    鼠标移入,雷达图的时候,内容挤在一起,我要的效果是换行:

     

    此时的代码,此时代码里面的 换行也是没有效果的:

    tooltip: {
        trigger: 'item',
        show:true,
           formatter:function(params){
            var s='';
            s+=params.name+'
    ';
            var values=params.value.toString().split(",");
            s+='业务能力:'+values[0]+'
    ';
            s+='进件效率'+values[1]+'
    ';
            s+='运营能力'+values[2]+'
    ';
            s+='贷后能力'+values[3]+'
    ';
            s+='风控能力'+values[4]+'
    ';
            //系列名称:seriesName: string  数据名,类目名 : name: string   传入的数据值:value: number|Array
            return s;
         }
    },


     解决办法一:

    添加:

    extraCssText:'120px; white-space:pre-wrap'//额外附加到浮层的 css 样式 ;white-space:pre-wrap的作用是保留空格,并且除了碰到源码中的换行和<br/>会换行外,还会自适应容器的边界进行换行。

    有朋友问我 extraCssText 加的位置:

    官方文档中描述:

     

    tooltip: {
            trigger: 'item',
            show:true,
               formatter:function(params){
                var s='';
                s+=params.name+'
    ';
                var values=params.value.toString().split(",");
                s+='业务能力:'+values[0]+'
    ';
                s+='进件效率'+values[1]+'
    ';
                s+='运营能力'+values[2]+'
    ';
                s+='贷后能力'+values[3]+'
    ';
                s+='风控能力'+values[4]+'
    ';
                //系列名称:seriesName: string  数据名,类目名 : name: string   传入的数据值:value: number|Array
                return s;
             },
             extraCssText:'120px; white-space:pre-wrap'
        },


    第二种方式:

    直接使用 <br/>换行
                                           


    转:https://blog.csdn.net/lwang_IT/article/details/82685116

  • 相关阅读:
    Java开发web的几种开发模式
    Tomcat7.0安装配置
    Apache与Tomcat 区别联系
    编写 Window 服务程序
    系列文章--SharePoint 开发教程
    Google Chrome浏览器调试功能介绍
    Chrome的JS调试工具
    Google Chrome 调试JS简单教程[更新]
    ASP.NET常用标准配置web.config
    WINDOWS下kill进程的命令
  • 原文地址:https://www.cnblogs.com/ostrich-sunshine/p/12011936.html
Copyright © 2020-2023  润新知