首页 前端知识 【echarts】解决动态条形图Bar Race国旗emoji在PC端不显示的问题

【echarts】解决动态条形图Bar Race国旗emoji在PC端不显示的问题

2024-06-08 22:06:20 前端知识 前端哥 535 373 我要收藏

国旗emoji因为在PC端无法正常显示,呈现国家缩写的样式。

解决办法:

1.首先下载svg格式的国旗图片到本地

链接:https://pan.baidu.com/s/1iMDsKWFixfJuNN-NQi3mWg 
提取码:upq5

2.改变yAxis处的代码

原来:

 

改变后(部分): 

axisLabel: {
show: true,
fontSize: 14,
formatter: function (value) {
return value + '{'+value+'|}';
},
rich: {
China:{
backgroundColor: {
image: 'flagIcon/cn.svg'
}
},
Peru:{
backgroundColor: {
image: 'flagIcon/pe.svg'
}
},
}
},
复制

解释:

A.首先在formatter中将'{flag|' + getFlag(value) + '}'改成'{'+value+'|}'

此处value作为函数参数,分别为纵坐标最前面的国家名称字符串

写成{value|}的含义是,‘|’前面的值可以映射到rich里的对象,rich里可以规定标签的样式。

B.然后在rich里为每一个国家指明图片的位置,有几个国家,就要写几个对象

China:{
backgroundColor: {
image: 'flagIcon/cn.svg'
}
},
复制

China对应国家名称,image后面为对应的国旗图片地址。

二者的对应关系可以参考下方json文件,name是国家名称,emoji为图片名称

https://fastly.jsdelivr.net/npm/emoji-flags@1.3.0/data.json

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11594.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!