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来进行 ...
随机推荐
- GJM ：C#开发 异步处理是目的，多线程是手段
但是BeginAccept和EndAccept不就是system.net.socket封装好的异步socket吗如果用多线程来实现的话那就不叫异步了吧 1.再次强调,异步是目的,多线程是手段. 所谓异 ...
- javascript类型系统——正则表达式RegExp类型
× 目录 [1]对象 [2]实例属性 [3]静态属性[4]实例方法 前面的话 前面已经介绍过javascript中正则表达式的基础语法.javascript的RegExp类表示正则表达式,String ...
- AD RMS 配置指南 附结合SharePoint使用
本文的 RMS配置 是独立安装的配置手册,如果要和SharePoint结合使用可以作为参考指南. SharePoint安装可参考 点击链接 同样可提供给Office使用,当然Exchange也可以使用 ...
- iOS歌词逐渐变色动画
实现歌词逐渐变色的动画,像卡拉OK一样可以根据时间进度来染色.效果如图: 因项目需求要实现一个类似歌词逐渐变色的效果,自己想来想去想不出来实现方案,还是得求助万能的google, 最终是找到了这篇 ...
- Handler.sendMessage 与 Handler.obtainMessage.sendToTarget比较
原文地址: http://www.cnblogs.com/android007/archive/2012/05/10/2494766.html 话说在工作中第一次接触android 的Handler ...
- iOS可执行文件瘦身方法
缩减iOS安装包大小是很多中大型APP都要做的事,一般首先会对资源文件下手,压缩图片/音频,去除不必要的资源.这些资源优化做完后,我们还可以尝试对可执行文件进行瘦身,项目越大,可执行文件占用的体积越大 ...
- 【转】JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
- 重装win7、vs15、sqlserver08、驱动经验教训
问自己:为什么要进行系统清洗 1.C盘已经接近爆满,vs2015无法安装. 2.C盘以前的残留软件.文件不知道如何化解,原vs2010卸载困难. 3.整个系统反应迟缓. 改进方案: 1系统C盘 2软件 ...
- Oracle shutdown immediate无法关闭数据库解决方法
在测试服务器上使用shutdown immediate命令关闭数据库时,长时间无法关闭数据库,如下所示 1: [oracle@DB-Server admin]$ sqlplus / as sysdba ...
- CDH离线数据导入solr：利用MapReduceIndexerTool将json文件批量导入到solr
场景描述:前段时间,将实时数据通过kafka+flume+morphline的方式接入到solr中.新进来的数据已经可以在solr中看到了,但是以前的历史数据还没有导入solr. CDH提供利用Map ...