今天花了一天的时间，用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. 发布WebService到IIS和调用WebService

    一:在项目上右键单击,选择发布,如图 二:可以单击重命名,自定义网站的名字,发布方式为:文件系统,目标路径为要发布的文件的位置,它需要放到IIS的目录下面的 三:打开IIS管理器,右键单击网站,添加网 ...

  2. tinyxml开源库的基本用法

    最近项目中的某个功能需要写xml,由于项目中已经引入了tinyxml,所以不再寻找其他开源库. 前提:你得有个xml对象,声明tinyxml的对象:基于tinyxml的内存管理,TiXmlDocume ...

  3. Java---IO加强(3)-IO流的操作规律

    一般写关于操作文件的读取的几个通用步骤!!! 1.明确源和目的. 源:InputStream Reader 一定是被读取的. 目的:OutputStream Writer 一定是被写入的. 2.处理的 ...

  4. 自定义UINavigationItem的两种方法以及相应的隐藏方法

    第一种: UIImage *searchimage=[UIImage imageNamed:@"search.png"]; UIBarButtonItem *barbtn=[[[U ...

  5. Sql 行转列、列转行及分页

    说明:本实例是以 SQL Server 2005 为运行环境的. 准备工作:创建一个名为 DB 的数据库(CREATE DATABASE DB). 一.T-SQL 行转列 1.创建如下表 CREATE ...

  6. java入门之异常处理小结

    (1)异常和错误 异常(Exception):不正常的事件,会中断程序,在运行中发生的意外,程序本身可以处理,防止程序中断:程序中会捕获的异常信息,并告诫用程序员,不要求程序必须对它做处理.catch ...

  7. STK 10.1.3

    2692407267@qq.com.很多其它内容请关注http://user.qzone.qq.com/2692407267 STK 10.1.3与Qualnet联合仿真的demo

  8. [每日一题] 11gOCP 1z0-052 :2013-09-2 ADDM(Automatic Database Diagnostic Monitor)...................A28

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/10951207 正确答案:BC AWR简称Automatic Workload Reposi ...

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

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

  10. Android Back Home键监听

    Android Back Home键监听 Back键的监听 对于Back键的监听比较容易,可以在多个系统回调处拦截,比如在activity的下列方法中都可以收到Back键按下的事件: @Overrid ...