现在位置首页 / 项目实战 /正文

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

作者: IT小兵 | 2016年4月13日| 热度:℃ | 评论: |参与:

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);// 绘制表格
           });
        }


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询