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

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