echarts2.0的formatter显示过长问题

最新推荐文章于 2024-05-15 23:02:44 发布

原创最新推荐文章于 2024-05-15 23:02:44 发布 · 5.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #join函数

web 同时被 2 个专栏收录

11 篇文章

订阅专栏

Bug调试

10 篇文章

订阅专栏

本文介绍如何使用ECharts 2.0优化饼图Tooltip的显示方式，通过字符串处理技巧实现自动换行，解决过长文本显示不全的问题。

使用echarts2.0（不要问为啥不使用3.0，因为做的是在别人的代码上添加内容，所以人家用2.0我也用2.0），中间用到了饼图，之前定义的formatter代码如下：

optionPie = {
    title : {
        text: '观点类别分析',
        subtext: 'FD类别',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
       formatter: function(param){
    	   var ClusterID=mapNameCluster[param.name];
   	       //alert("观点"+ClusterID);
           var str = "观点"+ClusterID+"总结："+summary[param.name];
           return str;
       }
    },
    legend: {
        orient : 'vertical',
        x : 'right',
        y : 'top',
        data:clusterNames
    },
    toolbox: {
        show : true,
        x:'left',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1,
                        tooltip : {
                            trigger: 'item',
                            formatter: "{b}:{c}"
                            },
                        itemStyle:{ 
                            normal:{ 
                            label:{ 
                              show: true, 
                              formatter: '{b}' 
                            }, 
                            labelLine :{show:true} 
                          }
                        }
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'类的比重',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:pieData,
            itemStyle:{ 
                normal:{ 
                      label:{ 
                        show: true, 
                        formatter: '{b}:({d}%)' 
                      }, 
                      labelLine :{show:true} 
                    } 
                } 
            	
        }
    ]
};
function eConsole(param) {
	 var ClusterID=mapNameCluster[param.name];
	    //alert("观点"+ClusterID);
    //var str = "观点"+ClusterID+"总结："+summary[param.name];
    //alert(str);
    curpage=parseInt(ClusterID);
    
    //alert(curpage);
    getTableData();
    ajax_ClusterUserGraph(ClusterID);
    
}
var myChart1 = echarts.init(document.getElementById('cluterPie')); 
myChart1.setOption(optionPie);
myChart1.on('click', eConsole);

因为str这个变量从数据库取出来之后特别特别长，而tooltip的formatter默认显示一行，结果就变得特别特别长，根本显示不完。解决办法很简单，就是用split函数与join函数配合，在字符串中插入换行符（注意是插入html换行，而不是\n，之前脑子抽了，一直插入\n没反应……）

formatter: function(param){
    	   var ClusterID=mapNameCluster[param.name];
   	       //alert("观点"+ClusterID);
           var str = "观点"+ClusterID+"总结："+summary[param.name];
           var arr = str.split('');
           //console.log(arr);
           for (var i = 24; i < arr.length; i += 25) ///25字换行
        	   {
        	      arr[i] += '</br>';
        	   }
             //alert(arr.join(''));
              str=arr.join("") 
           return str;
       }

问题解决！

不过现在还有另外一个问题，就是这样虽然横向不长，但是纵向特别长，当tooltip接近到图的边缘的时候，tooltip就在不断重新加载，目前还没找到合适的办法解决，临时的解决办法是调整换行的字数到一个比较合理的位置，并把图的高度设高一点= =。