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