EChartJS第11期:3万人看过的阴影立体地图

发布时间 :2021-06-09

​​

    地图是一门语言,能给人提供空间思维,从古至今都具有非常重要的价值,在BI可视化领域,地图可视化也占据非常重要的角色,我们今天要分享的主题就与此有关。
    我们先看一下参考案例,来源于ECharts官方案例,有3万多人关注,她这种带阴影的立体效果,确实提升了地图显示的颜值。

网址如下:https://www.makeapie.com/editor.html?c=x48o0ysaCY    

放大后的效果如图:

    我们把她引入到PowerBI中,需要以下3个步骤:

1、准备GeoJSON数据    

GeoJSON是一种对各种地理数据结构进行编码的格式,可以表示几何、特征或者特征集合。支持类型有:点、线、面、多点、多线、多面和几何集合。是互联网中最常见的一种地图数据格式。    我们可以将数据放在服务器中,通过URL地址进行访问;更方便的形式,是直接将数据拷贝到EChartJS中(当地图数据量小时,我们推荐这种方式)。


2、准备与GeoJSON相对应的BI数据    

BI数据也就是业务数据,需要存在与地图名称对应的字段,例如:    在GeoJSON中,对应的name值为“南京市”

    那么,在BI数据中,值也要与之对应,这里是“名称”字段:

    如果值未对应上,则地图不会显示正确效果。例如我们将上图中的“南京市”修改为“南京”:

在地图GeoJSON数据中,由于没有对应的数据,地图颜色显示则会使用默认颜色,而跟数值没有关系:

3、拷贝代码并进行调整

由于ECharts库具有灵活的配置项,能呈现出丰富的可视化效果,为了发挥她的优势,我们在EChartJS视觉对象中完全支持ECharts所有配置项。所需做的工作仅是将示例代码拷贝过来,修改其中部分代码即可得到我们想要的效果。例如:我们现在将“江苏省”数据,切换为“浙江省”数据,则只需要将对应的地图GeoJSON替换即可。

随后,同理将BI数据更改为浙江省数据,则可获得浙江省的显示效果,如图:

由于文章篇幅有限,感兴趣的童鞋可以关注公众号,回复“阴影立体地图案例”即可获得对应的PowerBI案例文件。EChartJS视觉对象下载方式:回复“ECharts”即可获取下载地址

​联系作者:
    微信:luojiandan;邮箱:luojiandan@163.com;QQ:45096732


​​​​

今日热门