用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=/ ...
随机推荐
- 有一个无效 SelectedValue，因为它不在项目列表中
“Drp_XX”有一个无效 SelectedValue,因为它不在项目列表中 出现以上异常的原因肯定是将DrowDownList控件的SelectedValue属性赋值为一个列表中不存在的值.那么我们 ...
- Ubuntu下apt-get与pip安装命令的区别
在ubuntu服务器下安装包的时候,经常会用到sudo apt-get install 包名 或 sudo pip install 包名,那么两者有什么区别呢? 1.区别pip用来安装来自PyPI(h ...
- SAP CRM和C4C的客户主数据修改历史记录查询
SAP CRM 随便修改一个字段,比如给Search Term维护值"webpack": Change History assignment block里显示出了这条修改记录: 根 ...
- Codeforces Round #320 (Div. 1) [Bayan Thanks-Round] C A Weakness and Poorness （三分）
显然f(x)是个凹函数,三分即可,计算方案的时候dp一下.eps取大了会挂精度,指定循环次数才是正解. #include<bits/stdc++.h> using namespace st ...
- 摘自 dd大牛的《背包九讲》
P01: 01背包问题 题目 有N件物品和一个容量为V的背包.第i件物品的费用是c[i],价值是w[i].求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大. 基本思路 这是最 ...
- 交叉熵cross entropy和相对熵（kl散度）
交叉熵可在神经网络(机器学习)中作为损失函数,p表示真实标记的分布,q则为训练后的模型的预测标记分布,交叉熵损失函数可以衡量真实分布p与当前训练得到的概率分布q有多么大的差异. 相对熵(relativ ...
- DB2中创建表
CONNECT TO TEST; CREATE TABLE DB2ADMIN.PERSON ( ID BIGINT NOT NULL , NAME BIGINT , FLAG BIGINT , ADD ...
- c++作业:求N的阶乘。
N的阶乘就是n.(n-1)! 5的阶乘是什么?5*4*3*2*1 #include <iostream> using namespace std; int jiecheng(int num ...
- 转 Spring源码剖析——核心IOC容器原理
Spring源码剖析——核心IOC容器原理 2016年08月05日 15:06:16 阅读数:8312 标签: spring源码ioc编程bean 更多 个人分类: Java https://blog ...
- 01创建线程CreateThread和_beginthreadex
Windows多线程之线程创建 一. 线程创建函数 CreateThread 1. 函数原型 HANDLE WINAPI CreateThread( _In_opt_ LPSECURITY_ATTRI ...