这里使用的是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. Linux中根据访问日志统计访问量最高的前N个IP

    前段时间面试中被问到如上问题,日常不怎么注意积累,以此谨记. 访问IP 页面[nxuser@im440-zh test]$ vi log 135.252.172.181 page1 136.252.1 ...

  2. CodeForces 77C Beavermuncher-0xFF （树形dp）

    不错的树形dp.一个结点能走多次,树形的最大特点是到达后继的路径是唯一的,那个如果一个结点无法往子结点走,那么子结点就不用考虑了. 有的结点不能走完它的子结点,而有的可能走完他的子节点以后还会剩下一些 ...

  3. CCCC 以及 hihocoder offer收割赛11 ~~~

    CCCC  真的很蒙  ,没有队服,没有狗牌,服务器崩溃到14:10  才开始比赛...(黑人问号 开始前,发现旁边是西交老大吴航,mad~各种紧张.看着大佬疯狂的敲宏定义就很怕啊.100多行,一行头 ...

  4. Android颜色选择器介绍

    使用Android的颜色选择器可以让我们的view在不同状态下显示不同的颜色. 1.Android中ListView 选择某项改变该行字体颜色 2.文件位置 res/color/filename.xm ...

  5. Talent Show

    6349: Talent Show 时间限制: 1 Sec  内存限制: 128 MB提交: 106  解决: 40[提交] [状态] [讨论版] [命题人:admin] 题目描述 Farmer Jo ...

  6. 2018.5.8 XML编程

    1.XML的概念 XML(Extensible Markup Language)可扩展性标记语言是一套定义语义标记的规则,这些标记将文档分成许多部件并对这些部件加以标识. 可拓展性标记语言是SGML( ...

  7. MyBatis01 Idea中搭建MyBatis开发环境

    项目结构 POM模板 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  8. Windows系统安装docker

    下载安装包 官网 点击 Get Started ,打开入门页面,往下拉,找到 Download for Windows 打开 下载页面 ,点击 Please Login To Download ,要注 ...

  9. 201621123080 《Java程序设计》第13周学习总结

    201621123080 <Java程序设计>第13周学习总结 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能( ...

  10. python3和Python2的区别

    一.print函数 python2 的 print 声明已经被 print() 函数取代了,这意味着我们必须包装我们想打印在小括号中的对象 二.通过input()解析用户的输入 python3中inp ...