菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-可视化图表的使用_汪刚_2023.06.05 [打印本页]

作者: 霁后彩虹O 时间: 2023-6-14 00:10
标题: 前端-可视化图表的使用_汪刚_2023.06.05
今日学习内容：

1.引入地图

1.首先从Echarts官网下载相关地图的json文件，选择菜单栏的下载，地图下载功能。找到需要下载的地图。

2.打开刚刚下载的json文件，我们看到是一串json格式的文件，里面包含地图里面各元素的属性及维度信息。

3.创建一个js文件，在初始化函数中加入下内容，其中在echarts.registerMap变量中，第一个变量是地图的名字，第二个参数是json文件里面的内容。

4.导入相关的js文件，Echarts相关的js文件以及刚刚创建的js文件都需要引入到项目中。

5.在地图的相关配置js代码中，series变量中包含很多属性，其中map属性的值是刚刚echarts.registerMap中第一个变量的值。

`geo: geo: {` `type: 'map',` `map: 'chinaMap',` `zoom: 1.5,` `label: {` `show: true,` `}` `},` `series: [` `{` `data: personNum,` `geoIndex: 0,` `type: 'map'` `}, //添加散点` `{` `// 散点坐标` `data: [` `{ value: [117.000923, 36.675807] },` `{ value: [104.065735, 30.659462] },` `{ value: [87.617733, 43.792818] }` `],` `type: 'effectScatter', //涟漪动画` `coordinateSystem: 'geo', //散点使用的坐标系统

6.Echarts地图的展示，我们通过动态加载数据，呈现地图的相关数据，发现地图进行了相关加载。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)