一、echarts 人均收入柱状图window系统显示不出国旗问题分析

1.如下图所示：该柱状图在window下面只显示emoji 字符，能不能转化完全看系统支不支持

2.图中的国家标识是以emoji字符来命名，但是在苹果电脑下面显示会出现对应国家的国旗图标

二、让苹果电脑的效果在windows下面显示同样的效果

大概想法通过rich动态匹配显示对应国家的国旗（包括全世界国家对应的中英文以及编码的js、包括全世界国家的编码以及唯一标识的js、以国家标识命名的图片列表）

注意：目前通过对比js了解到加拿大和美国编码都是1需要自己修改其中一个国家的编码
js和图片如下图所示：

1.动态匹配对应中文名称的国家编码

2.用国家编码去匹配对应的国家标识名称

3.动态设置rich匹配对应的图片

1.yAxis以中文名称赋value值并取到对应的国家标识给到name参数

2.定义formatter并通过value值取到对应的国家名称（yAxis的name是不是没有用上？但是上面的yAxis的name是用于展示y轴数据formatter只能获取到value，所以得用value再去匹配国家标识），设置rich为空是为了后面对rich进行动态处理

3.动态设置rich并用formatter中的value（国家标识）对应以国家标识命名的svg

通过动态设置yAxis、formatter以及rich可以达到任何想要设置的效果

当然这个方法也有一定得局限性，比如只支持固定参数以及固定的自定义参数（不过也可以通过接口来动态化这些固定的参数）

最终效果如下图

动态添加数据会遇到数据已更新但是界面没有展示

添加监听事件：
//数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
option: { //观察option的变化
handler(newVal, oldVal) {
if (this.myChart) {
if (newVal) {
this.myChart.setOption(newVal);
} else {
this.myChart.setOption(oldVal);
}
} else {
this.init();
}
},
deep: true //对象内部属性的监听，关键。
}
init(){
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById(‘myQueueEchart’))
// 绘制图表，this.option是数据
myChart.setOption(this.option,true)
},

需要动态的数据直接通过this.option.xxxx = obj;即可

文件链接

链接: https://pan.baidu.com/s/13ArNtqK-4_R8nJm58CO2zw 提取码: vhwt

echarts rich设置动态图片/动态数据；echarts 人均收入柱状图 window系统显示不出国旗；echarts动态rich相关推荐

以canvas为动态网页背景，添加的标签内容不显示（附源码-----动态背景星空）
问题描述: 我在网上下载了一个动态网页背景--星空,然后本地能运行,但是当我添加其他组件的时候,发现组件不显示,然后只能显示动态背景.仔细看了一下代码,发现这个动态背景是依靠canvas标签来实现的. ...
医疗大数据在学习型健康医疗系统中的应用
点击上方蓝字关注我们医疗大数据在学习型健康医疗系统中的应用柴扬帆1,2, 孔桂兰1, 张路霞1 1 北京大学健康医疗大数据国家研究院,北京 100191 2 北京大学公共卫生学院,北京 10019 ...
怎么把动图放到word里_word文档怎么插入gif动态图片
有时候,为了更生动地表达某些数据或现象,我们需要在word中插入gif动态图.以下是学习啦小编为您带来的关于Word文档插入GIF动态图片,希望对您有所帮助. Word文档插入GIF动态图片下载An ...
如何将MP4视频文件转换成GIF动态图片
在观看电视剧时,剧中常会出现很多搞笑滑稽的镜头,比如把视频MP4转GIF动态图片,那么效果就很好了.虽说现在很多的手机视频播放器都有制作GIF的功能,不过也就10秒钟左右,时间很短,如果使用软件制作G ...
html动画转换为gif图片,「视频转gif」如何制作gif动态图片
网上很多小动画都是GIF格式的,其中也有很多是从视频转换成gif的.其实GIF是将多幅图像保存为一个图像文件,从而形成动画,最常见的就是通过一帧帧的动画串联起来的gif图.那么视频如何制作gif动态图 ...
php动图加水印,php+imagemagick给gif动态图片添加水印
摘要:GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片,也可以给图片加水印.但如果用GD库给gif动态图片添加水印,最终动态图片会变成静态 ...
php聊天动图,如何制作微信动态表情真人qq聊天搞笑动态图片多人摇头娃娃在线制作...
呼呼,总算是完成了哦,最后就是保存摇头娃娃啦,单击"另存为"按钮-"保存为单独文件",在随即弹出的保存页面里面,设置图片的保存路径并为图片命名,最后选择&quo ...
爬虫案例之爬取国家药监局化妆品生产许可明细（爬取动态加载数据）
一.实验目的爬取国家药监局(化妆品生产许可信息管理系统服务平台 (nmpa.gov.cn))化妆品生产明细(具体到每家企业的具体信息),当我们进入该网站首页时,发现其结构为每页15条的json类型数 ...
小程序image设置占位图片
小程序image控件设置占位图片: 1.通过判断url为空显示不同的图片就可以了 <image src="{{item.url?item.url:'../../../images/ic ...

echarts rich设置动态图片/动态数据；echarts 人均收入柱状图 window系统显示不出国旗；echarts动态rich