今天花了一天的时间，用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. CSU 1559 订外卖

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82842#problem/E 订外卖 解题思路:定义两个数组,a[]表示满A,b ...

  2. linux下为用户添加sudo命令功能

    为用户添加sudo命令功能: 打开etc下的sudoers文件 vi /etc/sudoers 在 root   ALL=(ALL)  ALL 下面添加如下一行,然后保存关闭 hadoop  ALL= ...

  3. Web —— java web 项目开发 笔记

    1.tomcat 配置虚拟路径:Tomcat下配置虚拟路径管理web项目 发布路径配置( 即虚拟目录配置 )  配置虚拟路径的4种方法 2.

  4. JavaScript高级编程II

         原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1 在前面的文章中, ...

  5. IIS rewrite映射规则语法格式

    IIS rewrite映射规则语法格式,特殊符号:&请用& amp;代替,否则异常. <configuration> <system.webServer> &l ...

  6. Android 百度地图 SDK v3.0.0 （三） 添加覆盖物Marker与InfoWindow的使用

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37737213 上篇博客已经实现了地图的定位以及结合了方向传感器用户路痴定位方向, ...

  7. 渲染器 Shader BitmapShader

    渲染模式: tileX tileY:The tiling mode for x/y to draw the bitmap in.   在位图上 X/Y 方向 瓦工/花砖/瓷砖 模式 CLAMP  :如 ...

  8. ASP.NET-FineUI开发实践-6(二)

    1.上回说到修改以前的会出现好几个5: 这是因为新增时是只新增到最后一行,所以点击选好了就跑到最后一行了,而且行号不会累积,只加到初始化的行号. 其实js里是有插入的,例子里可以插入到第一行,新增是a ...

  9. 在Github上面搭建Hexo博客（一）：部署到Github

    什么是Hexo Hexo是一个基于Node.js的静态博客程序,可以方便的生成静态网页托管在Github和Heroku上.并且有很多人为其制作了很多优秀的主题(theme),你可以根据自己的喜好进行设 ...

  10. java中的异常机制（编译时异常）

    / * 1 异常机制的原理 * 异常是什么:就是错误的另外一种说法; * 在java中,有一个专门模拟所有异常的类,所有的异常都必须继承这个类:Throwable; * 本质是:当程序出错以后,jvm ...