精华内容
下载资源
问答
  • 2020-08-24 17:18:48

    一、原理

    引用对应市区json数据(比如我就是引用的河南省驻马店市的数据),通过百度地图坐标拾取器获取地区的经纬度,将数据填在对应位置(我下面有注释),再配置下样式颜色之类的渲染上就可以了

    二、看图片可能感受不大,下面是我echarts社区的主页,里面有这个例子,大家可以去看看效果

    我的echarts个人主页

    三、效果图

    在这里插入图片描述

    四、直接上代码,解释在注释里

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src = "jquery-3.4.1.js的路径"></script>
        <script type="text/javascript" src = "echarts.js的路径"></script>
    </head>
    <body>
    <div id="map" style="width: 1200px;height:900px;"></div>
    <script type="text/javascript">
        	var dom = document.getElementById("map");
        //得到echarts的实例对象
        var myChart = echarts.init(dom);
        //根据百度地图坐标拾取器来的经纬度
        var geoCoordMap = {
            '遂平县': [114.015819, 33.150944],
            '上蔡县': [114.276256, 33.267906],
            '西平县': [114.022143, 33.394355],
            "驿城区": [114.006045, 32.978599],
            '确山县': [114.033641, 32.810768],
            "泌阳县": [113.335694, 32.731107],
            "汝南县": [114.375141, 33.016389],
            "正阳县": [114.398138, 32.615372],
            "平舆县": [114.629254, 32.969876],
            "新蔡县": [114.979952, 32.752487]
    
        };
        //数据信息(黄色点点的大小,鼠标移上去会显示这个数据)
        var data = [{
                name: "遂平县",
                value: 199
            },
            {
                name: "上蔡县",
                value: 170
            },
            {
                name: "西平县",
                value: 102
            },
            {
                name: "驿城区",
                value: 81
            },
            {
                name: "确山县",
                value: 147
            },
            {
                name: "泌阳县",
                value: 130
            },
            {
                name: "汝南县",
                value: 172
            },
            {
                name: "正阳县",
                value: 123
            },
            {
                name: "平舆县",
                value: 120
            },
            {
                name: "新蔡县",
                value: 292
            }
        ];
    	//处理数据的函数,将经纬度,名称,value结合到一起放入series中的data中
        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 optionMap = {
            
            backgroundColor: '#404a59',
            title: {
                text: 'XX数量-驻马店市',
    
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            //鼠标移到黄点点上显示数据就是配置的这个
            tooltip: {
                trigger: 'item',
    
                //自定义修改显示
                formatter: function(data) {
    
                    return res = '<div><p>数量:' + data.value[2] + '</p></div>'
    
                },
            },
    
            geo: {
                map: 'china',
                //中心点(经纬度)
                center: [114.006045, 32.978599],
                //缩放比例
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                //是否允许拖拽
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [{
                name: 'pm2.5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: function(val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f4e925',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }]
        };
        //411700.json 是对应区域的地理信息json文件
        $.get('../json/411700.json', function (myJson){
            echarts.registerMap('411700', myJson) //注册
            optionMap.geo.map = '411700';
            myChart.setOption(optionMap);
        });
        
        
    </script>
    </body>
    </html>
    

    五、本地访问json会有跨域的问题,为了图方便我就放在了服务器上看网页的效果…在社区的话没有这个问题

    更多相关内容
  • echarts做地图数据展示 我有用到市级的,在我社区个人主页里,很好用,欢迎大家前去参考,这里是我的echarts个人主页链接 ...
  • echarts_extendsMap0302 基于echarts,地图数据展示,点击地图下钻(只下钻到省市) 仅供学习参考哦。
  • echarts实现中国地图数据展示

    千次阅读 2021-06-23 09:07:13
    一般运用到条形、折线、扇形图,今天说一说在中国地图展示各地数据; 首先要准备中国地图的JS文件,可以在网盘下载,链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码: ft9n 引入echarts后引入china....

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts;

    一般运用到条形、折线、扇形图,今天说一说在中国地图上展示各地数据;

    首先要准备中国地图的JS文件,可以在网盘下载,链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码: ft9n

    引入echarts后引入china.js文件

    <head>
            <meta charset="utf-8" />
            <title>echarts中国地图数据</title>
            <script type="text/javascript" src="js/echarts.min.js" ></script>
            <script type="text/javascript" src="js/china.js" ></script>
        </head>
    

    写入随机数来测试数据:

    function randomData() {  
         return Math.round(Math.random()*500);  
    } 
    

    数据:

    var mydata = [  
                    {name: '北京',value: '100' },{name: '天津',value: randomData() },  
                    {name: '上海',value: randomData() },{name: '重庆',value: randomData() },  
                    {name: '河北',value: randomData() },{name: '河南',value: randomData() },  
                    {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },  
                    {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },  
                    {name: '安徽',value: randomData() },{name: '山东',value: randomData() },  
                    {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },  
                    {name: '浙江',value: randomData() },{name: '江西',value: randomData() },  
                    {name: '湖北',value: randomData() },{name: '广西',value: randomData() },  
                    {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },  
                    {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },  
                    {name: '吉林',value: randomData() },{name: '福建',value: randomData() },  
                    {name: '贵州',value: randomData() },{name: '广东',value: randomData() },  
                    {name: '青海',value: randomData() },{name: '西藏',value: randomData() },  
                    {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },  
                    {name: '海南',value: randomData() },{name: '台湾',value: randomData() },  
                    {name: '香港',value: randomData() },{name: '澳门',value: randomData() }  
                ];
    

    自己的数据写入value里

    实例化option,配置属性,data置入数据

    var optionMap = {  
                    backgroundColor: '#FFFFFF',  
                    title: {  
                        text: '全国地图大数据',  
                        subtext: '',  
                        x:'center'  
                    },  
                    tooltip : {  
                        trigger: 'item'  
                    },  
                    
                    //左侧小导航图标
                    visualMap: {  
                        show : true,  
                        x: 'left',  
                        y: 'center',  
                        splitList: [   
                            {start: 500, end:600},{start: 400, end: 500},  
                            {start: 300, end: 400},{start: 200, end: 300},  
                            {start: 100, end: 200},{start: 0, end: 100},  
                        ],  
                        color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
                    },  
                    
                    //配置属性
                    series: [{  
                        name: '数据',  
                        type: 'map',  
                        mapType: 'china',   
                        roam: true,  
                        label: {  
                            normal: {  
                                show: true  //省份名称  
                            },  
                            emphasis: {  
                                show: false  
                            }  
                        },  
                        data:mydata  //数据
                    }]  
                };  
            //初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            //使用制定的配置项和数据显示图表
            myChart.setOption(optionMap);
    

    效果如图:

    在这里插入图片描述
    下载源码

    展开全文
  • 基于Echarts的中国地图数据展示

    千次阅读 2019-03-07 21:56:00
    基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等自定义事件。 详细 代码下载:http://www.demodashi.com/demo/14294.html 一、概述 ...
    发布时间:2018-10-31
     
    技术:javascript+html5+canvas
     

    概述

    基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等自定义事件。

    详细

     

    一、概述

     

    实际项目中大概率会遇到很多需要进行数据展示的地方,如折现图,柱状图等,今天给大家介绍一个更加炫酷的中国地图大数据展示,结合echarts免费开源第三方插件,可以实现自己的定制样式,定制提示。

    二、演示效果

     

    map.gif

    三、目录结构

     

    项目构成:

    image.png

    引用:

    <script src="dist/echarts.js"></script>
    <script src="map/js/china.js"></script>

    四、详细步骤

     

    1、首先给定一下全局样式、给个地图容器

     <style>
            *{margin:0;padding:0}
            html,body{
                width:100%;
                height:100%;
            }
            #main{
                  width:800px;
                  height:600px;
                  margin: 150px auto;
                  border:1px solid #ddd;
              }
            /*建议长宽比0.75,符合审美*/
        </style>
        
        
        <div id="main">
    
        </div>

    2、获取容器DOM,给定地图配置

    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);

     

    3、详细配置,定制样式,给自定义事件

    option = {
                tooltip: {
                        formatter:function(params,ticket, callback){
                            return params.seriesName+'<br />'+params.name+':'+params.value
                        }
                    },
                visualMap: {
                    min: 0,
                    max: 1500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高','低'],
                    inRange: {
                        color: ['#e0ffff', '#006edd']
                    },
                    show:true
                },
                geo: {
                    map: 'china',
                    roam: false,
                    zoom:1.23,
                    label: {
                        normal: {
                            show: true,
                            fontSize:'10',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal:{
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis:{
                            areaColor: '#F3B329',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                series : [
                    {
                        name: '信息量',
                        type: 'map',
                        geoIndex: 0,
                        data:dataList
                    }
                ]
            };

     

    tooltip:定制信息提示框的内容,其中params参数表示数据

    数据格式:

       var dataList=[
                {name:"南海诸岛",value:0},
                {name: '北京', value: randomValue()},
                {name: '天津', value: randomValue()},
                {name: '上海', value: randomValue()}
                ]

    这里为了演示效果,我随机给定的value值,randomValue为我自己定义的一个获取随机数函数

    visualMap:图注样式定制,其中包括color范围,文字提示

    geo:定义地图为china,其中可能大概率要用的一个配置zoom: 视角缩放比例,roam:是否开启缩放和平移

     

    itemStyle:地图外观定制,其中normal表示正常显示的样式,emphasis表示鼠标悬浮下样式

    series:整体配置 其中type很关键 表示该例是地图,data:图表所用数据,实际项目中大家可以通过http获取数据,再赋值给data

     

    自定义事件:

    myChart.on('click', function (params) {
                alert(params.name+':'+params.seriesName+':'+params.value);
            });

    大家可以给刚刚获取的myChart实例添加事件监听,其中重要的一个参数params可以得到你想要的一切O(∩_∩)O哈哈~

    这里给大家打印一下:

    image.png

    最后再给大家一个友好建议:

    一、插件自带的地图省份名字是默认出现在省会城市的位置,导致很多省份的名字有点挤甚至偏移,大家可以打开map/js/china.js

    二、检索自己想要更改的省份名字,如湖南

    "properties":{"cp":[112.982279,28.19409],"name":"湖南","childNum":3}}

    其中cp即表示文字的位置,两个坐标表示经纬度,大家根据需要调整。哈哈 大致就到这里了,有兴趣的小伙伴可以试试!

     

    整体代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>map</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <script src="dist/echarts.js"></script>
        <script src="map/js/china.js"></script>
        <style>
            *{margin:0;padding:0}
            html,body{
                width:100%;
                height:100%;
            }
            #main{
                  width:600px;
                  height:450px;
                  margin: 150px auto;
                  border:1px solid #ddd;
              }
            /*默认长宽比0.75*/
        </style>
    </head>
    <body>
        <div id="main">
    
        </div>
        <script type="text/javascript">
            var dataList=[
                {name:"南海诸岛",value:0},
                {name: '北京', value: randomValue()},
                {name: '天津', value: randomValue()},
                {name: '上海', value: randomValue()},
                {name: '重庆', value: randomValue()},
                {name: '河北', value: randomValue()},
                {name: '河南', value: randomValue()},
                {name: '云南', value: randomValue()},
                {name: '辽宁', value: randomValue()},
                {name: '黑龙江', value: randomValue()},
                {name: '湖南', value: randomValue()},
                {name: '安徽', value: randomValue()},
                {name: '山东', value: randomValue()},
                {name: '新疆', value: randomValue()},
                {name: '江苏', value: randomValue()},
                {name: '浙江', value: randomValue()},
                {name: '江西', value: randomValue()},
                {name: '湖北', value: randomValue()},
                {name: '广西', value: randomValue()},
                {name: '甘肃', value: randomValue()},
                {name: '山西', value: randomValue()},
                {name: '内蒙古', value: randomValue()},
                {name: '陕西', value: randomValue()},
                {name: '吉林', value: randomValue()},
                {name: '福建', value: randomValue()},
                {name: '贵州', value: randomValue()},
                {name: '广东', value: randomValue()},
                {name: '青海', value: randomValue()},
                {name: '西藏', value: randomValue()},
                {name: '四川', value: randomValue()},
                {name: '宁夏', value: randomValue()},
                {name: '海南', value: randomValue()},
                {name: '台湾', value: randomValue()},
                {name: '香港', value: randomValue()},
                {name: '澳门', value: randomValue()}
            ]
            var myChart = echarts.init(document.getElementById('main'));
            function randomValue() {
                return Math.round(Math.random()*1000);
            }
            option = {
                tooltip: {
                        formatter:function(params,ticket, callback){
                            return params.seriesName+'<br />'+params.name+':'+params.value
                        }//数据格式化
                    },
                visualMap: {
                    min: 0,
                    max: 1500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高','低'],//取值范围的文字
                    inRange: {
                        color: ['#e0ffff', '#006edd']//取值范围的颜色
                    },
                    show:true//图注
                },
                geo: {
                    map: 'china',
                    roam: false,//不开启缩放和平移
                    zoom:1.23,//视角缩放比例
                    label: {
                        normal: {
                            show: true,
                            fontSize:'10',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal:{
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis:{
                            areaColor: '#F3B329',//鼠标选择区域颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                series : [
                    {
                        name: '信息量',
                        type: 'map',
                        geoIndex: 0,
                        data:dataList
                    }
                ]
            };
            myChart.setOption(option);
            myChart.on('click', function (params) {
                alert(params.name);
            });
    
          /*  setTimeout(function () {
                myChart.setOption({
                    series : [
                        {
                            name: '信息量',
                            type: 'map',
                            geoIndex: 0,
                            data:dataList
                        }
                    ]
                });
            },1000)*/
        </script>
    </body>
    </html>

    五、相关资料

     

    echartsAPI

    注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

    转载于:https://www.cnblogs.com/demodashi/p/10492708.html

    展开全文
  • echarts实现地图数据展示

    千次阅读 2019-03-01 18:19:49
    关键点:1.项目中需要引入china.js(这个需要自己下载) 2 .项目配置 3.关键配置 echarts.dispose($(`#userMap`)[0]); let mapChart = echarts.init($(`#userMap`)[0]); myChart.showLoading();...

    关键点:1.项目中需要引入china.js(这个需要自己下载)

                2 .项目配置

                   

               3.关键配置

     echarts.dispose($(`#userMap`)[0]);
     let mapChart = echarts.init($(`#userMap`)[0]);
     myChart.showLoading();
     let option = {
    	...
     }
     mapChart.setOption(option);
     mapChart.hideLoading();

     

    展开全文
  • Web 插件 之 ECharts 实现中国地图数据的简单展示实现 目录 Web 插件 之 ECharts 实现中国地图数据的简单展示实现 一、简单介绍 二、实现原理 三、注意事项 四、预览效果 五、实现步骤 六、关键代码 一...
  • 我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现。本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息。适用于数据统计和地图区块展示等场景
  • 地图数据可视化看板大屏幕模板,适用于大数据展示
  • 在Vue中使用Echarts地图以及数据展示

    千次阅读 热门讨论 2021-02-01 14:36:27
    效果图如下(东营市) 1.先把地图显示出来 首先要获取该地区的JSON数据,网站:DATAV.GeoAtolas,逐步选择地图区域,... //引入地图数据 import dy from '@/assets/dy' // 引入echarts以及提示框和标题组件 const
  • vue+echarts 中国地图 展示数据

    千次阅读 2021-11-10 18:24:45
    [ { name: '', type: 'map', map:"china", geoIndex: 0, data:this.dataList, } ] }) }, 7 关键一步 此时会发现 地图数据没有展示出来 我们需要引进 官方的中国地图数据 china.js ...
  • 2019年1月23号最新整理的ECharts地图数据,JSON格式的。里面包含全国地图和全国各省、已经各省的市区的地图数据
  • 1、打开ECharts网站 输入网址:https://echarts.apache.org/examples/zh/editor.html?c=map-china&theme=light 2、将左则的内容调整成 function randomData() { return Math.round(Math.... 3、中国地图数据可视化效果
  • vue实现echarts地图展示省份数据

    千次阅读 2021-04-09 15:21:32
    文章目录想实现的功能实现效果地图的安装引入模块引入地图省份的数据源配置项说明具体代码其他配置参考 想实现的功能 想要统计各个省份下单的量,在省份地图中显示出来 实现效果 地图的安装 我都是使用cnpm安装...
  • 最终效果: 1.引入: npm i echarts --save main.js中: import echarts from ‘echarts’ Vue.prototype.$echarts = echarts ...使用地图的文件中(map.vue): import ‘echarts/map/js/china.js’ ...
  • echarts地图展示

    千次阅读 2022-04-22 16:23:08
    echarts地图展示各个区的数据
  • 基于百度的echarts编写的中国地图数据统计显示demo,可以下载直接使用,用于技术交流分享
  • 使用echarts实现地图展示

    千次阅读 2019-07-05 10:27:47
    先来看下结果展示: 下面来看下代码:【引入china.js 以下代码可直接运行】 China.js文件的下载地址:https://github.com/liangrumeng2015/China.js <!DOCTYPE html> <html lang="en"> <head&...
  • 高德地图官网上虽然有行政区划聚合的例子和代码,但代码复制下来并不能单独运行。因此我在其基础上进行改造,做了一个能独立运行的demo,其实也就一个html文件而已。方便大家理解行政区划聚合功能,参照并引入到自己...
  • ECharts实现中国地图数据可视化

    万次阅读 多人点赞 2019-01-15 17:03:13
    项目中数据可视化已经太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts;一般都有折线图、柱形图、饼形图,还有常见的地图,今天就地图来说一下——中国地图。 1、首先官网上下载一个...
  • 基于地级市3d 地图上的3d柱形图 更换相关json就可以变成你想要的城市的统计图 demo 学习多天心血之作 一起学习
  • echarts 省市区县地图展示

    千次阅读 2022-04-22 16:06:25
    1、通过高德数据可视化平台获取 2、POI下载JSON文件 根据json文件加载地图 <div id="myChart"></div> 引用echarts var myChart=echarts.init(document.getElementById('myChart')) //通过JQuery 加载...
  • 分数已被csdn修改,我也无法修改分数,过高无法下载请...WPF 数据可视化 大屏展示 实现地图仿echarts模拟迁移效果 Telerik图表 仪表盘 效果图https://blog.csdn.net/shishuwei111/article/details/79486365#comments
  • 研究了三天Echarts,终于实现了基于Echarts 实现地图下钻至县区,加对应区域的数据展示。先看效果图 后续更新研究的过程,建议要想使用用echarts的同学先去看官方文档和示例,不要盲目的去搞。我前一天在弄数据...
  • 公司要做数据大屏,Echart和百度地图的结合,实现利用百度地图的行政区划展示,在行政区区划中添加相应的Echarts散点图,散点图随地图放大和缩小,默认实景图,限制缩放等级,也可展示多个省市区划,代码注释详细,...
  • 前两天,发布了一片文章websocket实现GPS数据的实时推送与地图展示,文章发出后引来了不少读者的关注,也有不少读者要求做进步一优化。本文应大家的要求,对上文的内容做一个优化,优化地方包括: 加入了GPS方向...
  • 我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图数据地图可以最直观的表达出数据之间的空间关系,因此在很多数据分析场景中被广泛应用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 66,885
精华内容 26,754
关键字:

地图数据展示