2019独角兽企业重金招聘Python工程师标准>>>

本人菜鸟一枚，最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子，瞬间就蒙逼了。（http://echarts.baidu.com/echarts2/doc/example/map20.html ，2016年8月29日 找到的）不怪人官网的例子不好，实在是我看不懂它是怎么弄得。最后折腾了一晚上，最后终于弄出个想样子的例子来。（有同感的收藏下，高手勿喷！）

下面这个例子是我弄得汕尾市的，里面的链接是我项目的，我就不改了。这段代码其实是两个例子凑起来的，大家也可以再自己的项目里面试试。中间绿色部分是抄的官方的“标准geoJson格式扩展地图-全国主要城市”code。其他代码抄的是Echarts的start第4步的例子。大家改成自己的项目路径就ok了。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="{weiqiye::STATICS}/wx/echarts/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '{weiqiye::STATICS}/wx/echarts/build/dist'
            }
        });
       
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
               
                var cityMap = {
                     "汕尾市": "441500"
                 };

var curIndx = 0;
                 var mapType = [];
                 var mapGeoData = require('echarts/util/mapData/params');
                 console.log(mapGeoData)
                 for (var city in cityMap) {
                     mapType.push(city);
                     // 自定义扩展图表类型
                     mapGeoData.params[city] = {
                         getGeoJson: (function (c) {
                             var geoJsonName = cityMap[c];
                             return function (callback) {
                                 $.getJSON('{weiqiye::STATICS}/wx/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);
                             }
                         })(city)
                     }
                 }

var ecConfig = require('echarts/config');
                 var zrEvent = require('zrender/tool/event');
                 
                 
                 option = {
                     title: {
                         text : '',
                     },
                     tooltip : {
                         trigger: 'item',
                         formatter: '{b}所有景点'
                     },
                     series : [
                         {
                             name: '',
                             type: 'map',
                             mapType: '汕尾市',
                             selectedMode : 'single',
                             itemStyle:{
                                 normal:{label:{show:true}},
                                 emphasis:{label:{show:true}}
                             },
                             data:[]
                         }
                     ]
                 };
                 
                 // 为echarts对象加载数据
                    myChart.setOption(option);
               
       
            }
        );
    </script>
</body>

转载于:https://my.oschina.net/u/1444945/blog/479950

Echarts-地图扩展-标准geoJson格式扩展地图-例子相关推荐

  1. json生成shp_使用JS把shapefile地图数据转换为geojson格式

    JavaScript 语言: JaveScriptBabelCoffeeScript 确定 /* http://github.com/wavded/js-shapefile-to-geojson */ ...

  2. echarts地图文字重叠解决方案_Echarts扩展地图文字位置错乱的问题

    最近在弄echarts 因为要用到扩展地图,所以在官网下载了相应的json文件 ,引入之后发现文字位置错乱 于是查找网上资料 发现 textFixed : { '大洋洲' : [265, 0], }, ...

  3. 最新中国省市区县geoJSON格式地图数据Echarts地图数据

    最新全国省市区县geoJSON格式的地图数据,可直接用于echarts地图展示: https://github.com/lyhmyd1211/GeoMapData_CN 全国地图: china.jso ...

  4. 用shp制作geoJson格式地图数据(shp convert to geoJson)

    本文紧接前文,简单说明利用shp数据制作Echarts支持的geoJson格式的地图数据.本文以北京市通州区各镇的shp数据为例进行说明. 今天是香港回归20周年之际,在这个特殊的日子,祝愿祖国繁荣昌 ...

  5. 百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域

    highcharts 是提供地图数据包的:https://www.highcharts.com/docs/maps/map-collection echart矢量地图或者地图绘制矢量图层,GeoJSO ...

  6. 实时最新中国省市区县geoJSON格式地图行政边界数据Echarts地图数据（可精确到街道级）

    geojson 数据下载地址:https://hxkj.vip/demo/echartsMap/ 可下载的数据包含省级geojson行政边界数据.市级geojson行政边界数据.区/县级geojson ...

  7. echarts地图学习（使用geoJson数据绘制地图）

    参考文档 使用echarts完成中国省市区县镇地图展示 echarts地图(中国地图展示各省数据) echarts实现中国地图区域分布图 vue + echarts 利用echarts中的map地图中 ...

  8. CAN标准帧与扩展帧两种格式长度的解析

    关于CAN标准帧与扩展帧两种格式长度的解析 ■CAN总线的标准帧和扩展帧主要决定帧ID的长度 ■标准帧的帧ID长度是11位,也就是帧ID的范围是000-7FF ■扩展帧的帧ID长度是29位,也就是帧I ...

  9. 获取地图的geojson格式数据

    获取地图的geojson格式数据 只获取区县级的话点击链接,直接在地图上选取就行 获取镇级需下载bigemap工具 获取村组的话就需要用绘图工具geojson.先将以上方法获取的镇的geojson拷贝 ...

  10. 获取县镇街道的符合百度地图的geojson格式数据

    获取县镇街道的符合百度地图的geojson格式数据 网上找了半天没找到怎么获取县级以下的行政区域,最后还是公司的产品经理和我说的这个方法,记录一下 链接1 http://datav.aliyun.co ...

最新文章

  1. 锁屏界面提示某些设置已隐藏_iOS 13隐藏手电筒和相机快捷图标
  2. Ubuntu 14.04 LTS, 64bit, cuda 7, Caffe环境配置编译和安装
  3. intx update task - IB_IBINTX_UPDATE
  4. Android Build.VERSION.SDK_INT兼容介绍
  5. android6.0 sd卡卸载api,android6.0 用户关掉sd卡读取权限的情况下， 还能做到手机缓存么？...
  6. 硬件反垃圾邮件网关|反垃圾邮件软件产品|反垃圾邮箱邮件系统
  7. javascript进制转换_《算法笔记》3.5小节——入门模拟-gt;进制转换
  8. 6-6 归并排序(递归法) (10分)
  9. 计算直方图中面积最大的矩形
  10. C#操作EXCLE表
  11. ubuntu10.04 NFS服务
  12. Vagrant虚拟化技术
  13. Virtualbox 修改硬盘的序列号等信息 例
  14. 金蝶kis专业版系统登录服务器,金蝶kis专业版怎么远程连接服务器
  15. 网络通信词汇——MCC、MNC、dbm、TAC、ECI、PCI、BAND、EARFCN、FREQ、RSSI、RSRP、RSRQ、SINR
  16. Docker安装加速器
  17. KUKA力控软件使用问题介绍
  18. lempel ziv matlab,使用Lempel-Ziv压缩
  19. 5年培养2000名高端专业人才 阿里巴巴大数据学院落地成都
  20. 6s测试信号软件,手机信号强度测试：苹果iPhone6s不敌三星S6

热门文章

  1. 今天解决了首页无头像被显示的问题
  2. 用线程安全随机数解决Random在多线程中随机性重复的问题
  3. Camshift算法（1）
  4. 红帽学习笔记[RHCSA] 第一课[Shell、基础知识]
  5. https协议为什么比http协议更加安全
  6. Windows7 环境下 VS2008 C++链接错误！
  7. 评测网站的十个指标！
  8. 原生JS实现旋转轮播图+文字内容切换
  9. Spring(十六)之MVC框架
  10. vue中Component错误