echarts geo地图示例_ECharts 实现地图散点图上(转载)
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/
ECharts 实现地图散点图(上)
小红 2016-04-28
ECharts 作为国内应用最广泛的前端可视化生成工具,提供了丰富的图表展现方式和便捷的图表操作。 ECharts 支持 geoJson 格式的地图,并且官网上提供了现成的 world,china 及全国34个省市自治区地图的下载。这篇文章中我们将会讲解如何使用 ECharts 实现一个中国地图上绘制的散点图。
一、初始准备
1. 新建html
首先,新建项目目录 echartsMapDemo,在其中新建一个 html 文件 index.html。
echartsMapDemo/index.html:
ECharts map Demo
2.引入echarts文件
从 echarts官网 下载最新完整开发包(目前最新版本是3.1.4)。
将下载好的包放置在 echartsMapDemo/dep 目录下并在 html 中以 script 标签引入:
ECharts map Demo
3.创建图标容器
在 html 中定义一个 div 作为地图的容器,高度设为 500px 。别忘了,一定要保证容器高度不为 0:
ECharts map Demo
然后,我们还需要一个地图文件,echart 提供两种格式的地图数据,一种是 js 格式,一种是 JSON 格式。下文中我们会分别使用这两种方式实现。
同样去 官网 上下载,这里选择下载中国地图 china.js 或 china.json 。你也可以根据需要选择其他省份地图或世界地图
好了,准备工作完成,现在就开始绘制地图了~
二、绘制地图
echart 提供两种格式的地图数据,一种是 js 格式,一种是 JSON 格式。下面分别介绍两种格式的用法:
引用js格式地图数据:
1.在官网上下载 js 格式中国地图 china.js,将下载好的 china.js 放在 echartsMapDemo/map/js 目录下,以 script 标签引入到 html 中:
ECharts map Demo
2.在js中用 echarts.init() 方法初始化一个 ECharts 实例,在 init() 中传入图表容器 Dom 对象,
同时定义一个变量 option,作为图表的配置项:
// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById('map-wrap'));
// mapChart的配置
var option = {
};
3.通过配置 option,新建一个地理坐标系 geo ,地图类型为中国地图。
var option = {
geo: {
map: 'china'
}
}
geo.map 属性定义该地理坐标系中的地图数据,这里我们要用 china.js ,设置map值为 'china'。
这里需要注意,中国地图的map值为 'china' ,世界地图的map值为 'world' ,但如果要引用省市自治区地图 map 值为简体中文,例如 beijing.js,map 值为'北京'。
4.调用 setOption(option) 为图表设置配置项。
mapChart.setOption(option);
引用JSON格式地图数据:
1.同样在官网下载JSON格式的地图数据,放在echartsMapDemo/map/json目录下
2.json数据通过异步方式加载,加载完成后需要手动注册地图
这里我们使用 jQuery 的 $.get() 方法异步加载 china.json (首先要在html中引用 jquery ,这里省略操作说明),在回调函数中,以上述同样的方法初始化一个 mapCharts 、注册地图并设置 option:
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson); // 注册地图
var mapChart = echarts.init(document.getElementById('map-wrap'));
var option = {
geo: {
map: 'china'
}
}
mapChart.setOption(option);
});
});
现在就可以在页面中看到中国地图了:
地图
为了突出散点效果,先为地图改个颜色
var option = {
geo: {
map: 'china',
itemStyle: {// 定义样式
normal: {// 普通状态下的样式
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {// 高亮状态下的样式
areaColor: '#2a333d'
}
}
},
backgroundColor: '#404a59', // 图表背景色
}
换装后的地图:
中国地图底图
三、绘制散点图
1.新建散点图series
在 option 中添加一个 series , series 的类型为散点图 scatter ,坐标系为地理坐标系 geo 。
var option = {
geo: {
...
},
backgroundColor: '#404a59',
series: [
{
name: '销量', // series名称
type: 'scatter', // series图表类型
coordinateSystem: 'geo' // series坐标系类型
}
]
}
2.添加数据
ECharts 中 series.data 是定义图表数据内容的数组,其中每个项数据格式为:
{
name: '北京', // 数据项名称,在这里指地区名称
value: [ // 数据项值
116.46, // 地理坐标,经度
39.92, // 地理坐标,纬度
340 // 北京地区的数值
]
}
首先我们将需要渲染的数据转换成上述数据格式,存在一个变量中:
var myData = [
{name: '海门', value: [121.15, 31.89, 90]},
{name: '鄂尔多斯', value: [109.781327, 39.608266, 120]},
{name: '招远', value: [120.38, 37.35, 142]},
{name: '舟山', value: [122.207216, 29.985295, 123]},
...
]
然后,将 myData 赋值给 series.data:
var option = {
geo: {
...
},
backgroundColor: '#404a59',
series: [
{
name: '销量',
type: 'scatter',
coordinateSystem: 'geo',
data: myData // series数据内容
}
]
}
数据添加完成,就可以在图表中看到渲染出的散点了:
散点图1
3.添加视觉映射组件
视觉映射组件是标识某一数据范围内数据及颜色对应关系的控件,视觉映射组件分为连续型和分段型,这里我们选用连续型 type:continuous 。同时,通过视觉映射组件可以实现 ECharts 值域漫游功能,即通过拖拽控件手柄选择不同数值范围,达到对图表数据的筛选显示。 在 visualMap 属性中设置值域控件的相关配置:
var option = {
...
visualMap: {
type: 'continuous', // 连续型
min: 0, // 值域最小值,必须参数
max: 200,// 值域最大值,必须参数
calculable: true,// 是否启用值域漫游
inRange: {
color: ['#50a3ba','#eac736','#d94e5d']
// 指定数值从低到高时的颜色变化
},
textStyle: {
color: '#fff'// 值域控件的文本颜色
}
}
}
添加了值域控件的图表效果:
散点图2
这样一个基于中国地图的散点图就基本实现了,如果想要继续完善图表,可以为它添加标题,图例,高亮提示等控件,配置方式在这里查看(ECharts 配置项手册),在此不再详细说明。
echarts geo地图示例_ECharts 实现地图散点图上(转载)相关推荐
- echarts label固定位置_ECharts+百度地图网络拓扑应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- echarts地图列表_ECharts中国地图选择器
涂章1 2018/8/24 15:53:34 series: [{ name: '中国', type: 'map', mapType: 'china', selectedMode: false, // ...
- echarts地图文字重叠解决方案_Echarts扩展地图文字位置错乱的问题
最近在弄echarts 因为要用到扩展地图,所以在官网下载了相应的json文件 ,引入之后发现文字位置错乱 于是查找网上资料 发现 textFixed : { '大洋洲' : [265, 0], }, ...
- 百度离线地图示例之二:测距
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
- echarts时间散点图_ECharts 实现地图散点图(下)
ECharts 实现地图散点图(下) 小红 2016-06-13 上一篇我们介绍了如何使用 ehcarts 内置地图实现地图上绘制的散点图,这篇中,我们将讲解如何在百度地图上绘制散点图. 一.初始准备 ...
- ECharts 实现地图散点图上(转载)
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教 ...
- Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档
Echarts地图详细镇区的划分_echarts乡镇地图,echarts地图街道-算法与数据结构文档类资源-CSDN下载
- 使用echarts完成中国省市区县镇地图展示
目录 前言 一.中国地图 1.1 地图数据-china.js 1.2 代码应用 二.省份地图--以山东为例,其他省份同理 2.1 地图数据-shandong.js 2.2 代码应用 三.市级地图--以 ...
- Echarts使用二:全国地图与各省市地图联动
===========================更新============================ 介于很多人都找我要相关的js文件,我就传到网上以供大家下载~~ js文件下载地址: ...
最新文章
- 第十一天 • 库塔山植物园
- python迭代器与生成器_Python的迭代器和生成器
- (53)zabbix模板
- Web.Config文件配置之数据库连接配置
- 拓端tecdat|R语言精算学:使用链梯法Chain Ladder和泊松定律模拟和预测未来赔款数据
- 联想微型计算机 y720,联想拯救者Y720评测:有颜值的实力派
- (黑苹果efi文件)B550-I Ryzen 9 5950X RX 5700 XT 黑苹果efi引导文件
- 域中计算机改名,找不到网络路径,电脑加域失败提示”找不到网络路径”的解决办法...
- WordPress主题制作全过程(一):基础准备
- 原生Android应用接入flutter(详细步骤)
- 老农的计算机笔记(四)关于编程语言
- SCI写作必备英文单词、语法检查工具
- C语言判断第几天(最简版)
- 【数据库】对象名称 'dbo.student' 和索引名称 'stusage' 有重复的键
- 写时复制(Copy On Write)
- 数据看板--日报、周报、月报
- (云服务器+JQuery+JS+BootStrap+Navicat+AJAX+JavaScript)第一个前端小项目【面试】
- Hash 表详解(哈希表)
- S7-1500 PLC编程
- 信息系统项目管理师考前如何备考