今天花了一天的时间，用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. HDOJ 2131 Probability

    Problem Description Mickey is interested in probability recently. One day , he played a game which i ...

  2. Mina笔记

    1．MINA框架简介 MINA(Multipurpose Infrastructure for Network Applications)是用于开发高性能和高可用性的网络应用程序的基础框架.通过使用M ...

  3. Hu矩SVM训练及检测-----OpenCV

    关键词:Hu矩,SVM,OpenCV 在图像中进行目标物识别,涉及到特定区域内是否存在目标物,SVM可在样本量较少情况下对正负样本(图片中前景背景)做出良好区分,图片基本特征包括诸如HOG.LBP.H ...

  4. Maven assembly插件输出文件乱码问题

    使用Maven的<artifactId>maven-assembly-plugin</artifactId>插件导致输出的XML配置文件源文件的中文注释变成乱码,排查了多个地方 ...

  5. 在自己电脑上建立SVNserver

    转载处:http://blog.csdn.net/shmily570/article/details/8227690 传统的Subversionserver配置方法: 一.准备工作 1.获取 Subv ...

  6. Android ProgressBar SeekBar

    1.ProgressBar 进度条 当水平进度条完成后,隐藏该进度条,并显示一张图片 常用属性: 1. android:max 设置进度条的最大值 2. android:progress 用于指定进度 ...

  7. Android BaseAdapter Gallery 画廊视图 （左右拖动图片列表拖至中间时图片放大显示）

    画廊视图使用Gallery表示,能够按水平方向显示内容,并且可以手指直接拖动图片和移动,一般用来浏览图片,,被选中的选项位于中间,并且可以响应事件显示信息.在使用画廊视图时,首先在屏幕上添加Galle ...

  8. Windows下搭建MySQL Master Slave[转]

    Windows下搭建MySQL Master Slave 一.背景 服务器上放了很多MySQL数据库,为了安全,现在需要做Master/Slave方案,因为操作系统是Window的,所以没有办法使用k ...

  9. js window.open()弹出窗口参数说明及居中设置

    window.open()可以弹出一个新的窗口,并且通过参数控制窗口的各项属性. 最基本的弹出窗口代码 window.open('httP://codeo.cn/'); window.open()各参 ...

  10. C#txt文件读写基本操作

    string strFileName=@"C:\Users\Administrator\Desktop\记事2.txt"; //判断是否存在 if (File.Exists(str ...