深湛高铁线路（echarts）
生活随笔
收集整理的這篇文章主要介紹了
深湛高铁线路（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）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： es文件浏览器鸿蒙,ES文件浏览器鸿蒙版
- 下一篇： 得华人者得天下 诺基亚东山再起扎根中国