echarta3 北京，上海地图
1、首先你得到echarts官网下载js，建议下载完整代码，这样你就很容易根据我的路径找到beijing.js
2、把echarts.js和beijingi.js根据你的路径引对，然后就可以copy我的代码咯
3、如果你需要改变地图的颜色或轮廓线的颜色，请参考我的第一篇文章 http://www.cnblogs.com/hhw3/p/6252677.html
4、如果需要其他地图可参考我的上一边文章 http://www.cnblogs.com/hhw3/p/7606917.html
北京地图
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="main" style="100%; height: 100%;"></div>
</body>
<script src="js/echarts.js"></script>
<script src="js/map/js/province/beijing.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor:['#ff0000'],
title: {
text : '北京地图',
subtext : '-。-'
},
tooltip : {
trigger: 'item',
formatter: function(a){
return a[2];
}
},
legend: {
orient: 'vertical',
x:'right',
data:['数据名称']
},
dataRange: {
min: 0,
max: 1000,
color:['orange','yellow'],
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
series : [
{
name: '数据名称',
type: 'map',
mapType: '北京',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
//根据个人需要加，如果不需要则不必加
data:[
{name: '怀柔区',value: Math.round(Math.random()*1000)},
{name: '延庆县',value: Math.round(Math.random()*1000)},
{name: '密云县',value: Math.round(Math.random()*1000)},
{name: '昌平区',value: Math.round(Math.random()*1000)},
{name: '平谷区',value: Math.round(Math.random()*1000)},
{name: '顺义区',value: Math.round(Math.random()*1000)},
{name: '门头沟区',value: Math.round(Math.random()*1000)},
{name: '海淀区',value: Math.round(Math.random()*1000)},
{name: '朝阳区',value: Math.round(Math.random()*1000)},
{name: '石景山区',value: Math.round(Math.random()*1000)},
{name: '西城区',value: Math.round(Math.random()*1000)},
{name: '东城区',value: Math.round(Math.random()*1000)},
{name: '宣武区',value: Math.round(Math.random()*1000)},
{name: '丰台区',value: Math.round(Math.random()*1000)},
{name: '房山区',value: Math.round(Math.random()*1000)},
{name: '通州区',value: Math.round(Math.random()*1000)},
{name: '大兴区',value: Math.round(Math.random()*1000)}, ]
}
]
};
myChart.setOption(option);
</script>
</html>
上海地图
（js引入就不强调了，照上面说的做就好）
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="main" style="100%; height: 100%;"></div>
</body>
<script src="js/echarts.js"></script>
<script src="js/map/js/province/shanghai.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text : '上海地图',
subtext : '-。-'
},
tooltip : {
trigger: 'item',
formatter: function(a){
return a[2];
}
},
legend: {
orient: 'vertical',
x:'right',
data:['数据名称']
},
dataRange: {
min: 0,
max: 1000,
color:['orange','yellow'],
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
series : [
{
name: '数据名称',
type: 'map',
mapType: '上海',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
//根据个人需要加，若不需要则不用加
data:[
{name: '崇明县',value: Math.round(Math.random()*1000)},
{name: '宝山区',value: Math.round(Math.random()*1000)},
{name: '嘉定区',value: Math.round(Math.random()*1000)},
{name: '青浦区',value: Math.round(Math.random()*1000)},
{name: '杨浦区',value: Math.round(Math.random()*1000)},
{name: '虹口区',value: Math.round(Math.random()*1000)},
{name: '闸北区',value: Math.round(Math.random()*1000)},
{name: '普陀区',value: Math.round(Math.random()*1000)},
{name: '静安区',value: Math.round(Math.random()*1000)},
{name: '黄浦区',value: Math.round(Math.random()*1000)},
{name: '卢湾区',value: Math.round(Math.random()*1000)},
{name: '长宁区',value: Math.round(Math.random()*1000)},
{name: '徐汇区',value: Math.round(Math.random()*1000)},
{name: '浦东新区',value: Math.round(Math.random()*1000)},
{name: '松江区',value: Math.round(Math.random()*1000)},
{name: '闵行区',value: Math.round(Math.random()*1000)},
{name: '金山区',value: Math.round(Math.random()*1000)},
{name: '奉贤区',value: Math.round(Math.random()*1000)},
{name: '南汇区',value: Math.round(Math.random()*1000)}
]
}
]
};
myChart.setOption(option); </script>
</html>
如果我有帮助到你请点个赞鼓励一下我吧！
上述内容是参照echarts官网http://echarts.baidu.com/,若有侵权请联系，谢谢！
作者：BlancheWang
出处：http://www.cnblogs.com/hhw3
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。
echarta3 北京，上海地图的更多相关文章
- MPD大会北京上海两站圆满落幕
MPD大会北京上海两站圆满落幕 由麦思博(MSUP)主办的亚太软件研发团队管理峰会(以下简称MPD大会)分别于6月15及6月22日在北京.上海成功举办.国内外知名软件.互联网行业项目领头人及业内从业人 ...
- 【北京/上海/南京】【部门直推】【可查询】【实习&社招】字节跳动数据平台前端内推
[北京/上海/南京][部门直推][可查询][实习&社招]字节跳动数据平台前端内推 重要信息,写在前面 [投递邮箱]chengxinsong@bytedance.com [微信扫码] 2019 ...
- 使用Python和Perl绘制北京跑步地图
当你在一个城市,穿越大街小巷,跑步跑了几千公里之后,一个显而易见的想法是,如果能把在这个城市的所有路线全部画出来,会是怎样的景象呢? 文章代码比较多,为了不吊人胃口,先看看最终效果,上到北七家,下到南 ...
- Autodesk 最新开发技术研讨会-北京-上海-武汉-成都-西安-PPT下载
经过半月的奔波,转遍祖国大好河山.结论,还是喜欢成都,安逸~,好希望能在成都生活,竹林里品茶,不亦乐乎~ 如果你没能参加我们的研讨会,下面的PPT供参考: 面向世界.面向未来 – Autodesk 云 ...
- 乐卡上海网点地图制作心得 | 百度地图API使用心得
前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡 ...
- 【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
- jQuery地图热点效应-后在弹出的提示鼠标层信息
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 51地图标注接口(EZMarker API)
功能 在很多时候,您需要您的用户标出一个位置,比如:一个房地产网站,用户在登记新楼盘的时候,就需要在地图上标出这个楼盘的位置,这个时候就可以用到本接口. 地图标注接口(EZMarker API)是我要 ...
- Echarts+百度地图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- could not execute menu item系统找不到指定的文件
Wamp3.0.6 64bit,系统任务栏图标,左键,Apache菜单,httpd.conf,报错“could not execute menu item.....系统找不到指定的文件” 根据网上的搜 ...
- docker 2375 vulnerability and self-signatuer certifications
Docker暴露2375端口,引起安全漏洞 今天有小伙伴发现Docker暴露出2375端口,引起了安全漏洞.我现在给大家介绍整个事情的来龙去脉,并告诉小伙伴们,怎么修复这个漏洞. 为了实现集群管理,D ...
- 将expression转化为数据类型int时发生算术溢出错误
在SQL Server 中,某列的数据都在int范围之内,但是使用sum聚集函数求该列和的时候,出现“将expression转化为数据类型int时发生算术溢出错误”. 问题在于定义的数据类型: 首先, ...
- 三个小时学会wordpress模板制作
最近接了一个项目需要用wordpress建站,版面相对简单,ytkah就琢磨着自己来设计wordpress模板,首页栏目页文章页(很多网站无外乎就这些页面),其中栏目页和首页又很像,都是调用文章列表. ...
- springboot中的常用注解
springboot中的常用注解个人觉得springboor中常用的注解主要可以分为三种:放入容器型注解.从容器中取出型注解和功能型注解.其中的放入容器型和从容器中取出型就是我们平时所说的控制反转和依 ...
- poj1329 Circle Through Three Points
地址:http://poj.org/problem?id=1329 题目: Circle Through Three Points Time Limit: 1000MS Memory Limit: ...
- 大喜python版opencv3发布，demo脚本抢鲜版发布
大喜,python版opencv3发布 zwPython3的升级也可以启动了,一直在等这个,zwPython会直接升级到版本3:zwPython3 zwPython3采用64位python3,支持op ...
- uva1366 dp
这题说的是给了 一个矩阵在每个单元内有BLOHHLUM 种的资源 Bi,j, 有YEYENUM 种的 资源Ai,j , 资 源 从 该 单 位 出 发 不能 转 弯 直 接 运 送 到 像 B 类 资 ...
- 钉钉企业的CorpId 查看
打开钉钉开发者文档官网,注册一个账号(个人也可以注册),登陆账号之后在开发账号管理那里可以看到corpid(企业ID),corpsecret需要生成
- 【软件安装】Xshell + XFtp
[问题]xshell evaluation period has expired 今天发现一个xshell过期的事情,其实官方提供对应的校园版本供大家使用 进入官方下载地址:xshell地址 填写个人 ...