这里使用的是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. UI高端课程

    目后佐道IT教育正在打架报名中,欢迎高中生.大学生前来学习编程技术和UI设计,招生面向全国. 石破天惊 前100个报名者免费提供高级公寓居住(里面有空调,暖气,热水器,洗衣机). 赠送神秘课程价值29 ...

  2. 苹果市值破万亿，iPhone 会涨价吗？

    今日导读 苹果教父乔布斯曾经说过:“活着就是为了改变世界.”虽然他在 56 岁时就遗憾离世,但他极具创新和变革的精神早已深埋进苹果公司的企业文化里,影响着一代又一代的人.就在最近,这家一直努力“改变世 ...

  3. 《毛毛虫团队》第八次团队作业：ALPHA冲刺

    一:实验名称:软件测试与ALPHA冲刺 二:实验目的与要求 (1)掌握软件测试基础技术. (2)学习迭代式增量软件开发过程(Scrum). 三:实验步骤 任务一:各个成员今日完成的任务: 任务二:明日 ...

  4. JS数据结构及算法（一） 堆栈

    最近在看<学习JavaScript数据结构与算法>这本书,感觉自己又涨知识了 哈哈... 现在将自己看的做个总结,也是巩固理解. 栈:先进后出,新添加和待删除的元素都保存在栈顶.可以用数组 ...

  5. [转载]matlab图像处理为什么要归一化和如何归一化

    matlab图像处理为什么要归一化和如何归一化,一.为什么归一化1.   基本上归一化思想是利用图像的不变矩寻找一组参数使其能够消除其他变换函数对图像变换的影响.也就是转换成唯一的标准形式以抵抗仿射变 ...

  6. 我的offer之路（一）

    目录 1.职业规划. 2.刷题. 3.看书. <剑指offer> <数据结构算法与应用:C++语言描述 > <Effective C++> <C与指针> ...

  7. spring IOC注解与xml配置

    转载自:https://blog.csdn.net/u014292162/article/details/52277756 IOC 1小案例 将对象的依赖交给配置文件来配置(配置文件的名字是可以任意的 ...

  8. Powershell 备忘

    如何修改环境变量 [environment]::SetEnvironmentvariable(“path”,"xxx","user") [environment ...

  9. Win2008 Server配置PHP环境

    Win2008 Server配置PHP环境   阅读目录 创建一个网站 配置PHP环境 配置iis的“处理应用程序映射” 在配置PHP环境之前要先配置好IIS. 传送门-> Win2008 Se ...

  10. Yii2.0 的安装学习

    视频学习地址: 后盾网视频: http://www.houdunren.com/houdunren18_lesson_76?vid=7350 与<Yii框架>不得不说的故事—基础篇 htt ...