用echarts.js制作中国地图,点击对应的省市链接到指定页面
这里使用的是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制作中国地图,点击对应的省市链接到指定页面的更多相关文章
- echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
- echarts.js制作中国地图
一.准备 1. 打开sublime,新建一个echarts文件夹,新建echarts.html文件 2. 在echarts.html文件中,为ECharts准备一个Dom(id是china-map ...
- D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
- 使用echarts简单制作中国地图，echarts中国地图
网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...
- D3.js 制作中国地图
from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding a variety of ...
- 如何使用highmaps制作中国地图
如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...
- 使用highmaps制作中国地图
Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...
- 16、vue引入echarts，划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- 利用d3.js绘制中国地图
d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...
随机推荐
- 协议详解3——IP
1. 特点: 所有的TCP,UDP,ICMP,IGMP数据都以IP数据报格式传输. 提供不可靠,无连接服务. 不可靠: 不能保证IP数据报能成功到达目的.IP仅提供最好的传输服务.如果发生某种错误时 ...
- UVA 10954 Add All 全部相加 （Huffman编码）
题意:给你n个数的集合,每次选两个删除,把它们的和放回集合,直到集合的数只剩下一个,每次操作的开销是那两个数的和,求最小开销. Huffman编码.Huffman编码对于着一颗二叉树,这里的数对应着单 ...
- 个人作业-Alpha项目测试
姓名 蒋东航 学号 201731062328 这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求链接 团队名称 机你太美(团队博客链接) 这个作业的目标 了解其他团队项目,学习其他团队优秀方 ...
- async/await的使用以及注意事项
使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性. 本文介绍 async / await 的基本用法和一些注意事项. a ...
- Mac OS X El Capitan系统完整性保护System Integrity Protection (SIP)
http://blog.csdn.net/yulimin/article/details/49992031 引言:前段时间经历了XCode编译器代码被注入的事件后,这次 Mac OS X El Cap ...
- 【转】树莓派3代3.5寸触摸屏驱动的安装（通过ssh安装）
这是用到的配件的树莓派3代 烧录好系统后,启动的树莓派,我的树莓派已经在一开始通过路由器和局域网,登陆了ssh,设置好了开机就能自动连接到电脑的360wifi,所以无论到哪 里,只要自己的笔记本电脑还 ...
- 用requests爬取图片
# coding=utf-8 from bs4 import BeautifulSoup import requests import urllib x = 1 def crawl(url): res ...
- CentOS 编译安装PHP5.6（7以上也通用）
由于公司有新服务器需要构建一套LNMP平台,且需要编译安装各个部件,所以记录下此文章. 这是安装PHP涉及到的软件包(可以自行决定使用哪个版本): ├── libiconv-1.15.tar.gz ├ ...
- Anaconda的安装、使用以及与PyCharm的链接
初学Python的盆友们是否有这样的疑惑: 选择Python2还是Python3呢?(后者并不完全兼容前者) 听说两者可以同时安装,那怎么管理呢? Python那么丰富的第三方库,一个一个装太麻烦啦 ...
- JQuery根据字母检索元素并导航到指定位置
介绍:类似于实现ios通讯录中右侧字母,快速导航到联系人的效果,如图: Html代码如下,分别是字母和港星名字的排序: <input type="text" id=" ...