刚刚收到一封园友求助echart湖北地图的邮件，现在将湖北地图的所有代码贴到这里，希望可以帮助到更多朋友。

1、首先你得到echarts官网下载js，很多人说找不到，可以到我的git下载（https://github.com/wanghuihui2013/echarts3/tree/master/node_modules/echarts/map/js/province）

2、把echarts.js和hubei.js根据你的路径引对，然后就可以copy我的代码咯

3、如果你需要改变地图的颜色或轮廓线的颜色，请参考我的第一篇文章 http://www.cnblogs.com/hhw3/p/6252677.html

4、如果你还需要其他省份的地图可以copy这个代码，然后根据我文本中红色注释去改即可。

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

</head>

<body>

    <div id="main" style="100%; height: 100%;"></div>

</body>

<script src="js/echarts.js"></script>

<script src="js/map/js/province/hubei.js"></script>    //如果需要其他省份的地图只要引入对应省份的js

<script>

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

    var option = {

        title: {

            text : '湖北地图',

            subtext : '-。-'

        },

        tooltip : {

            trigger: 'item',

            formatter: function(a){

                return a[2];

            }

        },

        legend: {

            orient: 'vertical',

            x:'right',

            data:['数据名称']

        },

        dataRange: {

            min: 0,

            max: 1000,

            color:['orange','yellow'],

            text:['高','低'],           // 文本，默认为数值文本

            calculable : true

        },

        series : [

            {

                name: '数据名称',

                type: 'map',

                mapType: '湖北',        //改成对应省份名

                selectedMode : 'single',

                itemStyle:{

                    normal:{label:{show:true}},

                    emphasis:{label:{show:true}}

                },
　　　　　　　　　　//这里的data是辅助改变某个地区颜色的，如果你不需要完全可以不加

                data:[

                    {name: '十堰市',value: Math.round(Math.random()*1000)},

                    {name: '襄樊市',value: Math.round(Math.random()*1000)},

                    {name: '随州市',value: Math.round(Math.random()*1000)},

                    {name: '神农架林区',value: Math.round(Math.random()*1000)},

                    {name: '恩师土家族苗族自治州',value: Math.round(Math.random()*1000)},

                    {name: '宜昌市',value: Math.round(Math.random()*1000)},

                    {name: '荆门市',value: Math.round(Math.random()*1000)},

                    {name: '天门市',value: Math.round(Math.random()*1000)},

                    {name: '潜江市',value: Math.round(Math.random()*1000)},

                    {name: '荆州市',value: Math.round(Math.random()*1000)},

                    {name: '仙桃市',value: Math.round(Math.random()*1000)},

                    {name: '武汉市',value: Math.round(Math.random()*1000)},

                    {name: '黄冈市',value: Math.round(Math.random()*1000)},

                    {name: '鄂州市',value: Math.round(Math.random()*1000)},

                    {name: '咸宁市',value: Math.round(Math.random()*1000)},

                    {name: '黄石市',value: Math.round(Math.random()*1000)},

                ]

            }

        ]

    };

    myChart.setOption(option);

</script>

</html>

如果我有帮助到你请点个赞鼓励一下我吧！

上述内容是参照echarts官网http://echarts.baidu.com/,若有侵权请联系，谢谢！

作者：BlancheWang 
出处：http://www.cnblogs.com/hhw3
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

echart3 湖北地图及如何创建其他省份地图的更多相关文章

  1. 创建用户故事地图(User Story Mapping)的8个步骤

    ［小编］上周六了解了用户故事地图后,小编又查阅了一些资料,找到了以下这篇关于如何组织用户故事地图规划的文章,分享给大家.也希望大家如果有好的实践,也可以留言一起交流. 原文地址:http://winn ...

  2. 【百度地图API】如何快速创建带有标注的地图？——快速创建地图工具+如何标注商家

    原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. ...

  3. OpenCV——识别各省份地图轮廓

    好久没有发OpenCV的博客了,最近想到了一个识别地图轮廓的方案,就写来试试.(识别中国的28个省份地图轮廓,不考虑直辖市) 首先,我的基本思路是  用最小的矩形将地图的轮廓圈出来,可以根据长方形的长 ...

  4. jQuery中国各个省份地图分部代码

    jQuery中国各个省份地图分部代码 在线演示本地下载

  5. javascript 百度地图无秘钥（appkey）创建marker标记地图

    创建简单的marker地图不一定需要去百度地图申请key,简单代码实现marker地图,效果如图: html代码如下,代码中的baidu.api.js参考后面的隐藏代码: <!DOCTYPE h ...

  6. Android基于mAppWidget实现手绘地图（六）–如何展示地图对象

    为了展示选中的点,你需要完成以下步骤: 1.创建或者获得一个已经存在的图层 2.创建代表选中点的地图对象 3.把地图对象添加到图层 创建新图层 使用以下代码片段创建图层 int COFFEE_SHOP ...

  7. 百度地图学习（Ⅰ）-Android端地图的显示及简单应用

    ps:(1.地图应用一定要在真机测试: 2.Design By:Android Stdio: 3.百度地图官方参考链接(http://developer.baidu.com/map/index.php ...

  8. 【百度地图API】如何制作商圈地图？行政地图？

    原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...

  9. 【iOS】7.4 定位服务->3.1 地图框架MapKit 功能1：地图展示

    > 本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. --- > 本文相关目录: ================== 所属文集:[[ ...

随机推荐

  1. PHP搭建（windows64+apache2.4.7+mysql-5.6+php5.5+phpMyAdmin）和Discuz安装

    以下文章参考的3个来源,在加上本人搭建过程中遇到的问题的修复完善笔记: <PHP环境的搭建和Discuz!安装> http://www.myxzy.com/post-386.html ht ...

  2. Drainage Ditches---hdu1532（最大流）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1532 题意: 每次下雨的时候,农场主John的农场里就会形成一个池塘,这样就会淹没其中一小块土地,在这 ...

  3. Day03 javascript详解

    day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...

  4. oracle高水位问题

    转自:https://blog.csdn.net/cnham/article/details/5987999 说到HWM,我们首先要简要的谈谈ORACLE的逻辑存储管理.我们知道,ORACLE在逻辑存 ...

  5. mysql 数据操作 单表查询 通过四则运算查询

    #通过四则运算查询 FROM employee; AS Annual_salary FROM employee; Annual_salary FROM employee; 查看年薪salary*12 ...

  6. mysql 数据操作 单表查询 where约束 is null in

    需求找出年龄是 81 或者 73 或者 28 mysql ; +----+-----------+--------+-----+------------+-----------+----------- ...

  7. Swagger2 生成 Spring Boot API 文档

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.本文主要介绍了在 Spring Boot 添加 Swagger 支持, 生成可自动维护的 A ...

  8. http webservice socket的区别

    1 数据传输方式1.1 socket传输的定义和其特点    所谓socket通常也称作"套接字",实现服务器和客户端之间的物理连接,并进行数据传输,主要有udp和tcp两个协议. ...

  9. php中的set_magic_quotes_runtime()作用和用法

    set_magic_quotes_runtime 用来设置php.ini文件中的magic_quotes_runtime值,当遇到反斜杆(\).单引号(').双引号(")这样一些的字符定入到 ...

  10. sql server 将时间中的时分秒改为00:00:00

    select convert(varchar(10),getdate(),120