echarts之靜態與動態地圖
這裡寫自定義目錄標題
工作中多次遇到資料視覺化的開發，記錄一下。
地圖效果：
靜態頁面：
<!DOCTYPE html>
<head>
<style>
#chartMap1 {
position: absolute;
left: 0px;
top: 0px;
width: 1030px;
height: 650px;
user-select: none;
padding: 0px;
margin: 0px;
border-width: 0px
}
</style>
</head>
<body>
<div style="width: 1030px">
<div class="chartMap1">
<div id="chartMap1"></div>
</div>
</div>
<script src="js/jq.min.js"></script>
<script src="js/echarts/core/echarts.min.js"></script>
<script src="js/echarts/geoJson/country/china.js"></script>
<script src="js/drawCharts.js"></script>
<script src="js/charts_01.js"></script>
<script type="text/javascript">
$(function () {
})
</script>
</body>
</html>
這裡說明一下
charts_01.js 是地圖的基本資料。對應的js 如下：
$(function(){
var data = [
{name: '北京', value: 1000},
{name: '天津', value: 99},
{name: '武漢', value: 273}
];
var geoCoordMap = {
'北京':[116.46,39.92],
'天津':[117.2,39.13],
'武漢':[114.31,30.52]
};
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;
};
var option1 = {
backgroundColor: '#e7f1f9',
tooltip : {
trigger: 'item',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight:'normal',
},
/*formatter: function (params) {
return params.marker + params.name + ' : ' + params.value[2];
}*/
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
textStyle: {
color: '#fff'
},
show:false
},
visualMap: {
min: 0,
max: 500,
inRange: {
color: ['#e0ffff', '#006edd'] //引用不了主題，需單獨設定顏色
},
show: false
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#fbfcfd',
borderColor: '#6d808b',
},
emphasis: {
areaColor: '#fcdc30'
}
}
},
series : [
{
name:"地圖",
type:'map',
map: 'china',
zoom: 1.2,
geoIndex: 0,
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#fbfcfd',
borderColor: '#6d808b',
},
emphasis: {
areaColor: '#fcdc30'
}
},
data:[{
name: '北京',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '天津',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '上海',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '重慶',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '河北',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '河南',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '雲南',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '遼寧',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '黑龍江',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '湖南',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '安徽',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '山東',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '新疆',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '江蘇',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '浙江',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '江西',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '湖北',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '廣西',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '甘肅',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '山西',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '內蒙古',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '陝西',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '吉林',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 500), Math.round(Math.random() * 100)]
},
{
name: '福建',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '貴州',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '廣東',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '青海',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '西藏',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '四川',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '寧夏',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '海南',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '臺灣',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '香港',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
},
{
name: '澳門',
value: Math.round(Math.random() * 500),
tipData: [Math.round(Math.random() * 100), Math.round(Math.random() * 100)]
}]
}
]
},
_chartMap1 = new drawCharts({elem:'chartMap1',option:option1}).init()
});
這裡多說一句，new drawCharts({elem:‘chartMap1’,option:option1}).init() 是用來初始化地圖用的。
下面的drawCharts.js 就是初始化使用者的。其實還有一個比較方便的方式
var mapChart = echarts.init($("#chartMap1"));
mapChart.setOption(option1); // 這樣也是可以的。
drawCharts.js 是載入地圖資料並初始化地圖。對應的js 如下：
/*******圖表load配置********/
var _def_loading = {
text: '資料正在載入中',
color: '#06c993',
textColor: '#fff',
maskColor: 'transparent',
zlevel: 0
}
/*******繪製普通圖表********/
function drawCharts(options) {
var defaults = {
elem: null,
option: {},
event: 'click',
theme: 'ediTheme',
callback: function(){}
};
this.options = $.extend({}, defaults, options); //呼叫 jq 方法轉換引數
if(this.options.elem == null){
console.error('hi，是否指定渲染ID了！');
return;
}
}
drawCharts.prototype = {
constructor:drawCharts,
init: function(){
if($('#' + this.options.elem).length != 0){
return this._render();
}else{
console.error('hi，ID（' + this.options.elem + '） 沒法在頁面找到！');
}
},
_render: function(){
var that = this,
_options = that.options,
_drawCharts = echarts.init(document.getElementById(_options.elem),_options.theme);
_drawCharts.showLoading(_def_loading);
//渲染地圖
_drawCharts.setOption(_options.option,true);
_drawCharts.hideLoading();
//繫結事件
_drawCharts.off();
_drawCharts.on(_options.event, function(params) {
//回撥函式
if(_options.callback){
_options.callback(params);
}
})
/*******resize********/
that._resize(_drawCharts);
return _drawCharts;
},
_resize: function(chart){
!(function(chart){$(window).resize(function(){chart.resize();});})(chart);
}
}
其他的js 在對應的echarts 的包裡是可以找到的，這裡就省…
這樣基本上完成了一個靜態的地圖視覺化功能。
實際工作中不能這麼弄一個靜態的地圖，或者載入一個靜態的json檔案的。
下面簡單記錄一下動態的地圖，從資料庫中取資料並載入到地圖中。
這裡其實可以直接在 charts_01.js 中 寫一個 ajax 請求後臺獲取資料就可以了。但是遇到一個問題，我把ajax 寫在 charts_01.js 中沒有反應，不請求後臺。於是乾脆把ajax 寫在了前臺的頁面中。頁面如下：
<!DOCTYPE html>
<head>
<style>
#chartMap1 {
position: absolute;
left: 0px;
top: 0px;
width: 1030px;
height: 650px;
user-select: none;
padding: 0px;
margin: 0px;
border-width: 0px
}
</style>
</head>
<body>
<div style="width: 1030px">
<div class="chartMap1">
<div id="chartMap1"></div>
</div>
</div>
<script src="js/jq.min.js"></script>
<script src="js/echarts/core/echarts.min.js"></script>
<script src="js/echarts/geoJson/country/china.js"></script>
<script src="js/drawCharts.js"></script>
<script src="js/charts_01.js"></script>
<script type="text/javascript">
$(function () {
// //載入地圖資料
var data = [];
// var mapChart;
//這裡是各省直轄市的經緯度，之前的地圖用到了的。
var geoCoordMap = {
'黑龍江': [127.9688, 45.368],
'內蒙古': [110.3467, 41.4899],
'吉林': [125.8154, 44.2584],
'北京': [116.4551, 40.2539],
'遼寧': [123.1238, 42.1216],
'河北': [114.4995, 38.1006],
'天津': [117.4219, 39.4189],
'山西': [112.3352, 37.9413],
'陝西': [109.1162, 34.2004],
'甘肅': [103.5901, 36.3043],
'寧夏': [106.3586, 38.1775],
'青海': [101.4038, 36.8207],
'新疆': [87.9236, 43.5883],
'西藏': [91.11, 29.97],
'四川': [103.9526, 30.7617],
'重慶': [108.384366, 30.439702],
'山東': [117.1582, 36.8701],
'河南': [113.4668, 34.6234],
'江蘇': [118.8062, 31.9208],
'安徽': [117.29, 32.0581],
'湖北': [114.3896, 30.6628],
'浙江': [119.5313, 29.8773],
'福建': [119.4543, 25.9222],
'江西': [116.0046, 28.6633],
'湖南': [113.0823, 28.2568],
'貴州': [106.6992, 26.7682],
'雲南': [102.9199, 25.4663],
'廣東': [113.32064, 23.675177],
'廣西': [108.479, 23.1152],
'海南': [110.3893, 19.8516],
'上海': [121.4648, 31.2891],
'香港':[114.15597656,22.25007581],
'澳門': [113.5, 22.2],
'臺灣': [121.5, 25.05],
};
// 將資料載入到地圖上顯示
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),
value : getData(data[i].VALUE),
tipData:data[i].VALUE
});
}
}
return res;
};
var option1;
$.ajax({
type:"post",
url:"${base}/corpGroupPortrait/provinceMap",
success: function (result) {
data = $.parseJSON(result);
option1 = {
backgroundColor: '#e7f1f9',
title: {
left: '30',
bottom: '30',
textStyle: {
fontSize: 18,
color: '#8d8d8d',
fontWeight:'normal',
}
},
tooltip : {
trigger: 'item',
textStyle: {
color: '#fff',
fontSize: 20,
fontWeight:'normal',
},
// 滑鼠移到各省上提示資料
formatter: function (params) {
return params.marker + params.name + ' : ' + params.data.tipData;
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
textStyle: {
color: '#fff'
},
show:false
},
visualMap: {
min: 0,
max: 100,
inRange: {
color: ['#e0ffff', '#006edd'] //引用不了主題，需單獨設定顏色
},
show: false
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#fbfcfd',
borderColor: '#6d808b'
},
emphasis: {
areaColor: '#fcdc30'
}
}
},
series : [
{
name:"地圖",
type:'map',
map: 'china',
zoom: 1.2,
geoIndex: 0,
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#fbfcfd',
borderColor: '#6d808b',
},
emphasis: {
areaColor: '#fcdc30'
}
},
data:convertData(data),
},
]
};
_chartMap1 = new drawCharts({elem:'chartMap1',option:option1}).init();
}
});
});
// 處理省之間的資料，讓地圖稍微好看點（省與省的資料差距太大，會導致地圖顯示顏色不均勻）
function getData(data) {
var rath = Math.ceil(Math.pow(data,1/3))/1.2 ;
return rath;
}
</script>
</body>
</html>
後臺的Controller，也就是ajax的success: function (result) 的 result 的資料格式，獲取List<Map<String,Object> 格式的資料轉成 JSONArray 給前臺就可以了。我這裡 Map<String,Object> 裡的key 是 NAME ， VAULE。
sql 大概是：“select name ,value from xxxTable ”。這裡可根據實際需求調整需要取出的欄位。
@PostMapping("/provinceMap")
@ResponseBody
public Object obtainProvinceMapData(HttpServletRequest request) {
List<String> list = new ArrayList<>();
list.add("name");
list.add("value");
List<Map<String,Object>> mapList = groupPortraitHandler.getMapData("test_qyk_Portrait",list,"1");
JSONArray objects = JSONArray.parseArray(JSONArray.toJSON(mapList).toString());
return objects;
}
完結撒花。。。
相關文章
- 靜態庫與動態庫
- echarts map靜態套用網頁Echarts網頁
- echarts遷移圖動態載入Echarts
- 小白學PyTorch 動態圖與靜態圖的淺顯理解PyTorch
- AOP之靜態代理VS動態代理
- 動態監聽與靜態監聽
- 動態圖和靜態圖的程式碼區別
- 靜態變數與靜態方法變數
- 理解靜態繫結與動態繫結
- 靜態代理、動態代理與Mybatis的理解MyBatis
- ORACLE動態監聽與靜態監聽Oracle
- 【oracle】動態監聽與靜態監聽Oracle
- 偽靜態、靜態和動態的區別
- Linux 依賴動態庫 / 靜態庫的動態態庫 / 靜態庫Linux
- oracle監聽之動態和靜態註冊Oracle
- JavaScript 靜態屬性與靜態方法JavaScript
- net 靜態方法與非靜態方法
- 深入理解靜態代理與JDK動態代理JDK
- 動態IP與靜態IP的主要區別
- CE的使用及靜態地址與動態地址
- 全面解析RayFire的動態物件與靜態物件物件
- 動態連結庫與靜態連結庫
- 菜鳥教程——iOS動態庫與靜態庫iOS
- linux下的靜態庫與動態庫Linux
- C++ — 靜態繫結與動態繫結C++
- Hive的靜態分割槽與動態分割槽Hive
- Oracle Listener 動態註冊 與 靜態註冊Oracle
- ios靜態庫與動態庫的區別iOS
- Oracle Listener 動態註冊與靜態註冊Oracle
- VS下生成與配置靜態庫與動態庫（一）
- 靜態代理和動態代理
- 靜態路由和動態路由路由
- oracle 監聽 靜態 動態Oracle
- 代理模式詳解:靜態代理、JDK動態代理與Cglib動態代理模式JDKCGLib
- 靜態網頁與動態網頁的區別網頁
- 同時配置動態監聽與靜態監聽
- C++靜態庫與動態庫深入研究C++
- oracle監聽動態註冊與靜態註冊Oracle