echarts在地图上绘制散点图（任意点）
项目需求：在省份地图上绘制散点图，散点位置不一定是哪个城市或哪个区县，即任意点
通过查询官网文档，找到一个与需求类似的Demo：https://www.echartsjs.com/gallery/editor.html?c=scatter-map，更改代码，将中国地图替换为省份地图，省份地图的js代码可以从网上下载，官网现在不提供下载了。
index.html，一个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mapScatter Demo</title>
</head>
<body>
<div id="echart" style="width: 1000px; height: 800px;"></div> <script src="./echarts.min.js"></script>
<script src="./gansu.js"></script>
<script src="./main.js"></script>
</body>
</html>
main.js
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = null;
// 散点在地图上的坐标
var geoCoordMap = {
"国家级基地1": [94.12, 39.66],
"国家级基地2": [97.20, 39.55],
"国家级基地3": [95.28, 40.29],
"省级基地1": [98.36, 40.19],
"省级基地2": [97.88, 39.49],
"省级基地3": [95.77, 40.59],
"市级基地1": [102.66, 38.89],
"市级基地2": [101.23, 37.79],
"市级基地3": [99.40, 39.69]
};
// 将坐标与值对应并反映在地图上
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
visualMap: {
type: 'piecewise',
textStyle: {
color: '#fff'
},
pieces: [
{min: 300, label: '国家级基地', color: '#e3bf4c'},
{min: 200, max: 300, label: '省级基地', color: '#be4f51'},
{min: 100, max: 200, label: '市级基地', color: '#60c2cc'}
],
color: ['#e3bf4c', '#be4f51', '#60c2cc']
},
geo: {
map: '甘肃',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData([
{name: "国家级基地1", value: 110},
{name: "国家级基地2", value: 110},
{name: "国家级基地3", value: 110},
{name: "省级基地1", value: 210},
{name: "省级基地2", value: 210},
{name: "省级基地3", value: 210},
{name: "市级基地1", value: 310},
{name: "市级基地2", value: 310},
{name: "市级基地3", value: 310}
]),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
最终效果
echarts在地图上绘制散点图（任意点）的更多相关文章
- R语言绘图：在地图上绘制散点图
使用ggplot2在地图上绘制散点图 ######*****绘制散点图代码*****####### options(baidumap.key = '**************') #设置密钥 bei ...
- 在echarts里在geojson绘制的地图上展示散点图（气泡）、线集。
先来要实现的效果图: 下方图1是官网的案例:http://www.echartsjs.com/gallery/editor.html?c=scatter-map 下图2是展示气泡类型为pin的效果: ...
- iOS开发之在地图上绘制出你运行的轨迹
首先我们看下如何在地图上绘制曲线.在Map Kit中提供了一个叫MKPolyline的类,我们可以利用它来绘制曲线,先看个简单的例子. 使用下面代码从一个文件中读取出经纬度,然后创建一个路径:MKPo ...
- Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
- 利用百度API（JavaScript 版）实现在地图上绘制任一多边形，并判断给定经纬度是否在多边形范围内。以及两点间的测距功能
权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...
- R语言绘图：在地图上绘制热力图
使用ggplot2在地图上绘制热力图 ######*****绘制热力图代码*****####### interval <- seq(0, 150000, 25000)[-2] #设置价格区间 n ...
- 在谷歌地图上绘制行政区域轮廓【结合高德地图的API】
实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...
- 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
- vue中使用echarts，地图上的涟漪特效大小设置
在使用echarts进行开发大屏时,使用到了地图这个组件 我们会根据返回的值来决定涟漪的大小 这时则使用 其它的value为返回的数组,一般格式为[经度,维度,值] 这样就能动态设置效果的大小了
随机推荐
- ubuntu设置不睡眠的方法
Ubuntu系统不睡眠设置方法:要完成这个设置Ubuntu有两种方法:第一种是打开 System Settings –> Power,中文版是打开系统设置 -> 电源),然后进行设置.但不 ...
- ORA-12547错误
http://www.linuxidc.com/Linux/2013-03/81330p3.htm << good http://www.verydemo.com/demo_c158_i6 ...
- python 使用scapy编写DNS Fuzzer
1. 描写叙述 使用scapy库,编写一个DNS Fuzzer工具,并測试.在这之前.先说明一下DNS协议请求包是封装在IP包中的UDP包(有些情况也可使用TCP)中.且UDP的端口为53. 进入sc ...
- [ACM] POJ 3295 Tautology (构造）
Tautology Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9302 Accepted: 3549 Descrip ...
- Android 依据EditText搜索框ListView动态显示数据
依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layou ...
- C语言指针实现字符串的反转
题目要求: 编敲代码:从键盘随意输入一个字符串,输出该字符串. 然后.将该字符串逆序存放后再输出,要求用字符指针完毕. 代码: //解法一 #include <stdio.h> #incl ...
- 【你你你你在开玩笑吧】什么叫凭借纯兴趣搞ACM？涨姿势了
好长时间不扯淡了,今天扯个玩玩,吐个槽. 在上海回济南的列车上,回顾起这两天在携程codingtrip颁奖仪式上大牛们的种种心得,姿势涨了不少,着实涨了不少啊.我这样的渣渣毕竟图样图森 ...
- 计算cost--全表扫描
以下教大家怎样手工算出oracle运行计划中的cost值. 成本的计算方式例如以下: Cost = ( #SRds * sreadtim + #MRds * mreadti ...
- hdu(1114)——Piggy-Bank（全然背包）
唔..近期在练基础dp 这道题挺简单的(haha).可是我仅仅想说这里得注意一个细节. 首先题意: 有T组例子,然后给出储蓄罐的起始重量E,结束重量F(也就是当它里面存满了零钱的时候).然后给你一个数 ...
- 从vs中删除自带的Microsoft Git Provider
https://researchaholic.com/2015/02/02/remove-the-microsoft-gitprovider-from-visual-studio-2013/ vs自带 ...