Echarts Map地图类型使用
使用的时候出现了一个BUG, China地图的底色没有绘制出来，现在把一个小的DEMO给大家，以供参考，并附上参考文章（http://blog.csdn.net/danielinbiti/article/details/44851781），祝好。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:500px;width:500px;"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main')); var effect = {
show: true,
scaleSize: require('zrender/tool/env').canvasSupported ? 1 : 2,
period: 30, // 运动周期，无单位，值越大越慢
color: '#fff',
shadowColor: 'rgba(220,220,220,0.4)',
shadowBlur : 5
};
function itemStyle(idx) {
return {
normal: {
color:'#fff',
borderWidth:1,
borderColor:['rgba(30,144,255,1)','lime'][idx],
lineStyle: {
//shadowColor : ['rgba(30,144,255,1)','lime'][idx], //默认透明
//shadowBlur: 10,
//shadowOffsetX: 0,
//shadowOffsetY: 0,
type: 'solid'
}
}
}
};
var option = {
backgroundColor: '#1b1b1b',
color: ['rgba(30,144,255,1)','lime'],
title : {
text: '中国铁路运输主干线',
subtext:'数据来自维基百科',
x:'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
formatter: '{b}'
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name: '八横通道',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
itemStyle:{
normal:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#1b1b1b'
}
}
},
data:[], },
{
name: '八横通道',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
itedmStyle:{
normal:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
//color: '#1b1b1b'
color: 'red'
}
}
},
data:[],
markLine : {
symbol: ['circle', 'circle'],
symbolSize : 1,
effect : effect,
itemStyle : itemStyle(1),
smooth:true,
data : [
[{name:'北京'}, {name:'兰州'}],
[{name:'兰州'}, {name:'拉萨'}], [{name:'大同'}, {name:'秦皇岛'}], [{name:'神木'}, {name:'黄骅'}], [{name:'太原'}, {name:'德州'}],
[{name:'德州'}, {name:'龙口'}],
[{name:'龙口'}, {name:'烟台'}], [{name:'太原'}, {name:'德州'}],
[{name:'德州'}, {name:'济南'}],
[{name:'济南'}, {name:'青岛'}], [{name:'长治'}, {name:'邯郸'}],
[{name:'邯郸'}, {name:'济南'}],
[{name:'济南'}, {name:'青岛'}], [{name:'瓦塘'}, {name:'临汾'}],
[{name:'临汾'}, {name:'长治'}],
[{name:'长治'}, {name:'汤阴'}],
[{name:'汤阴'}, {name:'台前'}],
[{name:'台前'}, {name:'兖州'}],
[{name:'兖州'}, {name:'日照'}], [{name:'侯马'}, {name:'月山'}],
[{name:'月山'}, {name:'新乡'}],
[{name:'新乡'}, {name:'兖州'}],
[{name:'兖州'}, {name:'日照'}], [{name:'连云港'}, {name:'郑州'}],
[{name:'郑州'}, {name:'兰州'}],
[{name:'兰州'}, {name:'乌鲁木齐'}],
[{name:'乌鲁木齐'}, {name:'阿拉山口'}], [{name:'西安'}, {name:'南阳'}],
[{name:'南阳'}, {name:'信阳'}],
[{name:'信阳'}, {name:'合肥'}],
[{name:'合肥'}, {name:'南京'}],
[{name:'南京'}, {name:'启东'}], [{name:'重庆'}, {name:'武汉'}],
[{name:'武汉'}, {name:'九江'}],
[{name:'九江'}, {name:'铜陵'}],
[{name:'铜陵'}, {name:'南京'}],
[{name:'南京'}, {name:'上海'}], [{name:'上海'}, {name:'怀化'}],
[{name:'怀化'}, {name:'重庆'}],
[{name:'重庆'}, {name:'成都'}],
[{name:'成都'}, {name:'贵阳'}],
[{name:'贵阳'}, {name:'昆明'}], [{name:'昆明'}, {name:'南宁'}],
[{name:'南宁'}, {name:'黎塘'}],
[{name:'黎塘'}, {name:'湛江'}]
]
},
geoCoord: {
'阿拉山口':[82.5757,45.1706],
'包头':[109.8403,40.6574],
'北京':[116.4075,39.9040],
'成都':[104.0665,30.5723],
'大连':[121.6147,38.9140],
'大同':[113.3001,40.0768],
'德州':[116.3575,37.4341],
'福州':[119.2965,26.0745],
'广州':[113.2644,23.1292],
'贵阳':[106.6302,26.6477],
'哈尔滨':[126.5363,45.8023],
'邯郸':[114.5391,36.6256],
'杭州':[120.1551,30.2741],
'合肥':[117.2272,31.8206],
'侯马':[111.3720,35.6191],
'怀化':[109.9985,27.5550],
'淮安':[119.0153,33.6104],
'黄骅':[117.3300,38.3714],
'济南':[117.1205,36.6510],
'焦作':[113.2418,35.2159],
'九江':[116.0019,29.7051],
'九龙红磡':[114.1870,22.3076],
'昆明':[102.8329,24.8801],
'拉萨':[91.1409,29.6456],
'兰州':[103.8343,36.0611],
'黎塘':[109.1363,23.2066],
'连云港':[119.2216,34.5967],
'临汾':[111.5190,36.0880],
'柳州':[109.4160,24.3255],
'龙口':[120.4778,37.6461],
'洛阳':[112.4540,34.6197],
'满洲里':[117.3787,49.5978],
'南昌':[115.8581,28.6832],
'南京':[118.7969,32.0603],
'南宁':[108.3661,22.8172],
'南阳':[112.5283,32.9908],
'宁波':[121.5440,29.8683],
'启东':[121.6574,31.8082],
'秦皇岛':[119.6005,39.9354],
'青岛':[120.3826,36.0671],
'日照':[119.5269,35.4164],
'厦门':[118.0894,24.4798],
'上海':[121.4737,31.2304],
'深圳':[114.0579,22.5431],
'神木':[110.4871,38.8610],
'沈阳':[123.4315,41.8057],
'台前':[115.8717,35.9701],
'太原':[112.5489,37.8706],
'汤阴':[114.3572,35.9218],
'天津':[117.2010,39.0842],
'铜陵':[117.8121,30.9454],
'瓦塘':[109.7600,23.3161],
'温州':[120.6994,27.9943],
'乌鲁木齐':[87.6168,43.8256],
'武汉':[114.3054,30.5931],
'西安':[108.9402,34.3416],
'新乡':[113.9268,35.3030],
'信阳':[114.0913,32.1470],
'烟台':[121.4479,37.4638],
'兖州':[116.7838,35.5531],
'月山':[113.0550,35.2104],
'湛江':[110.3594,21.2707],
'长治':[113.1163,36.1954],
'郑州':[113.6254,34.7466],
'重庆':[106.5516,29.5630]
}
}
]
}; // 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
注意： Series里面，一共写了两个data，这样才会显示China地图的底图，否则BUG出现了之后地图的底色是高亮的。
Echarts Map地图类型使用的更多相关文章
- echarts map 地图在react项目中的使用
需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...
- echarts Map(地图) 不同颜色区块显示
以河南地图为例: 代码如下: <h3>天翼日必达完成率</h3> <div id="map" style="height:340px; te ...
- Echarts Map地图下钻至县级
**准备工作:**1.首先使用vue-cli的脚手架生成vue项目. 2.然后使用npm安装echartsnpm install echarts -S 3.安装完后再mian.js中挂载到vue的实例 ...
- echarts map地图设置外边框或者阴影
geo: { map: 'china', center: [112.194115019531, 23.582111640625], zoom: 12, aspectScale: 1, //长宽比 la ...
- 数据视化Echarts+百度地图API实现市县区级下钻
开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
- Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
- ECharts Map 属性详解
$(function() { // 路径配置 require.config({ paths : { // echarts: 'http://echarts.baidu.com/build/dist' ...
- ECharts 实现地图散点图上（转载）
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教 ...
- echarts以地图形式显示中国疫情情况实现点击省份下钻
首先要导入对应的包.下钻用到各个省份的json文件等内容导入之后进行相关的操作. 首先是从数据库中读取相应的数据文件.通过list方式.只有在ser出转化为json文件.在jsp页面通过ajax来进行 ...
随机推荐
- entityframework学习笔记--003-使用model first
首先,我个人觉得这(model first 即模型优先)是一个鸡肋似的功能.当赞扬着他的强大的功能的同时,你也会觉得这个功能好像是不是不怎么需要,也很少使用. 1.右键你的项目,选择"添加& ...
- WPF 数据绑定 1_1 基础知识&绑定到元素属性
A.数据绑定基础: 数据源对象:WPF将从该对象中提取信息,交由目标对象进行显示. 目标对象:从数据源中提取信息,并赋给该对象的属性. B.绑定到元素属性 最简单的绑定情形则是将一个源对象指定为一个W ...
- AMD and CMD are dead之KMDjs内核之依赖分析
有人说js中有三座大三:this.原型链和scope tree,搞懂了他们就算是js成人礼.当然还有其他不同看法的js成人礼,如熟悉js的:OOP.AP.FP.DOP.AOP.当然还听说一种最牛B的j ...
- OO方式下，ALV TREE和ALV GRID的不同之处
作为大部分报表程序的基础,ALV GRID差不多是每个ABAP开发者必须了解和掌握的内容,因此网上也不乏相关资料,而ALV TREE的应用相对较少,中文资料也就比较少见了.实际上,ALV TREE和A ...
- plist的读取和写入
// 从plist中读取数组数据 let arrPath = Bundle.main.path(forResource: "ArrayPList", ofType: "p ...
- 如何设置TextView控件的背景透明度和字体透明度
如何设置TextView控件的背景透明度和字体透明度 设计师给的标注都是类似这样的: 字号:26 颜色:#000000 透明度:80% 其实,程序上只要需要一个色值就OK了,那么这个色值我如何计算呢? ...
- Android Material Design 兼容库的使用
Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...
- linux 学习随笔-shell简单编写
脚本最好都放在/usr/local/sbin中 脚本的执行 sh -x 脚本.sh -x可以查看执行过程 1在脚本中使用变量 使用变量的时候,需要使用$符号: #!/bin/bash ##把命令赋 ...
- ORACLE DELETE数据慢的案例
今天遇到一个有意思的案例,一开发同事告诉我他删除一个表的记录非常慢,已经快1个多小时了还没有完成.而且删除的记录只有1百多条.真是大跌眼镜的一件事情.最后发现该表与多个表有外键关联关系(这个表即是主表 ...
- Failed to create AppDomain 'xxx'. Exception has been Failed to create AppDomain
一服务器上的数据库全部被置于紧急模式(EMERGENCY),在错误日志里面能看到大量下面的错误 Failed to create AppDomain "YourSQLDba.dbo[runt ...