深湛高铁线路（echarts）

2019独角兽企业重金招聘Python工程师标准>>>

完整代码。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>深湛高铁线路</title><script src="echarts.js"></script><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head><body><div id="main" style="width:100%;height:100%"></div><script type="text/javascript">function area(name, color) {var a = {name: name,selected: true,itemStyle: {emphasis: {areaColor: color,borderColor: '#f47920',borderWidth: 1}}};return a;
}
var geodata = [{name: '广州市',value: [113.43, 23.26]
}, {name: '佛山市',value: [112.98, 23.01]
}, {name: '东莞市',value: [113.85, 23.01]
}, {name: '中山市',value: [113.38, 22.52]
}, {name: '江门市',value: [112.70, 22.31]
}, {name: '阳江市',value: [111.90, 21.95]
}, {name: '茂名市',value: [110.99, 21.68]
}, {name: '湛江市',value: [110.24, 21.25]
}, ];
var geodata1 = [{name: '深圳市',value: [114.07, 22.62]
}];$.get('guangdong.json', function(gdJson) {echarts.registerMap('广东', gdJson);option = {backgroundColor: '#4f5555',title: {text: '深湛高铁线路',subtext: '数据来源百科',sublink: 'https://baike.baidu.com/item/%E6%B7%B1%E8%8C%82%E9%93%81%E8%B7%AF/14764609?fromtitle=%E6%B7%B1%E8%8C%82%E9%AB%98%E9%80%9F%E9%93%81%E8%B7%AF&fromid=2671159',textStyle: {color: '#7bbfea'}},geo: {map: '广东',label: {emphasis: {show: false}},roam: true,zlevel: 1,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077'},emphasis: {areaColor: '#031525'}},regions: [area('深圳市', '#694d9f'),area('东莞市', '#45224a'),area('佛山市', '#45224a'),area('广州市', '#45224a'),area('中山市', '#45224a'),area('江门市', '#45224a'),area('阳江市', '#45224a'),area('茂名市', '#45224a'),area('湛江市', '#45224a'),]},series: [{type: 'lines',coordinateSystem: 'geo',//polyline:true,symbol: ['none', 'triangle'],zlevel: 2,effect: {show: true,symbol: 'roundRect',period: 2,delay: 100,trailLength: 0.6,symbolSize: 6,},lineStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#ed1941'}, {offset: 1,color: '#ffce7b'}],globalCoord: false},width: 1,opacity: 0.8,//type: 'dotted',curveness: 0.2,}},data: [{coords: [ //sz-东莞[114.07, 22.62],[113.85, 23.01],]}, {coords: [ //dg-广州[113.85, 23.01],[113.43, 23.26],]}, {coords: [ //sz-中山[114.07, 22.62],[113.38, 22.52],]}, {coords: [ //gz-佛山[113.43, 23.26],[112.98, 23.01],]}, {coords: [ //fs-江门[112.98, 23.01],[112.70, 22.31],]}, {coords: [ //zs-江门[113.38, 22.52],[112.70, 22.31],]}, {coords: [ //jm-阳江[112.70, 22.31],[111.90, 21.95],]}, {coords: [ //yj-茂名[111.90, 21.95],[110.99, 21.68],]}, {coords: [ //mm-湛江[110.99, 21.68],[110.24, 21.25],]}]}, {type: 'lines',coordinateSystem: 'geo',//polyline:true,symbol: ['none', 'triangle'],zlevel: 2,effect: {show: true,symbol: 'roundRect',period: 1.5,delay: 100,trailLength: 0.6,symbolSize: 6,},lineStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#ed1941'}, {offset: 1,color: '#ffce7b'}],globalCoord: false},width: 1,opacity: 0.8,//type: 'dotted',curveness: 0.2,}},data: [{coords: [ //jm-阳江[112.70, 22.31],[111.90, 21.95],]}, {coords: [ //yj-茂名[111.90, 21.95],[110.99, 21.68],]}, {coords: [ //mm-湛江[110.99, 21.68],[110.24, 21.25],]}]}, {name: '到江门',type: 'lines',coordinateSystem: 'geo',//polyline:true,symbol: ['none', 'triangle'],zlevel: 2,effect: {show: true,symbol: 'roundRect',period: 1.5,delay: 100,trailLength: 0.6,symbolSize: 6,},lineStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#ed1941'}, {offset: 1,color: '#cbb0e3'}],globalCoord: false},width: 1,opacity: 0.8,//type: 'dotted',curveness: 0.2,}},data: [{coords: [ //阳江-江门[111.90, 21.95],[112.70, 22.31],]}, {coords: [ //茂名-阳江[110.99, 21.68],[111.90, 21.95],]}, {coords: [ //湛江-茂名[110.24, 21.25],[110.99, 21.68],]}]}, {name: '到深圳',type: 'lines',coordinateSystem: 'geo',//polyline:true,symbol: ['none', 'triangle'],zlevel: 2,effect: {show: true,symbol: 'roundRect',period: 2,delay: 100,trailLength: 0.6,symbolSize: 6,},lineStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#ed1941'}, {offset: 1,color: '#cbb0e3'}],globalCoord: false},width: 1,opacity: 0.8,//type: 'dotted',curveness: 0.2,}},data: [{coords: [ //东莞-深圳[113.85, 23.01],[114.07, 22.62],]}, {coords: [ //广州-东莞[113.43, 23.26],[113.85, 23.01],]}, {coords: [ //中山-深圳[113.38, 22.52],[114.07, 22.62],]}, {coords: [ //佛山-广州[112.98, 23.01],[113.43, 23.26],]}, {coords: [ //江门-佛山[112.70, 22.31],[112.98, 23.01],]},{coords: [ //江门-中山[112.70, 22.31],[113.38, 22.52],]}, {coords: [ //阳江-江门[111.90, 21.95],[112.70, 22.31],]}, {coords: [ //茂名-阳江[110.99, 21.68],[111.90, 21.95],]}, {coords: [ //湛江-茂名[110.24, 21.25],[110.99, 21.68],]}]}, {type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',zlevel: 3,symbol: 'circle',symbolSize: 5,rippleEffect: {brushType: 'stroke',period: 5,scale: 7},label: {normal: {formatter: '{b}',position: 'right',offset: [1, 6],show: true,textStyle: {color: "yellow"}}},itemStyle: {normal: {show: true,color: 'yellow'}},data: geodata}, {type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',zlevel: 3,symbol: 'circle',symbolSize: 7,rippleEffect: {brushType: 'stroke',period: 2,scale: 10},label: {normal: {formatter: '{b}',position: 'right',//offset: [1, -3],show: true,textStyle: {color: "yellow"}}},itemStyle: {normal: {show: true,color: 'yellow'}},data: geodata1},{name: '中转',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin',symbolSize: 20,symbolOffset: [0, -10],//symbolRotate:30,label: {normal: {show: true,//rotate: 30,position: 'top',//distance: 3,backgroundColor: 'rgb(224,255,255)',borderColor: '#aaa',fontWeight: 100,borderWidth: 1,borderRadius: 4,formatter: ['{a|中转}'].join('\n'),rich: {a: {align: 'center',color: '#00E5EE',fontSize: 10,textShadowBlur: 1,//textShadowColor: '#7A67EE',textBorderColor: '#E8E8E8',textBorderWidth: 1},}},emphasis: {show: true,//rotate: 30,backgroundColor: 'rgb(224,255,255)',borderColor: '#aaa',fontWeight: 200,borderWidth: 1,borderRadius: 4,formatter: ['{a|中转站}'].join('\n'),rich: {a: {align: 'center',color: '#00CED1',fontSize: 20,textShadowBlur: 1,//textShadowColor: '#7A67EE',textBorderColor: '#E8E8E8',textBorderWidth: 1}}}},zlevel: 5,itemStyle: {normal: {//color: '#f58f98',color: '#EE00EE',borderWidth: 1,borderColor: '#EE00EE'}},data: [{name: '江门市',value: [112.70, 22.31]}]}]};var myChart = echarts.init(document.getElementById('main'));myChart.setOption(option);
});</script>
</body></html>

如图，

转载于:https://my.oschina.net/oisanblog/blog/1580474

深湛高铁线路（echarts）相关推荐

广东省深湛高铁线路vue（echarts）实现
先上效果图哈: 这里引入guangdong.js 的方法其实可以直接从依赖包里面获取. import guangdong from "echarts/map/js/province/guan ...
mysql增加列并增加comment_运城多条高铁线路调整动车列数增加到99列
点击上方蓝色字,免费关注,看更多精彩资讯爆料合作,请添加小编微信2251252587 7月10日起,我市多条高铁线路调整 1111111111111111111 111111111111111111 ...
2003-2021年高铁线路信息数据
2003-2021年高铁线路信息数据 1.时间:2003-2021年 2.指标: 高铁线路名称.起点名.终点名.开通时间.线路长度(km).设计速度(km/h).沿途主要车站 3.指标说明: 高铁一般 ...
全国高铁线路及站点shp数据（2020年）
名称:全国高铁线路及站点shp数据(2020年) 区域范围:全国时间范围:2020 语言:中文格式:.shp 该数据为2020年的全国范围的高铁线路和站点数据,格式为shp格式,坐标为wgs198 ...
5对“80、90后”夫妻列车长共同奋战广深港高铁首个春运
(新春走基层)5对"80.90后"夫妻列车长共同奋战广深港高铁首个春运中新网广州1月26日电题:5对"80.90后"夫妻列车长共同奋战广深港高铁首个春运作 ...
高性能超融合服务器,深信服高性能单路服务器aServer-R-1600超融合一体机
深信服高性能单路服务器aServer-R-1600超融合一体机,CPU性能强,而且价格也便宜,替换3-5台服务器的场景非常合适基础套餐 2节点软件授权包(aSv+aSan);含1年软件升级服务: 2 ...
广西沿海高铁线上的守隧人与大山为伴守护铁路安全
中新网南宁1月16日电题:广西沿海高铁线上的守隧人与大山为伴守护铁路安全作者翟李强黄军华距离2019年春节还有不到20天,许多人开始收拾行李迫切地往家赶,广西北海铁路公安处五象南站派出所民 ...
广深港高铁全线首迎春运日均运客24.3万人次
中新社广州1月23日电 (郭军郭宇轩)今年是广深港高铁全线开通后的首个春运.记者23日从中国铁路广州局集团有限公司了解到,春运已启动三天,搭乘高铁往来香港与内地间的旅客人数剧增.截至23日,广深港高 ...
深改革·高赋能·强贡献——高职高专校长联席会议今日在渝召开！
深改革·高赋能·强贡献--全国高职高专校长联席会议2019年年会于11月22日在重庆隆重开幕.重庆城市管理职业学院党委书记任波.重庆市副市长屈谦致开幕词,教育部职成司副司长谢俐讲话.教育部和重庆市教委 ...

深湛高铁线路（echarts）

深湛高铁线路（echarts）相关推荐

最新文章

热门文章