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