zoukankan      html  css  js  c++  java
  • 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);// 绘制表格
               });
            }
  • 相关阅读:
    form表单介绍
    if条件语句
    表格.html
    列表.html
    CSS Js链接HTML文件
    DQL
    mysql介绍
    第一次接触mysql
    逻辑运算、作用域问题、DOM
    Js数据类型具体分析
  • 原文地址:https://www.cnblogs.com/dfghjkl/p/5282462.html
Copyright © 2011-2022 走看看