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>

View Code

注意： Series里面，一共写了两个data，这样才会显示China地图的底图，否则BUG出现了之后地图的底色是高亮的。

转载于:https://www.cnblogs.com/BrowserSnake/p/4758633.html

Echarts Map地图类型使用相关推荐

echarts map 地图做出立体效果
echarts map 地图做出立体效果最近做项目,需要用到立体地图,但是立体地图上还需要很多其他效果,所以用了 map 平面地图做出了立体效果. 想知道怎么弄的,扣1,欢迎来交流.
echarts map地图数据Json制作教程
首先来一个echarts map地图使用的教程(对应地图的数据包我的下载里有 echarts地图离线数据包有需要的可以自行下载或在博客下留言我会单独发你) <!DOCTYPE html> ...
echarts Map(地图) 不同区块显示
<template><div class="map" id="s-map"><div id="chartMap" ...
echarts map(地图) 省份名称居中显示
修改echarts中的china.js文件中省份经纬度,使省份名称居中显示. 亲测可用,更新于2020-12-10 china.js 点击下载修改前,省份名称并不居中显示: 修改后: 具体修改方法( ...
echarts map地图geojson/json格式的简单使用
** echarts地图简单使用方法 (geojson格式/json格式) ** 首先贴两个非常有用的地图网站地图下载网站:http://datav.aliyun.com/tools/atlas/# ...
类型缩放Google map 地图类型
上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下类型缩放舆图类型基本舆图类型 45° 图像启用和停用 45° 图像旋转 45° 图像修改舆图类型注册表样 ...
echarts map 地图做出立体效果 | 简单的解
正文先利用geo做出来十层阴影 ps:注意我的 map 是 "HK" let geoList = []for (let index = 0; index < 10; ind ...
ECharts系列 - 地图实例一
ECharts主页: http://echarts.baidu.com/index.html ECharts-2.1.8下载地址: http://echarts.baidu.com/build/e ...
echaer 地图_echarts Map(地图) 不同颜色区块显示
echarts Map(地图) 不同区块显示这里以重庆地图为例配置项: var option = { title : { text: '重庆市', subtext: '', x:'left' }, ...
Echarts动态加载地图数据(Dynamic load Echarts map data)
本篇就是Echarts制作地图终篇啦,前面我们已经制作好自定义区域的地图,如何结合'数据'让地图根据我们的业务逻辑变得有"活力",这才是最重要的.Echarts官网中给的demo大 ...

Echarts Map地图类型使用

Echarts Map地图类型使用相关推荐

最新文章

热门文章