echarts 导入地区.json文件生成地图
2023-09-17
[摘要] 提前说明:?对于前端写大屏展示,在地图这一块有很多是直接引用的文件,但是也有一部分是使用的数据可视化的地图。?本文只是简单的说一说我在使用时是如何引用的。?另外我这边是,好像是试过4.9的某个版本还有5

提前说明:

? 对于前端写大屏展示,在地图这一块有很多是直接引用的 文件,但是也有一部分是使用的 数据可视化的地图。

? 本文只是简单的说一说我在使用时是如何引用的。

? 另外我这边是 , 好像是试过 4.9 的某个版本 还有 5.1.2版本

? 想下载对应版本的话,例如 5.1.2 版本 ,直接:

1、提前下载好需要的文件,例如我在下面用到的是,中国的地图文件 ,名字就都是随意的哈,你也可以叫

2、在创建好的项目中安装 命令:

3、如果不是用的 ,也有其他的 等其他的包管理工具,都大差不差

4、安装完后这里建议直接在里面引入并绑定在原型上,因为可以不用每次在别的组件里面使用的时候都要

? 具体方法就是:

? 1、在中引入 :

? 2、绑定到原型上 :

? 以后需要用的时候就是直接 :

? 这里后面会用到,具体往下看

5、在引入的时候呢就顺便把地图引入进来吧 ,

6、当然了在安装完成之前,什么节点啥的应该都创建好了哈

7、就是 的那几步了, 、、啥的

? 我的节点是:

? 这里是用的 ,当然也可以用 、 ;但是为了保证不在别的页面串图重名啥的, 和 也都说了尽量不要过多使用 嘛,就用 了
?

? 这里我是直接在 里面初始化和渲染

? 初始化:

? 既然初始化了,那就直接把option也给干出来吧

? 定义:

? 里面的东西就一会再填了哈

8、这一步就直接把地图数据放到 上去

? 注意这里两个

? 第一个:字符串的 是你给这个地图取得名字,也可以是中文名 ‘中国’ ;

? 第二个: 是之前你在引入地图 文件的时候取的名,也就是第5步的时候 ,这个 你也可以写成 ,但是相应的 ,在这里使用的时候,第二个 就得换成

9、接下来就可以直接给 添加属性,让它可以读取地图数据

 

10、最后就是渲染 了

 
 
 

差不多一个地图就是这么展示的,如果还有其他想法和指定显示,可以在 官网查看相关属性。


平台注册入口