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