echarts地图 json数据 和 后套动态数据加载

最新推荐文章于 2024-07-27 22:34:02 发布
最新推荐文章于 2024-07-27 22:34:02 发布
阅读量1.5w 收藏 2
点赞数 17
分类专栏： echarts 地图 文章标签： 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/id_kong/article/details/50722312
版权 
 $(function () {

              zbw();

          });
var contentzbw= "../../static/assets/js/map/"

function zbw() {
              var myChart = echarts.init(document.getElementById("henanmap"));

              echarts.util.mapData.params.params.河南 = {
                  getGeoJson: function (callback) {
                      $.getJSON('../../static/assets/js/map/mapJson/hn.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };


              var cityindx='河南';
              var curIndx = 0;
              var mapType = [
            '河南',
              // 18市
    '安阳市', '鹤壁市', '濮阳市', '新乡市', '焦作市',
    '三门峡市', '洛阳市', '郑州市', '开封市', '许昌市',
    '平顶山市', '漯河市', '周口市', '南阳市', '驻马店市',
    '信阳市', '商丘市', '济源市',
    '项城市','二七区','新郑市','新密市',
    '登封市','巩义市','上街区','荥阳市',
    '惠济区','金水区','中原区','管城回族区'
    ,'中牟县'

   ];

              echarts.util.mapData.params.params.郑州市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'zzs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.安阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'ays' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.鹤壁市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'hbs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.濮阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'pys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.新乡市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'xxs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.焦作市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'jzs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.三门峡市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'smss' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.洛阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'lys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.开封市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'kfs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.许昌市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'xcs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.平顶山市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'pdss' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.漯河市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'lhs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.周口市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'zks' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.南阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'nys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.驻马店市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'zmds' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.信阳市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'xys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.商丘市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'sqs' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };
              echarts.util.mapData.params.params.济源市 = {
                  getGeoJson: function (callback) {
                      $.getJSON(contentzbw+'mapJson/' + 'jys' + '.json', function (data) {
                          // 压缩后的地图数据必须使用 decode 函数转换
                          callback(echarts.util.mapData.params.decode(data));
                      });
                  }
              };

              var datas=[];
              // 同步执行  
              $.ajaxSettings.async = false; 
              // 加载数据  
              $.getJSON('../../datas/gethomemap', function (json) {  
                  datas = json.datas;
                  datas1=json.datas1;
                  datas2=json.datas2;

              });  





              var option = {
                  title: {
                      x: 'center',
                      text: '全省18个市',
                      subtext: '河南'
                  },
                  tooltip: {
                      trigger: 'item',
                      show : true,
                      showDelay:500,
                      formatter: '{b}<br/>{a}:{c}'
                  },

                  legend: {
                      orient: 'vertical',
                      x: 'left',
                      data: ['微博数据量','关注人数','信息量息量']
                  },
                  dataRange: {
                      min: 0,
                      max: 1000,
                      color: ['#1e90ff', '#f0ffff'],
                      text: ['高', '低'],           // 文本，默认为数值文本
                      calculable: true
                  },
                  toolbox: {
                      show: true,
                      orient : 'vertical',
                      x: 'right',
                      y: 'center',
                      feature : {
                          mark : {show: true},
                          dataView : {show: true, readOnly: false},
                          restore : {show: true},
                          saveAsImage : {show: true}
                      }
                  },
                  roamController: {
                      show: true,
                      x: 'right',
                      mapTypeControl: {
                          '河南': true,
                          '郑州市':true
                      }
                  },
                  series: [
        {
            name: '微博数据量',
            type: 'map',
            mapType: '河南',
            selectedMode: 'single',

            roam: false,
            itemStyle: {
                normal: { label: { show: true} },
                emphasis: { label: { show: true} }
            },
            data: datas
        },
        {
            name: '关注人数',
            type: 'map',
            mapType: '河南',

            itemStyle: {
                normal: { label: { show: true} },
                emphasis: { label: { show: true} }
            },
            data: datas1
        },
        {
            name: '信息量息量',
            type: 'map',
            mapType: '河南',

            itemStyle: {
                normal: { label: { show: true} },
                emphasis: { label: { show: true} }
            },
            data:datas2
        }

    ]
              };
              myChart.setOption(option);
              var len = mapType.length;
              var mt = mapType[curIndx % len];
              myChart.on(echarts.config.EVENT.MAP_SELECTED, function (param) {
                  len = mapType.length;

                  if (mt == '河南') {
                      // 河南选择指定的市区
                      var selected = param.selected;
                      for (var i in selected) {
                          if (selected[i]) {
                              mt = i;
                              while (len--) {
                                  if (mapType[len] == mt) {
                                      curIndx = len;
                                  }
                              }
                              break;
                          }
                      }

                      if (mt == '济源市') {
                        mt='河南|济源市'
                      }
                      cityindx=mt;


                      option.series[0].mapType = mt;
                      option.series[1].mapType = mt;
                      option.series[2].mapType = mt;
                      option.title.subtext = mt;
                      myChart.setOption(option, true);

                  }
                  else {
                      //选择市内的区  

                      var selected = param.selected;
                      for (var i in selected) {
                          if (selected[i]) {
                              mt = i;
                              break;
                          }
                      }

                      if(cityindx==mt){
                        mt='河南'
                        curIndx = 0
                        option.series[0].mapType = mt;
                        option.series[1].mapType = mt;
                        option.series[2].mapType = mt;
                        option.title.subtext = mt;
                        myChart.setOption(option, true);
                      }

                      cityindx=mt;
                  }

              });

          }

package com.jeefw.controller.sys;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.jeefw.core.Constant;
import com.jeefw.core.JavaEEFrameworkBaseController;
import com.jeefw.model.sys.DictLeixing;
@Controller
@RequestMapping(“/datas”)
public class DatasController extends JavaEEFrameworkBaseController implements Constant{

//表图的动态数据
@RequestMapping("/gethomemap")
public void dogetDatas(HttpServletRequest request,HttpServletResponse response) throws IOException{
    String mapname[]= {"信阳市","南阳市","驻马店市","周口市","商丘市","三门峡市","新乡市","郑州市","安阳市","开封市",
                       "焦作市","许昌市","濮阳市","漯河市","鹤壁市","项城市","巩义市","上街区","登封市","新密市",
                       "二七区","金水区","中原区","管城回族区","惠济区","中牟县","荥阳市","济源市","平顶山市","洛阳市",
                       "济源市","新郑市"};
    Map<String, Object> datas =new HashMap<String, Object>();
    Map<String, Object> result = new HashMap<String, Object>();
    List<Object> results = new ArrayList<Object>(); ;
    for (int i = 0; i <31 ; i++) {
        result = new HashMap<String, Object>();
        result.put("name", mapname[i]);
        result.put("value", 500+i*10);
        results.add(result);
    }   
    datas.put("datas", results);//微博信息
    datas.put("datas1", results);//数据1
    datas.put("datas2", results);//数据2
    System.out.println("测试：："+datas);
    writeJSON(response, datas);

}

}
这里写图片描述

ID_Kong
关注
专栏目录
Echarts加载自定义地图geoJson
zhishi_tudouni的博客
09-04 3万+
Echarts3提供的地图有时无法满足我们的需求，这时可以引入geoJson作为底图。
Echarts-json显示地图，动态渲染，常见效果
weixin_43320429的博客
10-17 1937
Echarts-json显示地图，动态渲染，常见效果
Echarts+阿里云数据可视化平台，全国地图引入及使用~
最新发布
m0_62626838的博客
07-27 870
5、注意：这里因为在阿里可视化平台下载的json文件运行起来的省份名称是全称（后续如果有好的办法可以解决的话我会更新），所以我使用的是自己新建的json文件。在项目的src目录下新建一个文件夹或者放在你的静态文件目录下，在这里我是新建了一个json文件夹，将下载好的地图json文件放在里面。7、在组件中发请求获取json文件并使用Echarts引入地图（相关配置项已注释）。2、进入阿里云数据可视化平台下载（2）或在线获取地图json文件（1）。3、首先介绍下载地图的json文件的使用方法。
echarts地图引入json或者js
前端-黎姿
10-14 6885
由于echarts3.0地图数据暂停服务了，今天临时要修改一个地区的地图，可把我给忙活了 echarts的例子上提供了引入js显示地图、引入json数据显示地图两种方式，下面简单介绍下这两种引入方式 添加一个div，设置宽度和高度用来显示地图 <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 500px;height:400px;"></div> <
在echarts中使用geojson地图
irisMoon06的博客
05-06 1199
json数据和后端联动的数据通过name匹配，所以name名要相同，通俗说，地名要相同。为了地图的响应式，需要添加以下代码进行优化。
echarts 导入地区.json文件生成地图
偷偷学习，为老板买法拉利
12-14 1万+
echarts 地图
echarts中地图JSON数据
04-25
在ECharts这个强大的数据可视化库中，地图JSON数据扮演着至关重要的角色，它使得我们可以将地理数据生动地呈现出来。...正确理解和运用地图JSON数据，能够帮助我们更好地在大数据时代中挖掘和呈现信息价值。
echarts地图json数据(含全国和省以及全国、省、地市)最全，绝对有县级数据
04-15
2. **准备地图JSON数据**：下载并准备好对应的地图JSON数据文件，例如“echarts地图数据(含全国和省以及全国、省、地市)最全”这个压缩包中的文件。 3. **创建ECharts实例**：在JavaScript中，你需要选择一个DOM...
echarts 全国地图json数据
08-25
在这个“echarts全国地图json数据”中，我们主要讨论的是如何使用ECharts来展示中国地图，并结合JSON数据进行动态的、交互式的可视化。 首先，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于...
echarts地图json数据.rar
07-12
总之，"echarts地图json数据.rar"中的数据文件是构建ECharts地图的基础，通过合理配置和数据绑定，你可以创建出各种生动、富有洞察力的地图可视化作品。在实际应用中，确保正确加载和引用这些JSON数据，结合ECharts...
echarts地图json数据，全国个省份主要城市经纬度数据文件
06-21
地图数据文件通常包含了 JSON 对象，其中包含了省份的 ID 和对应的地理坐标信息。这些坐标信息由一系列点组成，这些点通过线条连接形成省份的边界。 ECharts 的地图配置项中，`mapType` 参数用来指定地图类型，比如...
使用echarts引入中国地图时的json文件
06-21
在使用 ECharts 引入中国地图时，通常需要一个特定的 GeoJSON 文件来精确描绘中国各省份、城市的边界信息。这个 JSON 文件包含了地理特征如多边形坐标点序列，用于在图表上绘制地图形状。此JSON 文件是为中国地图定制的，专为ECharts可视化库设计。它详细记录了中国所有省级行政区划（包括自治区、直辖市等）的地理边界信息。每条记录包含一个几何特征集合（Geometry Collection），由一系列多边形坐标点组成，这些坐标点精确描绘了各省、市、自治区的边界。此资源是构建基于地理位置数据分析和可视化项目不可或缺的基础组件，极大地丰富了ECharts在地理空间数据分析领域的应用能力。例： "properties": { "adcode": 110000, "name": "北京市", "center": [ 116.405285, 39.904989 ],
echarts4地图数据文件(含全国和省json以及全国、省、地市json文件)
10-08
echarts4地图数据文件(含全国和省js以及全国、省、地市json文件)
echarts各省市地图js和json文件
08-17
echarts使用的全国各省市地图js和json文件，此文件用于echarts实现地图展示包含css样式
echarts 引用地图的json
梦寻汝的博客
06-08 3247
echarts 中uploadedDataURL 中的json数据下载 以及个省份地图json数据地址 以下图中的json为例，教你如何获取该json文件 下载地址：http://gallery.echartsjs.com/+对应的json文件； 正确的下载地址如下：http://gallery.echartsjs.com/asset/get/s/data-1528971808162-BkOXf61WX.json 附一：各...
echarts4引用json数据实现地图
weixin_39172079的博客
04-21 5940
echarts4引用地图文件引入echarts代码实现文件目录结构实现效果 文件引入 echarts4.js: html或js中引入文件 注意:引用的路径要对 地图json文件:china_geo.json echarts代码实现 //界面初始化完成后调用 $(function(){ //校验代码是否执行 alert(0); //引用地图的json文件,路径一定要引用对,否则...
echarts实现全国及各省市地图（内附地图json文件）
热门推荐
weixin_43005654的博客
03-16 3万+
echarts实现全国、各省市地图
echars根据json数据画地图（省市区），并加入高亮点
weixin_48091030的博客
03-21 1914
data: this.shTempData, // 在 type为'effectScatter'时就是圆点进度纬度。3：将接口内获取到的数据放入注册地图中， 我用的是 静态文件引入，因为该项目属于本地化部署。2：可以使用调接口的方式， 也可以使用 直接获取接口内数据的方式。type: 'effectScatter', // 涟漪动画。如果是根据后端接口获取数据 ，重新加载一下就好了。从该地址上找到你要画的省，市，县。4：加上高亮点，新写一个series。
echarts地图数据json
11-05
Echarts地图数据JSON是一种用于存储地理数据的文件格式。它是以JSON（JavaScript Object Notation）的形式组织地理数据，以便在Echarts地图库中使用。 Echarts地图数据JSON的结构大致如下： 1. 地图数据对象：它是一个JSON对象，包含地图的基本信息和地理数据的组织结构。 2. 数据项：地图数据对象中的一个重要组成部分是数据项。每个数据项都包含了一个地理区域（如国家、城市等）的信息，以及与之相关的数据值。 3. GeoJSON格式：地图数据项中的地理区域信息通常采用GeoJSON格式进行描述。GeoJSON是一种用于表示地理空间信息的JSON格式，它可以描述点、线、面等几何图形。 4. 数据值：地图数据项中的数据值通常表示与某个地理区域相关的数值信息。这些数值可以是人口数量、GDP、温度等等。 在Echarts中使用地图数据JSON时，我们可以通过配置项将其加载到地图组件中，从而展示出相应的地图效果。通过设置相应的参数，我们可以控制地图的样式、着色方式以及鼠标交互效果等。 总之，Echarts地图数据JSON是一种方便存储和使用地理数据的格式，它可以实现地图的可视化展示和与数据的动态交互。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值