刚刚收到一封园友求助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. python tensorflow keras

    pip install tensorflow pip install keras pip install theano http://www.open-open.com/lib/view/open14 ...

  2. Mirror--镜像断开的解决办法

    如果镜像在搭建一段时候后出现问题,可能存在以下原因: 1. 因为主库或镜像库存在内存压力,导致无法完成镜像日志传送和重做 解决办法:设置数据库最小内存,保证数据库有足够内存完成镜像操作 2. 因为主库 ...

  3. SQL Server 2012 AlwaysON 同步延迟时间

    SELECT availability_mode_desc , role_desc , replica_server_name , last_redone_time , GETDATE() now , ...

  4. 201-React顶级API

    一.概述 React是React库的入口点.如果您从<script>标记加载React,则这些顶级API可在React全局中使用.如果你使用npm的ES6,你可以写:import Reac ...

  5. 001-ant design安装及快速入门【基于纯antd的基本项目搭建】

    一.安装使用 1.1.安装 推荐使用 npm 或 yarn 的方式进行开发 npm install antd --save yarn add antd 1.2.浏览器引入 在浏览器中使用 script ...

  6. Hook？

    public interface IHook { /// <summary> /// 二维地图控件对象 /// </summary> ESRI.ArcGIS.Controls. ...

  7. spring Security 得到认证用户名的方法

    @Service("userService")public class UserServiceImpl implements UserService { @Overridepubl ...

  8. 4.12 Routing -- Preventing And Retrying Transitions

    一.概述 在一个路由的跳转过程中,Ember路由器传递一个跳转对象到被跳转调用的路由的不同的hooks中.任何一个hook获取这个跳转对象,有能力通过调用transition.abort()终止跳转, ...

  9. rails性能优化

    1,使用Unicorn或者Thin服务器替代默认的webrick.2,静态资源压缩合并,放到云存储上.3,同时可以使用rails的Turbolinks,使用js替换title和body,但也带来了js ...

  10. Vue学习笔记之Vue的模板字符串

    0x00 模板字符串 传统的JavaScript语言,输出模板通常是这样的写的. $('#result').append( 'There are <b>' + basket.count + ...