用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=/ ...
随机推荐
- cookie存验证码时间，时间没走完不能再次点击
<script> var balanceSeconds=getcookie('Num'); console.log(balanceSeconds) var timer; var isCli ...
- Trie入门讲解
我们常常用Trie(也叫前缀树)来保存字符串集合.如下图所示就是一个Trie. 上图表示的字符串集合为$\{a,to,tea,ted,ten,i,in,inn \}$,每个单词的结束位置对应一个“单词 ...
- 2018.3.3 多线程中继承Thread 和实现Runnable接口 的比较(通过售票案例来分析)
多线程中继承Thread 和实现Runnable接口 的比较(通过售票案例来分析) 通过Thread来实现 Test.java package com.lanqiao.demo4; public cl ...
- python_104_面向对象总结
参考(都要认真看看):http://www.cnblogs.com/alex3714/articles/5188179.html http://www.cnblogs.com/alex3714/art ...
- linux必会命令-查询-tail
先说一个tail使用的例子: tail -n 20 filename 说明:显示filename最后20行. Linux下tail命令的使用方法.linux tail命令用途是依照要求将指定的文件的最 ...
- 09GNU C语言程序编译
1. C 语言程序概述 GNU gcc 对 ISO 标准 C89 描述的 C 语言进行了一些扩展,其中一些扩展部分已经包括进 IOS C99 标准中.本节给出了内核中经常用到的一些 gcc 扩展语 ...
- Java中将字符串与unicode的相互转换工具类
unicode编码规则 unicode码对每一个字符用4位16进制数表示.具体规则是:将一个字符(char)的高8位与低8位分别取出,转化为16进制数,如果转化的16进制数的长度不足2位,则在其后补0 ...
- jvm架构以及Tomcat优化
JVM栈 JVM栈是线程私有的,每个线程创建的同时都会创建JVM栈,JVM栈中存放的为当前线程中局部基本类型的变量(java中定义的八种基本类型:boolean.char.byte.short.i ...
- Python基础（二）——常用内置函数
1. 常用内置函数 (1)isinstance(object, classinfo) 用于判断一个对象是否为某一类型. object 是实例对象 classinfo 是基本类型如 int, floa ...
- Centos7重启网卡失败解决方法
service Network-Manager stop 执行命令解决,如果执行命令还是失败,则是配置文件内容的问题,检查配置文件