今天花了一天的时间，用echart弄了一个效果，是从中国地图点进去身份并把改省份的数据渲染出来的效果，刚开始完全没有头绪，只能硬着头皮去看百度echart的api，和博客，看了半天，好家伙，终于给我找到了对应的案列，不多说，看代码，这里采用的是echart2的版本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>碳普惠</title>
<link rel="stylesheet" type="text/css" href="../statics/css/reset.css"/>
</head>
<body>
<div id="china"></div>
<script src="../statics/js/echarts/build/dist/echarts.js"></script>
</body>
</html>

《第一步》配置echart路径,这里我采用了相对路径，详细说明可以看http://echarts.baidu.com/echarts2/doc/start.html?qq-pf-to=pcqq.c2c

require.config({
paths: {
echarts: '../statics/js/echarts/build/dist'
}
})

《第二步》配置地图

require(['echarts', 'echarts/chart/map'], function(ch) {
// 基于准备好的dom，初始化echarts图表
var myChart = ch.init(document.getElementById('china'));
option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
dataRange: { //柱子的设置
min: 0,
max: 100,
x: 'left',
y: '10%',
text: ['高', '低'], // 文本，默认为数值文本
textStyle: {
color: 'white'
},
color: ['#00d970', '#b3ffa7', '#9ae1ff'],
calculable: true,
inRange: {
color: ['#00d970', '#b3ffa7', '#9ae1ff'],
}
},
series: [{
name: '中国',
type: 'map',
mapType: 'china', //可以是world,省份中文名
selectedMode: 'single', //multiple多选
mapLocation: {
x: "10%",
y: "center"
},
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: '北京',
value: 100
}, {
name: '天津',
value: 0
}, {
name: '上海',
value: 60
}, {
name: '重庆',
value: 0
}, {
name: '河北',
value: 60
}, {
name: '河南',
value: 60
}, {
name: '云南',
value: 0
}, {
name: '辽宁',
value: 0
}, {
name: '黑龙江',
value: 0
}, {
name: '湖南',
value: 60
}, {
name: '安徽',
value: 0
}, {
name: '山东',
value: 60
}, {
name: '新疆',
value: 0
}, {
name: '江苏',
value: 0
}, {
name: '浙江',
value: 0
}, {
name: '江西',
value: 0
}, {
name: '湖北',
value: 60
}, {
name: '广西',
value: 60
}, {
name: '甘肃',
value: 0
}, {
name: '山西',
value: 60
}, {
name: '内蒙古',
value: 0
}, {
name: '陕西',
value: 0
}, {
name: '吉林',
value: 0
}, {
name: '福建',
value: 0
}, {
name: '贵州',
value: 0
}, {
name: '广东',
value: 597
}, {
name: '青海',
value: 0
}, {
name: '西藏',
value: 0
}, {
name: '四川',
value: 60
}, {
name: '宁夏',
value: 0
}, {
name: '海南',
value: 60
}, {
name: '台湾',
value: 0
}, {
name: '香港',
value: 0
}, {
name: '澳门',
value: 0
}]
}]
};
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {
var selected = param.selected;
var selectedProvince;
var name;
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
option.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;//这里的selectedProvince为中文，传到浏览器链接的时候可能会乱码，处理方法可以去百度
}
}
if (typeof selectedProvince == 'undefined') {
option.series.splice(1);
option.legend = null;
option.dataRange = null;
myChart.setOption(option, true);
return;
}
var urlArr = ['44', '55', '44'];
for (var p in selected) {
if (selected[p]) {
switch (p) {
case '河南':
location.href = 'provinceMap.html?proviceId=' + urlArr[0] + '&&proviceName=' + selectedProvince;
break;
case '重庆':
location.href = 'provinceMap.html?proviceId=' + urlArr[1] + '&&proviceName=' + selectedProvince;
break;
case '广东':
location.href = 'provinceMap.html?proviceId=' + urlArr[2] + '&&proviceName=' + selectedProvince;
break;
default:
break;
}

}
}
});
// 为echarts对象加载数据
myChart.setOption(option);
});

电脑不够大但为了清晰只截了一部分

《第三步》进去省页面的时候，通过链接获取上一个页面的selectedProvince的值，

执行下面的js即可

// 指定图表的配置项和数据
require.config({
paths: {
echarts: '../statics/js/echarts/build/dist'
}
})
require(['echarts', 'echarts/chart/map'], function(ch) {
// 基于准备好的dom，初始化echarts图表
var myChart = ch.init(document.getElementById('province'));
option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
dataRange: {
show: false,
min: 0,
max: 100,
x: 'left',
y: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
color: ['#00d970', '#b3ffa7', '#9ae1ff'],
calculable: true,
inRange: {
color: ['#9ae1ff', '#b3ffa7', '#00d970'],
}
},
series: [{
name: '中国',
type: 'map',
mapType: selectedProvince,//通过链接获取
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': '广州市',
value: 785.21
}, {
'name': '韶关市',
value: 0
}, {
'name': '河源市',
value: 0
}, {
'name': '东莞市',
value: 0
}, {
'name': '佛山市',
value: 0
}, {
'name': '惠州市',
value: 0
}, {
'name': '珠海市',
value: 0
}, {
'name': '中山市',
value: 0
}]
}]
};
// 为echarts对象加载数据
myChart.setOption(option);
});

echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍的更多相关文章

  1. 用echarts.js制作中国地图,点击对应的省市链接到指定页面

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

  2. 小程序Echarts 构建中国地图并锚定区域点击事件

    小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...

  3. 如何使用highmaps制作中国地图

    如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...

  4. D3.js 制作中国地图 .net 公共基础类

    D3.js 制作中国地图 from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...

  5. 使用echarts简单制作中国地图，echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  6. ECharts（中国地图）的使用 及 非空 tooltip formatter 验证

    中国地图使用频率很高下载文件:        echarts.min.js网址:               http://echarts.baidu.com/download.html点击:     ...

  7. 1、ECharts（中国地图篇）的使用

    一.网址:            http://echarts.baidu.com/download.html点击:            完整下载文件:        echarts.min.js ...

  8. echarts实现中国地图数据展示

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  9. echarts画中国地图并上色

    任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool ...

随机推荐

  1. SET NOCOUNT (Transact-SQL)

    阻止在结果集中返回显示受 Transact-SQL 语句或存储过程影响的行计数的消息. 语法 SET NOCOUNT { ON | OFF } 注释  当 SET NOCOUNT 为 ON 时,不返回 ...

  2. HDOJ(HDU) 1720 A+B Coming(进制)

    Problem Description Many classmates said to me that A+B is must needs. If you can't AC this problem, ...

  3. Linux网卡驱动架构分析

    一.网卡驱动架构 由上到下层次依次为:应用程序→系统调用接口→协议无关接口→网络协议栈→设备无关接口→设备驱动. 二.重要数据结构 1.Linux内核中每一个网卡由一个net_device结构来描述. ...

  4. SQL 截图

  5. [Linux] 流 ( Stream )、管道 ( Pipeline ) 、Filter - 笔记

    流 ( Stream ) 1. 流,是指可使用的数据元素一个序列. 2. 流,可以想象为是传送带上等待加工处理的物品,也可以想象为工厂流水线上的物品. 3. 流,可以是无限的数据. 4. 有一种功能, ...

  6. [Java I/O] TextFile 工具类

    一种常见的编程任务是,从一个文件读取内容,修改内容,再把内容写到另一个文件里. Java 要实现读取.写入操作,需要创建多个类才能产生一个 Stream 进行操作. 下面是一个简单的工具类,封装对文件 ...

  7. Android开发学习之Camera

    今天本来想写一篇关于百度地图定位SDK的文章的,无奈根据官网提供的例子编写的程序始终无法运行,所以这个计划只能落空.那么今天要与大家分享的是Camera,即照相机.随着硬件能力的大幅提升,手机上各种依 ...

  8. Servlet的PrintWriter out = response.getWriter()使用

    一直以来,只知道out可以向客户端浏览器页面输入数据(html.txt等类型),今天在和php程序联调时发现自己的理解出现了偏差. out是输出字符流,即servlet接受到request请求后,se ...

  9. linux命令之partprobe

    使用fdisk工具只是将分区信息写入到磁盘,如果需要使用mkfs格式化并使用分区,则需要重新启动系统.partprobe 是一个可以修改kernel中分区表的工具,可以使kernel重新读取分区表而不 ...

  10. Linux shell入门基础（一）

    Linux shell入门基础(一): 01.增加删除用户: #useradd byf   userdel byf(主目录未删除)  userdel -r byf   该用户的属性:usermod 用 ...