• 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);// 绘制表格
               });
            }
  • 相关阅读:
    三角函数
    第十七次作业
    第十六次作业
    第15次作业
    第13次java作业
    第十二次java作业
    第十一次java作业
    第十次java作业
    第九次java
    第八次java作业
  • 原文地址:https://www.cnblogs.com/dfghjkl/p/5282462.html
Copyright © 2020-2023  润新知