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来进行 ...
随机推荐
- 去 IOE，MySQL 完胜 PostgreSQL
本文转载自: http://www.innomysql.net/article/15612.html (只作转载, 不代表本站和博主同意文中观点或证实文中信息) 前言 上周参加了2015年的中国数据库 ...
- 文章转载利用border、transparent实现微风
微风效果预览 微风源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 【特别推荐】小伙伴们惊呆了！8个超炫的 Web 效果
CodePen 是一个在线的 HTML.CSS 和 JavaScript 代码编辑器,能够编写代码并即时预览效果.你在上面可以在线展示自己的作品,也可以看到其他人在网页中实现的各种令人惊奇的效果. 今 ...
- TypeScript的4种编译方式
1.手动编译 1.1.首先找到TypeScript的安装目录,我的在"C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0".
- js 获取鼠标选中值
if (window.getSelection) {//一般浏览器 userSelection = window.getSelection();} else if (document.selectio ...
- iOS国际化
本文介绍iOS国际化包含以下几种: 应用名称,文字,图片和xib 首先在工程里添加支持的语言,这里用了English和中文 然后创建两个.strings类型的文件,文件名分别为InfoPlist和Lo ...
- iOS开发之巧用Block和代理方法结合来传值
好久没写技术博客了,因为996的工作周期已经持续好几个月了.每天晚上回家都没有太多精力学习很多其他的东西,而且很多时候是接着完善工作的项目的模块开发.所以博客停歇了这么久,更新率也低了不少,今天补充一 ...
- Symantec Backup Exec Remote Agent 2010在Redhat Enterprise 6.6上启动问题
在Red Hat Enterprise Linux Server release 6.6 (Santiago)上安装了Symantec Backup Exec Remote Agent 2010后,启 ...
- Linux启动报错missing operating system
用UltraISO制作了一个Red Hat Enterprise Linux Server release 5.7系统的U盘启动盘,然后在一台PC上安装,由于安装过程中在干别的事情,有些选项没有细看. ...
- The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path解决方案
0.环境: win7系统,Tomcat9配置无误. 1.错误: 项目中某一.jps页面忽然出现错误,鼠标点上去为:The superclass "javax.servlet.http.Htt ...