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 写在了前台的页面中所以我这里页面中就不在引用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")@ResponseBodypublic 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之静态与动态地图相关推荐

Echarts 开发静态数据模拟实现迁徙图步骤详解
文章目录一.前言二.先来看看百度迁徙图三.Echarts 实现迁徙图基本步骤第一步:引入Echarts.js及相关JS 第二步:为ECharts准备一个Dom 第三步:基于Dom初始化echa ...
在Ant Design Pro（React）中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架,而ECharts是前端最流行,功能最强大的前端图表库. 下面将讲解下如何在Ant Design Pro使用ECharts. Ant Des ...
Springboot构建Echarts数据可视化
Spring boot集成了tomcat等容器,效率更高,要实现数据的可视化,需要构建spring Boot框架架构web项目.同时使用注意的方式,就可以轻松建立前端访问路径与后端controller ...
基于WebGL的三维数据可视化大屏开发流 ThingJS
三维数据大屏可视化系统包含多源数据连接.生成二维/三维视图.构建可视化大屏.大屏功能应用等一体化服务,基于多年可视化项目经验,ThingJS平台得出从数据源上传到可视化大屏应用的完整流程,供参考. 多 ...
第9章慕课网日志实战
9-1 -课程目录 9-2 -用户行为日志概述为什么要记录用户访问行为日志? 网站页面的访问量网站的粘性推荐用户行为日志 Nginx ajax 用户行为日志:用户每次访问网站时所有的行为数据( ...
第13章可视化实战
13-1 -课程目录课程目录为什么需要可视化 SpringBoot构建web项目使用Echarts构建静态数据可视化使用Echarts构建动态数据可视化阿里云DataV数据可视化 13-2 ...
最新多传感器融合基准 | Argoverse 2：用于感知和预测的下一代数据集
来源|自动驾驶之心编辑|深蓝学院自动驾驶之心很荣幸邀请到王汝嘉分享刚刚开源的Argoverse 2数据集,该数据集是有史以来最大的激光雷达传感器数据集合. 论文:https://arxiv.org ...
个人前后端学习笔记(比较杂乱,当做个人备份)
个人随手笔记..比较乱,没有目录. 单例模式: 某个类只能有一个实例必须自行创建实例必须自行向整个系统提供这个实例实现: 只提供私有的构造方法含有一个该类的静态私有对象提供一个静态的共有方法 ...
请简述静态地图与动态地图之间的区别，如何在前端页面中选择使用哪种地图？...
静态地图和动态地图的区别在于数据更新方式不同.静态地图的数据是预先绘制好的,不随时间变化而改变,而动态地图的数据是实时获取的,随时间变化而改变. 在前端页面中选择使用哪种地图,取决于应用场景需求.如果 ...

echarts之静态与动态地图

这里写自定义目录标题

echarts之静态与动态地图相关推荐

最新文章

热门文章