java echarts 散点图,echarts在地图上绘制散点图（任意点）

项目需求：在省份地图上绘制散点图，散点位置不一定是哪个城市或哪个区县，即任意点

通过查询官网文档，找到一个与需求类似的Demo：https://www.echartsjs.com/gallery/editor.html?c=scatter-map，更改代码，将中国地图替换为省份地图，省份地图的js代码可以从网上下载，官网现在不提供下载了。

index.html，一个盒子

mapScatter Demo

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);

}

最终效果

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

在谷歌地图上绘制行政区域轮廓【结合高德地图的API】

实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...

记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

vue &amp&semi; 百度地图：在地图上绘制多边形

随机推荐

winform 自定义控件引用问题

最近做了一个仿combobox的控件,与combobox类似,多了文字筛选的功能,如何实现在这里不再赘述.由于comboboxEx中用到了另一个用户控件,当生成dll,引用到项目中去时,发现工具栏中不 ...

Turing Test

Computer Science An Overview _J. Glenn Brookshear _11th Edition In the past the Turing test (propose ...

开发系统时候运行程序突然报出&OpenCurlyDoubleQuote;WebDev&period;WebServer40&period;exe已停止工作”的错误

已经解决,问题描述:在开发系统时候运行程序突然报出“WebDev.WebServer40.exe已停止工作”的错误,程序调试运行,发现程序在打开数据库时候报错,也就是Connection.Open() ...

cf 363D

贪心加二分 虽然比赛后才过 ........ /************************************************************************* &g ...

关于&lt&semi;img&gt&semi;标签与文字垂直居中

要让左边的图片与后面的文字居中,如下效果 HTML代码:

& ...

我的第一个python web开发框架(16)——产品分类管理

产品分类管理的html页面之前忘记做了,这次附件里补上. 好了先上图 从页面效果图来看,我们需要开发列表获取接口.添加接口.单条记录获取接口.编辑接口和删除接口 对于产品分类列表,我们将使用jqgri ...

尝试 Markdown 写测试用例

我的原帖https://testerhome.com/topics/9412 大家都知道我们社区的帖子提倡用Markdown格式编写,正好项目进入稳定期,尝试用Markdown写下测试用例.有几个目的 ...