echarts之静态与动态地图

最新推荐文章于 2024-07-19 12:00:00 发布

wangxj_2017

最新推荐文章于 2024-07-19 12:00:00 发布

阅读量1.9k

点赞数

分类专栏： echarts 文章标签： ajax js 数据可视化

本文链接：https://blog.csdn.net/wangxj_2017/article/details/109673131

版权

地图可视化 ECharts AJAX 动态数据数据库集成

关键词由CSDN通过智能技术生成

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

工作中多次遇到数据可视化的开发，记录一下。

地图效果：
在这里插入图片描述静态页面：

<!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 写在了前台的页面中所以我这里页面中就不在引用charts_01.js 了。页面如下：

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

完结撒花。。。

wangxj_2017

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
echarts之静态与动态地图

这里写自定义目录标题工作中多次遇到数据可视化的开发，记录一下。地图效果：静态页面：<!DOCTYPE html><head> <style> #chartMap1 { position: absolute; left: 0px; top: 0px; width: 1030px; height: 650px;
复制链接

扫一扫

专栏目录