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

一、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