国旗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