刚刚收到一封园友求助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. 向Docx4j生成的word文档添加图片和布局--第一部分

    原文标题:Adding images and layout to your Docx4j-generated word documents, part 1 原文链接:http://blog.iprof ...

  2. mysql_commit() COMMIT ROLLBACK 提交 回滚 连接释放

    MySQL :: MySQL 8.0 Reference Manual :: 28.7.7.6 mysql_commit() https://dev.mysql.com/doc/refman/8.0/ ...

  3. OSX: 下载Flash Player的脚本

    http://blog.csdn.net/cneducation/article/details/54742983

  4. 小米范工具系列之一：小米范 web查找器

    最新版本1.5,下载地址:http://pan.baidu.com/s/1c1NDSVe  文件名web finder,请使用java1.8运行 小米范 web查找器主要功能为快速端口扫描,并识别we ...

  5. 每日算法之三十五：Wildcard Matching

    模式匹配的实现,'?'代表单一字符,'*'代表随意多的字符.写代码实现两个字符串是否匹配. Implement wildcard pattern matching with support for ' ...

  6. Java面试人事篇（二）

    1.请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有.其实,企业最希望知道的是求职者能否胜任工作,包括:最强的技能.最深入研究的知识领域 ...

  7. mongodb 的使用

    install: 1.ubuntu用deb安装. 2.下载压缩文件,绿色的,不用安装.   推荐此方法. 配置dbpath: 1.用deb安装的,会在 /etc 目录下 创建mongodb.conf ...

  8. PAT 1117 Eddington Number [难]

    1117 Eddington Number (25 分) British astronomer Eddington liked to ride a bike. It is said that in o ...

  9. 1：3访问 servlet API 的两种方式（request,session等内置对象）

    1:解耦方式 2:耦合方式: ========================================== ========================================== ...

  10. jqGrid有关问题 小知识点

    为每一行添加查看按钮  并且   调整行高 gridComplete:function(taskDatas){ //在此事件中循环为每一行添加修改和删除链接 $( ".autotip&quo ...