JAVA高级面试进阶训练营视频教程

admin

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