这里使用的是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. java基础—super关键字

    一.super关键字

  2. Bootstrap历练实例：带表格的面板

    带表格的面板 为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table.假设有个 <div> 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分 ...

  3. Linux 、AIX环境下查看oracle配置信息（service_name、SID、tnsname）。

    SID: echo $ORACLE_SID service_name: sqlplus / as sysdba; show parameter instance_name; show paramete ...

  4. Repeat a string repeat a string-freecodecamp算法题目

    Repeat a string repeat a string(重复输出字符串) 要求 重复一个指定的字符串 num次 如果num是一个负数则返回一个空字符串. 思路 将给定的字符串赋给定义的变量te ...

  5. C语言中声明和定义详解（待看。。

    变量声明和变量定义 变量定义:用于为变量分配存储空间,还可为变量指定初始值.程序中,变量有且仅有一个定义. 变量声明:用于向程序表明变量的类型和名字. 定义也是声明,extern声明不是定义 定义也是 ...

  6. 洛谷 1486/BZOJ 1503 郁闷的出纳员

    1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 13866  Solved: 5069[Submit][Stat ...

  7. matplotlib绘图（一）

    绘制这折现图 导入响应的包 import numpy as npimport pandas as pdfrom pandas import Series,DataFrame%matplotlib in ...

  8. Python爬虫系列-BeautifulSoup详解

    安装 pip3 install beautifulsoup4 解析库 解析器 使用方法 优势 劣势 Python标准库 BeautifulSoup(markup,'html,parser') Pyth ...

  9. html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)

    // html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...

  10. octave-basic

    在coursera上斯坦福的machine learning,lecturer极力推荐开源的编程环境Octave入手,所以我也下载了来试一试吧== 参考链接:http://www.linuxdiyf. ...