JavaScript用数据可视化ECharts制作地图实例分享

　　介绍

这篇文章主要讲解了“JavaScript用数据可视化ECharts制作地图实例分享”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习”JavaScript用数据可视化ECharts制作地图实例分享”吧!

<编辑类="目录">目录 <李>

概述

<李>

注意事项

<李>

一。使用方式

<李>

二。实现步骤

<李>

初步实现代码

<李>

效果:

<李>

geo常见配置

<李>

添加上面配置之后的效果图:

<李>

显示某一个省份(河南省)

<李>

效果

<李>

不同区域显示不同颜色

<李>

地图和散点图的结合

概述

地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气,尤其是在大屏展示中更是扮演着必不可缺的角色

注意事项

一。使用方式

1。百度地图API(高德地图API)

<李>

需要申请百度API

2。矢量地图

<李>

需要准备矢量地图数据

二。实现步骤

1. echarts最基本的代码结构

引入js文件状况容器——初始化对象,设置选择

2。准备中国的矢量地图json文件,放到json/地图/的目录下

3。使用Ajax获取中国。json

//得到美元(& # 39;json/地图/china.json& # 39;, function  (chinaJson), {})

4。在回调函数中往echarts全局对象注册地图的json数据

echarts.registerMap (& # 39; chinaMap& # 39;, chinaJson)

5。在地理下设置

{ 　　,,,类型:& # 39;地图# 39; 　　,,,地图:& # 39;chinaMap& # 39; 　　}

初步实现代码

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; meta  http-equiv=癤-UA-Compatible",内容=癐E=edge"比; 　　,,,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　,,,& lt; title>地图的实现& lt;/title> 　　,,,& lt; script  src=https://www.yisu.com/zixun/薄?lib/echarts.min.js ">