这里使用的是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. python基础教程总结8——特殊方法，属性，迭代器，生成器，八皇后问题

    1. 重写一般方法和特殊的构造方法 1.1 如果一个方法在B类的一个实例中被调用(或一个属性被访问),但在B类中没有找到该方法,那么会去它的超类A里面找. class A: ... def hello ...

  2. UVA 11214 Guarding the Chessboard 守卫棋盘（迭代加深+剪枝）

    暴力,和八皇后很像,用表示i+j和i-j标记主对角线,但是还是要加一些的剪枝的. 1.最裸的暴搜 6.420s,差点超时 2.之前位置放过的就没必要在放了,每次从上一次放的位置开始放 0.400s # ...

  3. Spark集群任务提交

    1. 集群管理器 Spark当前支持三种集群管理方式 Standalone—Spark自带的一种集群管理方式,易于构建集群. Apache Mesos—通用的集群管理,可以在其上运行Hadoop Ma ...

  4. Stream great concerts wherever you are

    This time of year, we take stock of what we're thankful for — and above all else, we’re thankful for ...

  5. Ab initio methods|Evidence-based methods|maximum-likelihood|branch-site|H1|H0|GO|dS/dN ratio

    (Gene prediction and comparison) 使用基于基因组序列的从头预测方法(Ab initio methods)(同时分别使用头预测软件( GENSCAN和 AUGUSTUS) ...

  6. iOS 解决ipv6问题

    解决ipv6的方法有很多种,由于现在国内的网络运营商还在使用ipv4的网络环境,所以appstore应用不可能大范围去修改自己的服务器, 而且国内的云服务器几乎没有ipv6地址. 这里附上苹果开发平台 ...

  7. ios下通过webservice获取数据

    经历了两天的摸索,终于成功获取了数据,因为公司要做一个停车入库的信息查询,所以需要访问webservice的接口,由于没有接触过webservice,所以第一天就是各种搜索资料,类库,各种尝试,甚至是 ...

  8. Android读书笔记四

    第四章 这是一次源代码之旅,学到了如何下载和编译Android源代码和Linux内核源代码.来详细阐述一下一些具体过程 一.Android源代码下载环境 1.安装下载Android源代码的环境配置 ( ...

  9. 14-15.Yii2.0模型的创建/读取数据使用,框架防止sql注入

    目录 创建数据库 表article 配置 db.php 连接数据库 创建控制器 HomeController.php 创建models 创建数据库 表article 1.创建库表 CREATE TAB ...

  10. Find a way HDU - 2612（bfs）

    Find a way Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...