echarts之字符云tooltip显示混乱问题的解决办法

echarts字符云中tooltip显示混乱主要表现为一下两点:

1、字体与其显示框内容不对应鼠标识别错误

  解决思路:

  就是option里的数据要对value降序排序(这一点很关键,是必须的一步)

  把间距调大点 textPadding: 10。

2、文字丢失

  解决思路:

  size属性是文字丢失的原因,最好设置为100%。

function wordWorldDraw(){    
  require([ 'echarts', 'echarts/chart/wordCloud' ],
   require.config({
    paths: {  
         echarts: '<%=request.getContextPath()%>/js/echarts/v2.2.7'  
              }  
          });
    function(ec) {
        var myCharts=ec.init(document.getElementById('cloud'));
        var ecConfig = require('echarts/config');   
        var option = {
                title: {
                    //因为字符云的主标题是绘制在画布上的
                    //text: 'Google Trends',
                   //link: 'http://www.google.com/trends/hottrends'
                },
                tooltip : {
                    trigger : 'item',
                    formatter : function(params) {
                        return params.name+":"+params.value;
                    }
                },
                textStyle:{
                },
                series:  [{
                    //name: '地域',
                    type: 'wordCloud',
                    size: ['100%', '100%'],//防止字体丢失
                    center:['60%','50%'],
                    textRotation : [0, 45, 90, -45],
                    textPadding: 3,
                    autoSize: {
                        enable: true,
                        minSize: 14
                    },
                    data:  CloudEchartsDataVOJson.seriesDatas//数据交互
                }
                      ]
                  };
            myCharts2.setOption(option);// 绘制表格
           });
        }

 

posted @ 2016-03-16 10:36  一人的代码  阅读(3710)  评论(0编辑  收藏  举报