今天花了一天的时间，用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. （转载）php之call_user_func_array的简易用法

    (转载)http://www.cnitblog.com/neatstudio/archive/2006/07/21/13990.html php之call_user_func_array的简易用法 今 ...

  2. uploadify在struts2下的使用

    1.首先准备uploadify上传插件包,拷贝到项目目录下 2.注意其中的特殊文件:uploadify-init.js文件,是包含了封装后的特殊函数: /** * uploadify上传插件相关JS ...

  3. 基于Struts2 的日志管理系统的Java实现

    1.首先,项目的架构如下:          2.com.sxl.dba 中:OracleConnector.java package com.sxl.dba; import java.sql.*; ...

  4. (Relax 水题1.2)POJ 1032 Parliament(将n分解成若干个互不相等的整数的和,并且是这些整数的乘积最大)

    题意:给出一个数n,将其拆分为若干个互不相等的数字的和,要求这些数字的乘积最大. 分析:我们可以发现任何一个数字,只要能拆分成两个大于1的数字之和,那么这两个数字的乘积一定大于等于原数.也就是说,对于 ...

  5. Jquery UI的datepicker插件使用

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...

  6. RESTful Web Services: A Tutorial--reference

    As REST has become the default for most Web and mobile apps, it's imperative to have the basics at y ...

  7. 【移动开发】WIFI热点通信（一）

    之前调查过Android中WIFI模块的使用,也写过两篇学习总结的文章(http://smallwoniu.blog.51cto.com/3911954/1334951),后来发现DEMO里面还是有许 ...

  8. ios 中如何应对UIScrollView快速滑动（暴力用户，暴力测试）

    1.实现UIScrollViewDelegate 开始滑动: - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView 滑动 ...

  9. vmware桥接模式创建ubuntu虚拟机

  10. adb服务启动失败处理命令

    执行以下命令: D:\android-sdks\platform-tools>adb kill-server --停止adb服务 D:\android-sdks\platform-tools&g ...