这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本。

ECharts 2需要require加载模块。html中只需要用script引入echarts.js即可。

具体代码如下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>echarts.js插件实现中国地图省份选择效果</title>

    <style>

        *{margin:0;padding:0;}

    </style>

</head>

<body>

    <div id="main" style="height:500px"></div>

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

    <script>

        // 路径配置

        require.config({

            paths: {

                echarts: 'dist'

            }

        });

        // 使用

        require(['echarts','echarts/chart/map'],function (ch) {

            // 基于准备好的dom，初始化echarts图表

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

            option = {

                tooltip : {

                    trigger: 'item',

                    formatter: '{b}'

                },

                series : [{

                    name: '中国',

                    type: 'map',

                    mapType: 'china',

                    selectedMode : 'single',//multiple多选

                    itemStyle:{

                        normal:{

                            label:{

                                show:true,

                                textStyle: {

                                    color: "#231816"

                                }

                            },

                            areaStyle:{color:'#B1D0EC'},

                            color:'#B1D0EC',

                            borderColor:'#dadfde'//区块的边框颜色

                        },

                        emphasis:{//鼠标hover样式

                            label:{

                                show:true,

                                textStyle:{

                                    color:'#fa4f04'

                                }

                            }

                        }

                    },

                    data:[

                        {name:'四川',selected:true}

                    ]

                }]

            };

            var ecConfig = require('echarts/config');

            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){

                var selected = param.selected;

                var urlArr = ['http://www.baidu.com','http://http://www.cnblogs.com/sapho'];

                for (var p in selected) {

                    if (selected[p]) {

                        switch(p){

                            case '河南':

                                location.href = urlArr[0];

                                break;

                            case '重庆':

                                location.href = urlArr[1];

                                break;

                            default:

                                break;

                        }

                    }

                }

            });

            // 为echarts对象加载数据

            myChart.setOption(option);

        });

    </script>

</body>

</html>

文件结构如下:

效果如下：

点击四川或重庆,就会跳转到指定链接。

区块背景的颜色控制：itemStyle-->normal-->color。

区块里面的字体颜色控制：itemStyle-->normal-->label-->textStyle-->color。

用echarts.js制作中国地图,点击对应的省市链接到指定页面的更多相关文章

  1. echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍

    今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...

  2. echarts.js制作中国地图

    一.准备 1.  打开sublime,新建一个echarts文件夹,新建echarts.html文件 2.  在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...

  3. D3.js 制作中国地图 .net 公共基础类

    D3.js 制作中国地图 from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...

  4. 使用echarts简单制作中国地图，echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  5. D3.js 制作中国地图

    from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding a variety of ...

  6. 如何使用highmaps制作中国地图

    如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...

  7. 使用highmaps制作中国地图

    Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...

  8. 16、vue引入echarts，划中国地图

    vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...

  9. 利用d3.js绘制中国地图

    d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...

随机推荐

  1. codeforce Gym 100500H ICPC Quest (简单dp)

    题意:给一个nXm的矩阵,上面有一些数字,从左上角出发,每次只能往右或者往下,把沿途的数字加起来,求到达右下角的最大值是多少. 题解:简单的一个dp,设f[i][j]为到达i行j列的最大值,f[i][ ...

  2. Wannafly Union Goodbye 2016-A//初识随机化～

    想来想去还是把这个题写下来了.自己在补题遇到了许多问题. 给出n(n<=1e5)个点,求是否存在多于p(p>=20)×n/100的点在一条直线上... 时限20s,多组数据,暴力至少n^2 ...

  3. 结构化查询语言-SQL

    结构化查询语言(Structured Query Language)简称SQL(发音:/ˈes kjuː ˈel/ "S-Q-L"),是一种特殊目的的编程语言,是一种数据库查询和程 ...

  4. Array - RemoveDuplicatesfromSortedArray

    /** * 无额外空间,只要前n个是不重复的就行,不需要修改后面的数字 * @param nums 已排序的数组 * @return 去除重复数字后的长度 */ public int removeDu ...

  5. python_91_正则表达式

    常用的正则表达式: '.' 默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行 '^' 匹配字符开头,若指定flags MULTILINE,这种也可以匹配上(r& ...

  6. DROP GROUP - 删除一个用户组

    SYNOPSIS DROP GROUP name DESCRIPTION 描述 DROP GROUP 从数据库中删除指定的组.组中的用户不被删除. 组中的用户不被删除. PARAMETERS 参数 n ...

  7. 使用Electron开发PC客户端

    最近公司要求开发一个PC客户端,要求不能使用.NET开发(为了不让用户安装.net framework),所以就选择了Electron(随口听别人说了一句,之前从来没有接触过).目前项目要完毕了,所以 ...

  8. 在无TNS配置时，登录到数据库。

    sqlplus user/pw@ip:port/servicename sqlplus user/pwd@tnsname sqlplus user/pwd---aix sqlplus /nolog&g ...

  9. 关于removeFromSuperview

    关于  - (void)removeFromSuperview 苹果官网API中是这么描述的: Unlinks the view from its superview and its window, ...

  10. 如何使用jmeter做关联

    1.适用场景 从上一个接口的返回值中获取值传递给下一个接口使用 2.添加JSON Extractor 在需求提取的参数上添加--后置处理器--JSON Extractor 从登录接口的返回值中取use ...