用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=/ ...
随机推荐
- Codeforces Round #321 (Div. 2) B. Kefa and Company （尺取）
排序以后枚举尾部.尺取,头部单调,维护一下就好. 排序O(nlogn),枚举O(n) #include<bits/stdc++.h> using namespace std; typede ...
- Contour Features 边界特征
查找轮廓 findContours cv2.findContours(image, mode, method[, contours[, hierarchy[, offset]]]) → image ...
- 一些常用的HTML标签
由于本人目前没有系统学习,日常碰见哪个有用就记下来. pre标签 可定义预格式化的文本,在pre元素中的文本会保留空格和换行符.比如我们展示源代码的时候,只要放一个pre标签,然后把代码直接复制.粘贴 ...
- 01_9_ServletContext
01_9_ServletContext 1. 例子 public void doGet(HttpServletRequest request, HttpServletResponse response ...
- char与varchar的区别与联系
char是字节类型,varcahr是字符类型 1.char(20) 存放的是字节,utf-8中文字符占三个字节,GB18030兼容GBK兼容GB2312中文字符占两个字节,ISO8859-1是拉丁字符 ...
- 如何在 CentOS 7 上安装 Python 3
当前最新的 CentOS 7.5 默认安装的是 Python 2.7.5,并且默认的官方 yum 源中不提供 Python 3 的安装包.这里主要介绍两种在 CentOS 7 中安装 Python 3 ...
- verilog $fopen 函数的小缺陷
system task $fopen 的argument 为1.文件名字(可以包含具体的文件路径但是注意用)2.打开方式比如"r"."w"."a&qu ...
- ultraedit编辑器破解版下载
ultraedit一款功能丰富的网站建设软件,需要的朋友可以看看. 百度百科:UltraEdit 是一套功能强大的文本编辑器,可以编辑文本.十六进制.ASCII 码,完全可以取代记事本(如果电脑配置足 ...
- Git命令大总结（纯手办）
Git完整命令手册地址:http://git-scm.com/docs PDF版命令手册地址:github-git-cheat-sheet.pdf 1.git config -l查看全局用户信息配置 ...
- /dev/sda is apparently in use by the system; will not make a filesystem here!解决方法
/dev/sda is apparently in use by the system; will not make a filesystem here! 翻译:系统显然在使用,不会在这里做文件系统 ...