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

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

具体代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>echarts.js插件实现中国地图省份选择效果</title>
  6.     <style>
  7.         *{margin:0;padding:0;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <div id="main" style="height:500px"></div>
  12.     <script src="dist/echarts.js"></script>
  13.     <script>
  14.         // 路径配置
  15.         require.config({
  16.             paths: {
  17.                 echarts: 'dist'
  18.             }
  19.         });
  20.         // 使用
  21.         require(['echarts','echarts/chart/map'],function (ch) {
  22.             // 基于准备好的dom，初始化echarts图表
  23.             var myChart = ch.init(document.getElementById('main'));
  24.             option = {
  25.                 tooltip : {
  26.                     trigger: 'item',
  27.                     formatter: '{b}'
  28.                 },
  29.                 series : [{
  30.                     name: '中国',
  31.                     type: 'map',
  32.                     mapType: 'china',
  33.                     selectedMode : 'single',//multiple多选
  34.                     itemStyle:{
  35.                         normal:{
  36.                             label:{
  37.                                 show:true,
  38.                                 textStyle: {
  39.                                     color: "#231816"
  40.                                 }
  41.                             },
  42.                             areaStyle:{color:'#B1D0EC'},
  43.                             color:'#B1D0EC',
  44.                             borderColor:'#dadfde'//区块的边框颜色
  45.                         },
  46.                         emphasis:{//鼠标hover样式
  47.                             label:{
  48.                                 show:true,
  49.                                 textStyle:{
  50.                                     color:'#fa4f04'
  51.                                 }
  52.                             }
  53.                         }
  54.                     },
  55.                     data:[
  56.                         {name:'四川',selected:true}
  57.                     ]
  58.                 }]
  59.             };
  60.             var ecConfig = require('echarts/config');
  61.             myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
  62.                 var selected = param.selected;
  63.                 var urlArr = ['http://www.baidu.com','http://http://www.cnblogs.com/sapho'];
  64.                 for (var p in selected) {
  65.                     if (selected[p]) {
  66.                         switch(p){
  67.                             case '河南':
  68.                                 location.href = urlArr[0];
  69.                                 break;
  70.                             case '重庆':
  71.                                 location.href = urlArr[1];
  72.                                 break;
  73.                             default:
  74.                                 break;
  75.                         }
  76.  
  77.                     }
  78.                 }
  79.             });
  80.             // 为echarts对象加载数据
  81.             myChart.setOption(option);
  82.         });
  83.     </script>
  84. </body>
  85. </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. k8s1.13.0二进制部署-Dashboard和coredns（五）

    部署UI 下载yaml文件https://github.com/kubernetes/kubernetes [root@k8s-master1 ~]# git clone https://github ...

  2. SC || Chapter 3

    ┉┉∞ ∞┉┉┉┉∞ ∞┉┉┉∞ ∞┉┉ 基本数据类型 && 对象数据类型 基本数据类型(int char long) 在栈中分配内存,不可变 对象数据类型(String BigInt ...

  3. StatementHandler-Mybatis源码系列

    内容更新github地址:我飞 StatementHandler接口 StatementHandler封装了Mybatis连接数据库操作最基础的部分.因为,无论怎么封装,最终我们都是要使用JDBC和数 ...

  4. java基础—数组

    一．数组的基本概念 数组可以看成是多个相同类型数据组合,对这些数据的统一管理. 数组变量属引用类型,数组也可以看成是对象,数组中的每个元素相当于该对象的成员变量. 数组的元素可以是任何数据类型,包括基 ...

  5. python报错UnicodeDecodeError:

    Python 里面的编码和解码也就是 unicode 和 str 这两种形式的相互转化.编码是 unicode -> str,相反的,解码就 是 str -> unicode.剩下的问题就 ...

  6. ajax的序列化表单提交

    通过传统的 form 表单提交的方式上传文件 ? 1 2 3 4 <form id="uploadForm" action="" method=" ...

  7. 03_10_Object类的toString equals等方法

    03_10_Object类的toString equals等方法 1. toString方法 Object类中定义有public String toString()方法,其返回值是String类型,描 ...

  8. 03_2_JAVA中的面向对象与内存解析

    03_2_JAVA中的面向对象与内存解析 1. 成员变量 成员变量可以是Java语言中任何一种数据类型(包括基本数据类型和引用数据类型) 在定义成员变量时可以对其初始化,如果不对其初始化,Java使用 ...

  9. Java基础面试操作题： 线程问题，写一个死锁（原理：只有互相都等待对方放弃资源才会产生死锁）

    package com.swift; public class DeadLock implements Runnable { private boolean flag; DeadLock(boolea ...

  10. 正确适配苹果ATS审核要求的姿势

    首先,ATS的技术行为不会有任何变化(除了新增两个字段NSAllowsArbitraryLoadsInWebContent和NSRequiresCertificateTransparency,也就是更 ...