echarts之靜態與動態地圖

wangxj_2017發表於2020-11-13

這裡寫自定義目錄標題

工作中多次遇到資料視覺化的開發，記錄一下。

地圖效果：
在這裡插入圖片描述靜態頁面：

<!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;
    }

完結撒花。。。

靜態庫與動態庫
2024-06-22
小白學PyTorch 動態圖與靜態圖的淺顯理解
2020-08-23
PyTorch
echarts map靜態套用網頁
2019-05-11
Echarts網頁
echarts遷移圖動態載入
2021-06-20
Echarts
AOP之靜態代理VS動態代理
2018-03-30
靜態域與靜態方法
2019-07-27
動態圖和靜態圖的程式碼區別
2020-10-03
理解靜態繫結與動態繫結
2019-09-26
linux下的靜態庫與動態庫
2018-04-28
Linux
靜態代理、動態代理與Mybatis的理解
2022-06-20
MyBatis
偽靜態、靜態和動態的區別
2020-12-18
JavaScript 靜態屬性與靜態方法
2018-12-15
JavaScript
net 靜態方法與非靜態方法
2024-05-25
靜態動態陣列
2024-11-28
陣列
深入理解靜態代理與JDK動態代理
2019-04-11
JDK
Hive的靜態分割槽與動態分割槽
2018-05-03
Hive
CE的使用及靜態地址與動態地址
2020-11-17
動態連結庫與靜態連結庫
2021-11-19
動態IP與靜態IP的主要區別
2022-04-24
全面解析RayFire的動態物件與靜態物件
2020-11-25
物件
代理模式詳解:靜態代理、JDK動態代理與Cglib動態代理
2021-03-09
模式JDKCGLib
靜態網頁與動態網頁的區別
2019-03-13
網頁
動態分佈與靜態分佈的區別
2024-07-17
java中的靜態繫結與動態繫結
2024-11-13
Java
靜態路由和動態路由
2020-10-15
路由
靜態代理和動態代理
2019-05-15
JAVA 靜態代理 & 動態代理
2024-11-21
Java
動靜態庫
2024-10-03
Android：JNI與NDK(二)交叉編譯與動態庫，靜態庫
2019-07-31
Android編譯
ios靜態庫和動態庫
2018-04-22
iOS
DEDE整站動態/靜態轉換
2018-04-11
echarts 主題動態切換
2024-06-26
Echarts
BootStrap的動態模態框及靜態模態框
2018-08-13
boot
[Linux]動靜態庫
2024-11-30
Linux
SAST 與 DAST：靜態和動態應用程式安全測試
2022-08-04
AST
靜態住宅IP與動態住宅IP有什麼區別？
2022-03-15
freemarker根據靜態模板和動態模板生成PDF與Word
2020-11-26
Linux下快速靜態編譯Qt以及Qt動態/靜態版本共存
2018-03-11
Linux編譯QT

echarts之靜態與動態地圖

這裡寫自定義目錄標題

相關文章