刚刚收到一封园友求助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. JSONUtil(JAVA对象/List与json互转，xml与json互转)

    package com.chauvet.utils.json; import java.io.BufferedReader; import java.io.File; import java.io.F ...

  2. Oracle SQL开发 之 Select语句完整的执行顺序

    查询语句语法: Select 属性 From 表 Where 条件 Group by 分组条件 Having 分组选择条件 Order by 排序条件 1.from子句组装来自不同数据源的数据: 2. ...

  3. 利用阿里云腾讯云正版KMS服务器端口转发

    注意:以下内容仅供实验,请勿用于任何非法用途我们知道,阿里云和腾讯云在内网部署了KMS服务器,而且是正版的,那么,有没有办法使用公网的计算机直接或间接连接到这些KMS服务器呢,受代理服务器和跳板机配置 ...

  4. 由SOAP说开去 - - 谈谈WebServices、RMI、RPC、SOA、REST、XML、JSON

    引子: 关于SOAP其实我一直模模糊糊不太理解,这种模模糊糊的感觉表述起来是这样: 在使用web服务时(功能接口),本来我就可以通过安卓中固有的http类(使用http协议),来发送http请求,并且 ...

  5. web前端开发http-server

    windows环境下需先安装npm 安装 npm install -g http-server http-server -a hostip -p port

  6. ffmpeg应用笔记

    官网 http://ffmpeg.org/ 应用手册 http://ffmpeg.org/documentation.html 雷霄骅专栏 https://blog.csdn.net/leixiaoh ...

  7. 跟我学Makefile（六）

    shell 函数 :和反引号“`”是相同的功能 . shell 函数把执行操作系统命令后的输出作为函数返回. contents := $(shell cat foo) files := $(shell ...

  8. (android实战)破解apk

    简单的总结几个关键步骤: 一.工具准备:apktool , dex2jar , jd-gui 二.使用dex2jar + jd-gui 得到apk的java源码 1.用解压工具从 apk包中取出 cl ...

  9. python3 捕捉代码行出错的小程序

    下面主要使用的是: try .. except .. else .. finally ...,用的是 traceback 这个第三方模块. import traceback #捕捉哪行代码报错 def ...

  10. MySQL从删库到跑路（一）——MySQL数据库简介

    作者:天山老妖S 链接:http://blog.51cto.com/9291927 一.MySQL简介 1.MySQL简介 MySQL是一个轻量级关系型数据库管理系统,由瑞典MySQL AB公司开发, ...