java echarts 散点图,echarts在地图上绘制散点图（任意点）
項目需求：在省份地圖上繪制散點圖，散點位置不一定是哪個城市或哪個區縣，即任意點
通過查詢官網文檔，找到一個與需求類似的Demo：https://www.echartsjs.com/gallery/editor.html?c=scatter-map，更改代碼，將中國地圖替換為省份地圖，省份地圖的js代碼可以從網上下載，官網現在不提供下載了。
index.html，一個盒子
mapScatter Demomain.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 &; 百度地圖：在地圖上繪制多邊形
隨機推薦
winform 自定義控件引用問題
最近做了一個仿combobox的控件,與combobox類似,多了文字篩選的功能,如何實現在這里不再贅述.由于comboboxEx中用到了另一個用戶控件,當生成dll,引用到項目中去時,發現工具欄中不 ...
Turing Test
Computer Science An Overview _J. Glenn Brookshear _11th Edition In the past the Turing test (propose ...
開發系統時候運行程序突然報出“WebDev.WebServer40.exe已停止工作”的錯誤
已經解決,問題描述:在開發系統時候運行程序突然報出“WebDev.WebServer40.exe已停止工作”的錯誤,程序調試運行,發現程序在打開數據庫時候報錯,也就是Connection.Open() ...
cf 363D
貪心加二分 雖然比賽后才過 ........ /************************************************************************* &g ...
關于<;img>;標簽與文字垂直居中
要讓左邊的圖片與后面的文字居中,如下效果 HTML代碼:
& ...我的第一個python web開發框架(16)——產品分類管理
產品分類管理的html頁面之前忘記做了,這次附件里補上. 好了先上圖 從頁面效果圖來看,我們需要開發列表獲取接口.添加接口.單條記錄獲取接口.編輯接口和刪除接口 對于產品分類列表,我們將使用jqgri ...
嘗試 Markdown 寫測試用例
我的原帖https://testerhome.com/topics/9412 大家都知道我們社區的帖子提倡用Markdown格式編寫,正好項目進入穩定期,嘗試用Markdown寫下測試用例.有幾個目的 ...
總結
以上是生活随笔為你收集整理的java echarts 散点图,echarts在地图上绘制散点图（任意点）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java定义一个方法，返回a的b次方
- 下一篇： java基于ssm的个人博客系统_调研了