精华内容
下载资源
问答
  • echarts 地图数据展示

    2019-01-15 10:18:39
    <script type='text/javascript' src='__LIB__/echarts/4.0.4/echarts.min.js'> <script type='text/javascript' src='__LIB__/echarts/4.0.4/china.js'> function randomData() { return Math.round(Math....

     

    <div class='col' id="map-wrap" style=' height: 280px;'></div>
    <script type="text/javascript" src="__LIB__/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript' src='__LIB__/echarts/4.0.4/echarts.min.js'></script>
    <script type='text/javascript' src='__LIB__/echarts/4.0.4/china.js'></script>
    <script>
        
    
    function randomData() {  
         return Math.round(Math.random()*500);  
    } 
    var getRandomColor = function() {
        
        return '#' +
            (function(color) {
                return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
            })('');
    }
    var mydata = [  
                    {name: '北京',value: '100' },
                    {name: '上海',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '云南',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '安徽',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '浙江',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '湖北',value: randomData() ,itemStyle: {areaColor: getRandomColor()}},
                    {name: '四川',value:'2500' ,itemStyle: {areaColor: '#669046'}} 
                ];
    var mapChart = echarts.init(document.getElementById('map-wrap'));
    var option = {
        tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if(!isNaN(params.value)){
                            return params.name + ' : ' + params.value+"㎡";
                        }
                    }
                    },
        series: [{  
                        name: '数据',  
                        type: 'map',  
                        mapType: 'china',   
                        roam: false,
                        zoom: 1.3,
                        label: {  
                            normal: {  
                                show: false  //省份名称  
                            },  
                            emphasis: {  
                                show: true  
                            }  
                        },  
                        data:mydata  //数据
                    }]  
    }
    
    
    mapChart.setOption(option);
    </script>

     

    展开全文
  • 百度Echarts地图数据

    2017-11-09 08:37:49
    百度 Echarts 地图数据 支持2D 3D 动态模拟图,类别展示
  • echarts 地图展示饼图

    echarts 地图上展示饼图

    效果图展示:

    在这里插入图片描述

    代码

    • 第一步
    // 在build文件下webpack.base.conf.js文件中写入下方代码
    externals:{
    	'BMap': 'BMap',
    	'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'
    }
    
    • 第二步
    // index.html中引入百度地图
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你自己的ak&s=1"></script>
    
    • 第三步
    // 在页面引入echarts和bmap
    import echarts from 'echarts';
    require('echarts/extension/bmap/bmap');
    
    • 第四步
    	// 初始化地图
        var myChart = echarts.init(document.getElementById('map'));
        let option = {
          bmap: {
            center: [经度, 纬度], // 设置地图中心点
            zoom: 10, // 设置地图层级
            roam: true,
          },
          series: [] // 饼图数据列
        };
        myChart.setOption(option);
        // 从echarts对象中获取bmap对象
        var bmap = myChart.getModel().getComponent('bmap').getBMap();
    	this.calculationZoomAndCenter(myChart, bmap);
    
    • 第五步
    	// 在地图加载完成回调中,处理饼图在地图中展示的坐标问题
        let pieData = [
        	{
        		center: [121.319222, 31.056306],
        		color: ["#5ad4cf", "#ffd258", "#cccccc"], // 饼图每个扇形的颜色
        		coordinateSystem: 'bmap',
        		data: [
        			{name:'已完成', value:0},
        			{name: '进行中', value: 4},
        			{name: '未领取', value: 29}
        		],
        		itemStyle: {
        			normal: {
    					borderColor: '#ffffff',
    					borderWidth: 0.3
    				}
    			},
    			name: '232',
    			radius: '24px',
    			type: 'pie'
        	},
        	{
        		center: [121.319222, 31.056306],
        		color: ["#5ad4cf", "#ffd258", "#cccccc"], // 饼图每个扇形的颜色
        		coordinateSystem: 'bmap',
        		data: [
        			{name:'已完成', value:0},
        			{name: '进行中', value: 4},
        			{name: '未领取', value: 29}
        		],
        		itemStyle: {
        			normal: {
    					borderColor: '#ffffff',
    					borderWidth: 0.3
    				}
    			},
    			name: '232',
    			radius: '24px',
    			type: 'pie'
        	}
        ];
        const projection = bmap.getMapType().getProjection();
        const box = bmap.getSize();
        const zoom = window.Math.pow(2, 18 - bmap.getZoom());
        const center = projection.lngLatToPoint(bmap.getCenter());
        for(let i = 0; i < pieData.length; i++){
        	// 测试坐标 转 平面坐标,,,
            let point = projection.lngLatToPoint({ lng: pieData[i].center[0], lat: pieData[i].center[1]}) // 当前饼图的经纬度
            // 像素坐标
            let x = Math.round((point.x - center.x) / zoom + box.width / 2);
            let y = Math.round((center.y - point.y) / zoom + box.height / 2);
            // 将饼图的坐标改为像素坐标
            pieData[i].center[0] = `${x}px`;
            pieData[i].center[1] = `${y}px`;
            const obj = {
              subtext: pieData[i].name,
              left: x - 5, // 左右
              top: y + 30, // 上下
              textAlign: 'center',
              backgroundColor: '#24B4AF',
              padding: [0, 6, 6, 6],
              borderRadius: 5,
              subtextStyle: { color: '#ffffff' }
            };
            title.push(obj);
    	};
    	// 处理好饼图的坐标和数据之后, 再次设置一下echarts的配置项
        let option = {
          title: title,
          series: pieData,
        };
        myChart.setOption(option);
    

    完成

    展开全文
  • echarts 地图展示乡镇数据获取乡镇数据修改echarts以支持GeometryCollection 获取乡镇数据 阿里DataV 只支持到区县级别的GeoJson数据. 参考下面的,使用 Bigemap 查询乡镇数据,并导出kml文件,再打开http://geojson.io...

    获取乡镇数据

    阿里DataV 只支持到区县级别的GeoJson数据.
    参考下面的,使用 Bigemap 查询乡镇数据,并导出kml文件,再打开http://geojson.io导入kml文件.
    将全部kml文件导入后,导出geojson文件.

    修改echarts以支持GeometryCollection

    修改echarts源代码编译,或者直接去https://github.com/wangyang0210/echarts-4.4.0dist目录下载编译后的文件.

    合并GeoJson数据

    使用时发现,第一步的乡镇数据有点旧,而有的地方,将多个乡镇合并成一个了.所以需要将GeoJson数据按行政区划合并一下.
    http://mapshaper.org/提供合并GeoJson数据的服务.

    1. 修改GeoJson数据,给每一个乡镇的属性添加一个alias属性,值为合并后的名称(不需要合并的也要添加,否则网站合并后生成的GeoJson数据只包含添加了alias的乡镇)
    2. 将GeoJson数据导入进去
    3. 打开网站的Console
    4. 运行dissolve 'alias' -o result.json
    5. 导出文件

    参考:

    1. 获取乡镇GeoJson数据
    2. 修改echarts支持GeometryCollection
    展开全文
  • 最新全国省市区县geoJSON格式的地图数据,可直接用于echarts地图展示: https://github.com/lyhmyd1211/GeoMapData_CN 全国地图: china.json 全国各省地图:province 全国各市地图:city 全国各区县地图:...

    最新全国省市区县geoJSON格式的地图数据,可直接用于echarts地图展示:

    https://github.com/lyhmyd1211/GeoMapData_CN

    全国地图: china.json

    全国各省地图:province

    全国各市地图:city

    全国各区县地图:county

    全国省市区县所对应行政区划代码以及中心点的坐标:location.json (方便用于echarts上显示某个点的位置)

    可直接用于echarts地图的显示

    大家觉得有用的话顺手给个star吧

     

    数据来源:

    datav的地图选择器:http://datav.aliyun.com/tools/atlas/

    大家也可以通过上方链接选择自己想要的数据自行下载,本人只是提取了所有的省市区县数据以及他们对应的地理坐标的数据

    我还获取了国家统计局最新中国省市区县乡镇 5 级行政区划代码Json数据,见我的另一篇博客:https://blog.csdn.net/lyhwyx1211/article/details/107447324

    展开全文
  • 在Vue中使用Echarts地图以及数据展示

    千次阅读 热门讨论 2021-02-01 14:36:27
    效果图如下(东营市) 1.先把地图显示出来 首先要获取该地区的JSON数据,网站:DATAV.GeoAtolas,逐步选择地图区域,... //引入地图数据 import dy from '@/assets/dy' // 引入echarts以及提示框和标题组件 const
  • echarts地图坐标数据+省份地图数据,用于切换点击切换省份的时候,里面需要用到的地图数据。和每个省份的坐标数据
  • echarts实现地图数据展示

    千次阅读 2019-03-01 18:19:49
    关键点:1.项目中需要引入china.js(这个需要自己下载) 2 .项目配置 3.... echarts.dispose($(`#userMap`)[0]);... let mapChart = echarts.init($(`#userMap`)[0]); myChart.showLoading();...
  • ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的...
  • Echarts地图省市跳转数据展示

    千次阅读 热门讨论 2017-02-08 14:18:34
    介于前一段时间做了省市地图跳转的东西,遇到了一些问题,如今做下总结,希望日后可以用到,也可以帮到遇到同样问题的朋友。  前提:Echarts3.0(其他版本不知道情况是否相同) 一、数据准备 1、各省份对应的数据...
  • echarts_extendsMap0302 基于echarts地图数据展示,点击地图下钻(只下钻到省市) 仅供学习参考哦。
  • ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息,通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,需要的朋友参考下吧
  • echarts地图展示地图数据封装,动态轮播每个有数据的省份 每1分钟定时轮播一个有数据的省份。若点击省份,则重置定时器,进入该省份,展示数据。 /** * */ $(function () { safeDefenseData.init(); ...
  • 文章目录想实现的功能实现效果地图的安装引入模块引入地图省份的数据源配置项说明具体代码其他配置参考 想实现的功能 想要统计各个省份下单的量,在省份地图中显示出来 实现效果 地图的安装 我都是使用cnpm安装...
  • 不酱油了.直接上干货. 问题一:显示以上图片说明你给编码不是utf-8.... 问题二:有的修改完以后显示的不是你的统计的value的值,显示的...你打印出来你的值 把你需要展示的值取出来就OK了.这样展示的效果就是你需要的值....
  • echarts地图数据展示 我有用到市级的,在我社区个人主页里,很好用,欢迎大家前去参考,这里是我的echarts个人主页链接 ...
  • echarts 地图 动态 展示 结合css+js

    千次阅读 2016-01-11 11:45:04
    echarts地图展示功能很强大,官网上静态展示的例子很多了,动态的资料少,研究了下,我目前实现的通过ajax从服务器获取数据动态展示地图。另外,我们有时候希望在地图之上做些自定义的东西,比如:通知框,或者其他...
  • 最终效果: 1.引入: npm i echarts --save ...import echarts from ‘echarts’ Vue.prototype.$echarts = echarts 2.地图初始化: 使用地图的文件中(map.vue): import ‘echarts/map/js/china.js’ ...
  • echarts地图数据,包含全国和省以及全国、省、地市。
  • vue+echarts实现数据展示大屏

    千次阅读 2020-12-28 23:18:51
    一个数据展示大屏。适用于中小型项目展示,只做学习交流。 技术栈 前端:vue+echarts+axios+vue-router+less 后台:node+koa2+websocket 开发IDE:IDEA 项目展示 PS:图表使用数据均为自造数据,与任何应用或者数据...
  • 在项目中运用到图形展示数据太常见了,echarts是一款使用率...echarts中国地图数据 " width="542" height="140">首先要准备中国地图的JS文件,引入echarts后引入china.js文件 PS:有一个小bug,想使用china....
  • echarts市级区域地图数据展示

    千次阅读 2020-08-24 17:18:48
    引用对应市区json数据(比如我就是引用的河南省驻马店市的数据),通过百度地图坐标拾取器获取地区的经纬度,将数据填在对应位置(我下面有注释),再配置下样式颜色之类的渲染上就可以了 二、看图片可能感受不大,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,483
精华内容 1,793
关键字:

echarts地图数据展示