使用echarts的字符云显示的title与name不符合的问题
2017-12-05 17:02
579 查看
最近使用了echarts的字浮云做界面,然后发现当鼠标放上某一个name的时候,它显示的title和value跟我放的文字显示不一致,去看了官方网站也没有发现解决的办法,然后找了一些资料,发现可以实现,在这里记录下来,方便以后自己回顾!
其实很简单,就是value值需要逆序排序,官方网站的例子data里面,可以看到value值是逆序去排序的
data: [
{
name: "Sam S Club",
value: 10000,
itemStyle: {
normal: {
color: 'black'
}
}
},
{
name: "Macys",
value: 6181,
itemStyle: createRandomItemStyle()
},
{
name: "Amy Schumer",
value: 4386,
itemStyle: createRandomItemStyle()
},
...
]
所以如果后端传的数据是没有排序的话,那么前端需要去整理一下,进行逆序排序,
array = [
]
var arr = array.sort(function(a,b){
if(a.sage < b.sage){
return 1;
}else if (a.search_volumn > b.search_volumn) {
return -1;
}else{
return 0;
}
})
console.log(arr) //此时是已经逆序的数组
然后再重新遍历新数组,把value值附上,最好别用 minSize: 14,可以去掉,让它默认,基本就可以了,
但是有些字离得太近可能会导致定位不准,这时候给textPadding: 5 一个值,基本就可以了,最主要的,还是value要逆序
参考的网址 http://blog.csdn.net/u012172536/article/details/48208943
其实很简单,就是value值需要逆序排序,官方网站的例子data里面,可以看到value值是逆序去排序的
data: [
{
name: "Sam S Club",
value: 10000,
itemStyle: {
normal: {
color: 'black'
}
}
},
{
name: "Macys",
value: 6181,
itemStyle: createRandomItemStyle()
},
{
name: "Amy Schumer",
value: 4386,
itemStyle: createRandomItemStyle()
},
...
]
所以如果后端传的数据是没有排序的话,那么前端需要去整理一下,进行逆序排序,
array = [
]
var arr = array.sort(function(a,b){
if(a.sage < b.sage){
return 1;
}else if (a.search_volumn > b.search_volumn) {
return -1;
}else{
return 0;
}
})
console.log(arr) //此时是已经逆序的数组
然后再重新遍历新数组,把value值附上,最好别用 minSize: 14,可以去掉,让它默认,基本就可以了,
但是有些字离得太近可能会导致定位不准,这时候给textPadding: 5 一个值,基本就可以了,最主要的,还是value要逆序
参考的网址 http://blog.csdn.net/u012172536/article/details/48208943
相关文章推荐
- 使用Webview显示html文本遇到的字符实体问题
- 在php中使用mb_substr($row['title'],0,15,'utf-8')解决获取的字符后面几们的乱码问题
- 使用vi编辑时,上下左右键显示为字符的问题
- 解决Echarts使用tab切换时只显示第一个tab中图表,其他tab中图表不显示或显示不全问题
- [C] 跨平台使用TCHAR——让Linux等平台也支持tchar.h,解决跨平台时的格式控制字符问题,多国语言的同时显示(兼容vc/gcc/bcb,支持Windows/Linux/Mac)
- 使用python2时会遇到一系列显示中文字符的问题
- [C] 跨平台使用TCHAR——让Linux等平台也支持tchar.h,解决跨平台时的格式控制字符问题,多国语言的同时显示(兼容vc/gcc/bcb,支持Windows/Linux/Mac)
- [C] 跨平台使用TCHAR——让Linux等平台也支持tchar.h,解决跨平台时的格式控制字符问题,多国语言的同时显示(兼容vc/gcc/bcb,支持Windows/Linux/Mac)
- Vue配合echarts 一起使用的出现的问题:(echart无法显示出来)
- IOS使用React等Title不显示问题解决
- IE中打开UTF-8编码title为中文的网页会显示空白页的问题
- 关于RCP中使用系统resource navigator图标和项目名称不显示的问题
- 母版页使用问题(显示系统时间 js)
- Eclipse3.2使用VSS签出状态不显示问题解决
- 使用struts bean:write标签时不能显示Integer,BigDecimal等类型的属性问题的解决
- 使用SQL查询分析器查询显示最大只有256个字符的解决办法
- 读取excel文件显示在gridview中数据.字符.数字混合时无法全部读取的问题!
- 关于使用Adoeb SVG Viewer在IE中无法正常显示SVG文档的问题
- 关于使用Intel集成显示芯片桌面右键迟钝问题的解决办法
- 解决使用VC运行时库函数wprintf和wcount显示中文不正确的问题