精华内容
下载资源
问答
  • 问题描述:echarts图中tooltip文本内容太长 在用echarts绘制折线图时,可能会遇到seriesName太长,导致tooptip显示不全,多余的文本被隐藏的问题,如下: 提供两种方法解决该问题: 方法1:格式化重新输出,使用...

    问题描述:echarts图中tooltip文本内容太长

    在用echarts绘制折线图时,可能会遇到seriesName太长,导致tooptip显示不全,多余的文本被隐藏的问题,如下:
    在这里插入图片描述

    提供两种方法解决该问题:

    方法1:格式化重新输出,使用tooltip的formatter配置项,格式化输出,网上很多例子可使用,可自行参考
    方法2:使文本支持换行展示,使用tooltip的extraCssText配置项,给tooltip添加样式即可,简单方便

     tooltip: {
         trigger: 'axis',
         confine: true,
         extraCssText: 'white-space: normal; word-break: break-all;'
     },
    

    在这里插入图片描述

    展开全文
  • tooltip组件中的数据,蓝色文本与类目轴蓝色数据对应,起视觉引导作用。 默认情况下,tooltip里面的多组数据文本,是同一个父节点。而tooltip组件的foramtter值,也是填充到这个...

    先上图,看看效果,通过tooltip的formatter:function实现。
    在份未发这里插入图片描述 tooltip组件中的数据,蓝色文本与类目轴蓝色数据对应,起视觉引导作用。

    默认情况下,tooltip里面的多组数据文本,是同一个父节点。而tooltip组件的foramtter值,也是填充到这个节点里面的,就是黑色透明背景的这个元素。所以要通过给不同分组的数据,添加不同的父元素,才能分别设置样式。
    在这里插入图片描述
    为了不影响其他样式,应该把tooltip渲染出的HTML标签也用上。通过浏览器控制台,查看了tooltip组件里面的HTML元素,发现那个小圆点就是个span标签。除此之外就只有个br标签,没有其他的了。
    在这里插入图片描述
    然后在formatter函数里面,用console.log打印参数,发现span标签就是每条数据的marker属性。这样就好组装字符串了。又不会影响其他样式。
    贴上代码:

    formatter:function(params){
                        var br = '<br>';
                        var result = '';
                        var len = params.length;
                        var lastIndex = len-1;
                        for(var i=0; i<len; i++){
                            if(i === 0){
                                result += params[i].name+br+params[i].marker+params[i].seriesName+':'+params[i].value+br;
                                continue;
                            }
                            if(i === lastIndex){
                                result += params[i].marker+params[i].seriesName+':'+params[i].value+'<span>';
                                continue;
                            }
                            if(params[i].name === params[i-1].name){
                                result += params[i].marker+params[i].seriesName+':'+params[i].value+br;
                            }else{
                                result += '<span style="color:#369ae1">'+br+params[i].name+br+params[i].marker+params[i].seriesName+':'+params[i].value+br;
                            }
                        }
                        return result;
                    }
    
    展开全文
  • .el-tooltip__popper.is-dark{ background: rgb(7, 44, 76, 0.8) !important; } //箭头颜色修改 .el-tooltip__popper .popper__arrow { border-width: 6px; border-color: rgb(7, 44, 76, 0.8); } //上箭头 .el-...
    //黑色主题文本框样式修改
    .el-tooltip__popper.is-dark{
      background: rgb(7, 44, 76, 0.8) !important;
    }
    
    //箭头颜色修改
    .el-tooltip__popper .popper__arrow {
      border-width: 6px;
      border-color: rgb(7, 44, 76, 0.8);
    }
    //上箭头
    .el-tooltip__popper[x-placement^=top] .popper__arrow:after {
      border-top-color: #395670 !important;
    }
    //下箭头
    .el-tooltip__popper[x-placement^=bottom] .popper__arrow:after {
      border-bottom-color: #395670 !important;
    }
    //右箭头
    .el-tooltip__popper[x-placement^=right] .popper__arrow:after {
      border-right-color: #395670 !important;
    }
    //左箭头
    .el-tooltip__popper[x-placement^=left] .popper__arrow:after {
      border-left-color: #395670 !important;
    }
    
    展开全文
  • echart x轴文本过长的处理1.换行axisLabel和tooltip都设置换行。tooltip提示框本身不支持换行,所以通过formatter返回一个div来设置样式,从而使其支持换行,但效果不太好,其他的也会受影响;testBarOption1 = { ...

    echart x轴文本过长的处理

    1.换行

    axisLabel和tooltip都设置换行。

    tooltip提示框本身不支持换行,所以通过formatter返回一个div来设置样式,从而使其支持换行,但效果不太好,其他的也会受影响;

    testBarOption1 = {
        tooltip : {
            trigger: 'axis',
            padding: 10,
            formatter : function(params){
                var newParamsName = "";// 最终拼接成的字符串
                var paramsNameNumber = params[0].name.length;// 文字的个数
                var provideNumber = 10;// 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需要显示几行,向上取整
    
                var data ='';
                $.each(params,function (index,item) {
                    data += item.seriesName + '&nbsp;:&nbsp;' + item.value + '</br>'
                });
                /**
                 * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
                 */
                // 条件等同于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[0].name.substring(start, paramsNameNumber);
                        } else {
                            // 每一次拼接字符串并换行
                            tempStr = params[0].name.substring(start, end) + "\n";
                        }
                        // 每一次拼接字符串并换行
                        newParamsName += tempStr;// 最终拼成的字符串
                    }
    
                } else {
                    // 将旧标签的值赋给新标签
                    newParamsName = params[0].name;
                }
                //将最终的字符串返回
                // return newParamsName +'</br>' + data;
                return `<div class="toolDiv" style="white-space: normal;">${newParamsName +'</br>' + data}</div>`
            }
        },
        calculable : true,
        legend: {
            x:'right',
            data:['类型A','类型B','平均值']
        },
        grid: {
            x: 40,
            x2: 10,
            // y: 50,
            // y2: 40,
            borderWidth: '1'
        },
        dataZoom: {   //滚动条
            show: true,
            y: 300,
            // realtime: true,
            start: 0,
            end: 70,
            height: 14,
            handleColor: '#1a8edc',
            handleSize: 5,
            fillerColor: '#a5cdea'
        },
        xAxis : [
            {
                type : 'category',
                axisLine: {   //坐标轴
                    show:true,
                    lineStyle: {
                        width: 2,
                        color: '#d9d9d9'
                    }
                },
                splitLine:{
                    show:false
                },
                axisTick: {   //刻度
                    lineStyle: {
                        width: 2,
                        color: '#d9d9d9'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                        // baseline: 'middle'
                    },
                    interval: 0,     //文字全部显示
                    formatter : function(params){
                        var newParamsName = "";// 最终拼接成的字符串
                        var paramsNameNumber = params.length;// 文字的个数
                        var provideNumber = 10;// 每行能显示的字的个数
                        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) + "\n";
                                }
                                newParamsName += tempStr;// 最终拼成的字符串
                            }
    
                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        //将最终的字符串返回
                        return newParamsName
                    }
                },
                data :['结构工程','基坑防护','土石方','地下连续墙','地基处理','防水工程','措施工程措施工程措施工程措施工程','其他','供电','区间','车站辅助设备']
            }
        ],
        yAxis : [
            {
                type : 'value',
                // name : '收入',
                nameTextStyle: {
                    color: '#333'
                },
                axisLine: {   //坐标轴
                    show:true,
                    lineStyle: {
                        width: 2,
                        color: '#d9d9d9'
                    }
                },
                splitLine: {     //背景网格线
                    show:false,
                    lineStyle: {
                        color: '#f5f5f5',
                        width: 1
                    }
                },
                axisTick: {   //刻度
                    show: false
                },
                axisLabel:{
                    formatter: '{value}',
                    textStyle: {
                        color: '#999'
                    }
                },
                splitArea:{   //背景区域
                    show:true,
                    areaStyle:{
                        color:['#edf2f6','#fff']
                    }
                }
    
            },
            {     //曲线
                type : 'value',
                // name : '温度',
                axisLine:{
                    show:false
                },
                axisLabel : {
                    show:false
                },
                splitLine:{
                    show:false
                }
            }
        ],
        series : [
    
            {
                name:'类型A',
                type:'bar',
                // barWidth:30,
                barGap: 10,  //两柱子距离
                barCategoryGap: barCategoryGap,
                itemStyle: {normal:{color:'#8779e8'/*,barBorderRadius:[15,15,0,0]},emphasis:{barBorderRadius:[15,15,0,0]*/}},
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4]
            },
            {
                name:'类型B',
                type:'bar',
                // barWidth:30,
                barGap: 10,  //两柱子距离
                barCategoryGap: barCategoryGap,
                itemStyle: {normal:{color:'#c394e5'/*,barBorderRadius:[15,15,0,0]},emphasis:{barBorderRadius:[15,15,0,0]*/}},
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0]
            },
            {
                name:'平均值',
                type:'line',
                scale: true,
                symbol: 'emptyCircle',   //圆点样式
                symbolSize:3,
                smooth: true,
                splitLine: {
                    lineStyle: {
                        color: '#f26078',   //曲线颜色
                        width: 1
                    }
                },
                yAxisIndex: 1,
                data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0]
            }
        ]
    };

    效果:



    以上tooltip里文字长的处理并没有生效,单纯只是div的作用,而且其他靠近边缘的也换行了,所以效果不好。

    2.axisLabel设置换行(同上),tooltip设置成省略号。

    tooltip : {
        trigger: 'axis',
        padding: 10,
        formatter: function(datas) {
            var data ='';
            $.each(datas,function (index,item) {
                data += item.seriesName + '&nbsp;:&nbsp;' + item.value + '</br>'
            });
            if (datas[0].name.length > 5) {
               return datas[0].name.substring(0, 6) + '...'+'</br>' + data;
            } else {
               return datas[0].name +'</br>' + data;
            }
        }
    },

    效果:


    3.axisLabel设置成省略号,tooltip不理它。

    xAxis : [
        {
            type : 'category',
            axisLine: {   //坐标轴
                show:true,
                lineStyle: {
                    width: 2,
                    color: '#d9d9d9'
                }
            },
            splitLine:{
                show:false
            },
            axisTick: {   //刻度
                lineStyle: {
                    width: 2,
                    color: '#d9d9d9'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#999'
                    // baseline: 'middle'
                },
                interval: 0,     //文字全部显示
                formatter: function(val) {
                   if (val.length > 5) {
                      return val.substring(0, 6) + '...';
                   } else {
                      return val;
                   }
                }
              
            data :['结构工程','基坑防护','土石方','地下连续墙','地基处理','防水工程','措施工程措施工程措施工程措施工程','其他','供电','区间','车站辅助设备']
        }
    ],

    效果:



    展开全文
  • 在ECharts折线图中(其他系列图标同理),我们需要对x轴坐标标签、坐图形上的文本标签、提示框组件文本等进行格式化,选项参数设置如下:x轴坐标标签格式化: xAxis: { axisLabel: { show: true, // 默认为true...
  • 主要是 使用 Content Size Fitter 和 Horizontal Layout Group ,Vertical Layout Group组件 Vertical Layout Group组件是 垂直 排列的组件。  Horizontal Layout Group是竖直排列的...[Unity][UGUI]Tooltip提示框 3.
  • Flex 4中设置ToolTip文本字体的大小

    千次阅读 2013-02-21 10:36:37
    ... creationComplete="application1_creationCompleteHandler(event)"> <!-- 将非可视元素(例如服务、值对象)放在此处 ... <s:Button y="100" label="test tooltip" toolTip="my tooltip showed." />
  • jquery Tooltip简易文本提示框插件
  • toolTip中的文本换行

    千次阅读 2011-02-24 16:15:00
    您将toolTip 属性的值设置为一个文本字符串, 并且, 当鼠标指针悬停在该组件上时, 会显示该文本字符串。    如果你想要在toolTip中换行显示文本,则:  在ActionScript 中, 您使用 /n 转义的新行...
  • Vue+element 实现tooltip文本超出区域后才会浮现前言具体需求解决方案方案一方案二具体方法1.先在页面上定义一个tooltip标签2.在文字区域的父标签上添加鼠标移入移除方法3.引入需要的方法4.在methods添加鼠标移入...
  • ** 添加 directive tooltip 对省略文本才出现的支持 即:当添加了 modifier ellipsis 时,可以使 tooltip 只在元素中文本过长省略时才显示 <p><strong>3. Pull Request针对问题的重现方式(没有...
  • 问题:如何自定义tooltip提示框中图标和文本样式? echarts官网可自行查阅: https://echarts.apache.org/zh/option.html#legend.tooltip 主要时tooltip中的formatter函数 通过console.log(params)我们可以在控制台...
  • 效果图如下: 主要是调用ToolTipService.ToolTip属性主要代码如下:
  • GridView 使用ToolTip 显示提示文本内容

    千次阅读 2014-07-01 09:18:43
    1.2 MouseLeave 隐藏提示内容,避免当前窗体最小化后仍显示 ToolTip 文本 2. 防闪烁处理 3 代码: private void grdViewMain_MouseMove(object sender, MouseEventArgs e) { GridHitInfo info = ...
  • 一个widget设置一个不变的tooltip文本,当鼠标移上去时显示tooltip,只需调用widget的setToolTip()设置文本即可。有时我们设置了ToolTip,但并不需要显示,QT并没有直接的方法,需要在EVENT事件中自己判断并处理。
  • 1.定义样式,实现超出部分省略号: .con_txt { ...2.el-tooltip组件本身就是悬浮提示功能,但是我们需要给超出的文本加提示,没超出的不加提示,所以对组件进行二次封装: <template> <div
  • 基础提示框(Tooltip) <style> /* Tooltip 容器 */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* 悬停元素上显示.../* Tooltip 文本 */ .toolt...
  • 为gridview的每个单元格添加鼠标悬停提示文本tooltip)! gridview编译到客户端是table,tooltip属性被编译成title属性。于是,我就在gridview的RowDataBound事件里写下如下代码: protected void GridView1_...
  • vue element tab标签页文本溢出时,鼠标上去 Tooltip文字提示 重点:el-tooltip标签内加slot=“label” <el-tooltip class="item-tabs" effect="dark" :content="item.stationName" placement="bottom-start" ...
  • 内容如题,请帮忙!谢谢!
  • 这个长名最长256个字符,在所有的产品的ListView中,当鼠标滑过一个ListItem时,都需要一个多行文本的的ToolTip来显示这个长名但是对于我们有些产品是很古老的VB程序,VB中的ListView如何显示多行文本ToolTip?...
  • 最近在开发中发现使用elementUI中template自定义文本,由于文本的长度较长,缩略展示配置:show-overflow-tooltip="true",但没起作用。 <el-table :data="dataSource" :max-height="tableH" :height="tableH...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 556
精华内容 222
关键字:

tooltip文本