博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Echarts-地图扩展-标准geoJson格式扩展地图-例子
阅读量:6953 次
发布时间:2019-06-27

本文共 1795 字,大约阅读时间需要 5 分钟。

hot3.png

         本人菜鸟一枚,最近搞echarts地图。看到官方给的“”的例子,瞬间就蒙逼了。(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=">
    <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

你可能感兴趣的文章
两个男同事打架 公司决定要不离职, 要不手牵手一下午, 结果他俩就选择.........
查看>>
(三)java版spring cloud+spring boot 社交电子商务平台 - Spring Cloud集成项目简介
查看>>
本地搭建ios测试包上传下载安装环境(类似蒲公英)
查看>>
BCH大区块导致中心化其实是伪命题
查看>>
Linux软件包管理之源码安装
查看>>
求两个数的最大公约数两种方法
查看>>
结对编程讲义-PPT
查看>>
SOLR
查看>>
配置Nutch模拟浏览器以绕过反爬虫限制
查看>>
小牛电动的软文列表,和实际用户的反馈实在是天上地下。。
查看>>
list()详解
查看>>
mysql 修改编码 Linux/Mac/Unix/通用(杜绝修改后无法启动的情况!)
查看>>
IBM WebSphere MQ win 安装过程
查看>>
获取目录下子目录及文件的大小
查看>>
DNS服务器基本服务(正向、反向解析)、别名、递归、迭代、增量传输、完全传输...
查看>>
varchar nvarchar char nchar varchar2 nvarchar2
查看>>
js 百度地图 添加自定义控件
查看>>
AI考拉技术分享会--IDE 常用功能 for Node.js
查看>>
Tomcat session Error
查看>>
HAProxy双机高可用方案之HAProxy+Keepalived
查看>>