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

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

2024-06-08 22:06:20 前端知识 前端哥 509 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
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!