呱呱工具箱
318川藏线路过哪些城市
首页
娱乐
便民
开发
游戏
建站
<div id="map" style="width: 100%;height:calc(100vh - 20px);"></div> <script src="js/jquery-1.9.0.min.js"></script> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <script> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('map')); var mapName = 'china' var data = [] var toolTipData = []; /*获取地图数据*/ myChart.showLoading(); var mapFeatures = echarts.getMap(mapName).geoJson.features; myChart.hideLoading(); var geoCoordMap = { '上海': [121.48054 , 31.23593], '苏州': [120.59241 , 31.30356], '湖州': [120.09452 , 30.89896], '宣城': [118.76554 , 30.94660], '芜湖': [118.43943 , 31.35854], '池州': [117.50208 , 30.68054], '安庆': [117.12128 , 30.53922], '黄冈': [114.87849 , 30.45936], '武汉': [114.31159 , 30.59847], '荆州': [112.19642 , 30.35899 ], '宜昌': [111.29255 , 30.69745], '恩施': [109.48655 , 30.30104], '重庆': [106.55844 , 29.56900], '达州': [107.47459 , 31.21431], '广安': [106.64853 , 30.47977], '南充': [106.11750 , 30.84378], '遂宁': [105.59942 , 30.53910], '资阳': [104.63444 , 30.13496], '成都': [104.07274 , 30.57899], '雅安': [103.04954 , 30.01679], '甘孜': [99.99921 , 31.62896], '昌都': [97.17733 , 31.14866], '林芝': [94.36805 , 29.65404], '拉萨': [91.17846 , 29.65949], '日喀则': [88.89370 , 29.27566] }; var GMDData = [ [{name: ''}, {name: '上海',value: 100}], [{name: '上海'}, {name: '苏州',value: 80}], [{name: '苏州'}, {name: '湖州',value: 80}], [{name: '湖州'}, {name: '宣城',value: 80}], [{name: '宣城'}, {name: '芜湖',value: 80}], [{name: '芜湖'}, {name: '池州',value: 80}], [{name: '池州'}, {name: '安庆',value: 80}], [{name: '安庆'}, {name: '黄冈',value: 80}], [{name: '黄冈'}, {name: '武汉',value: 80}], [{name: '武汉'}, {name: '荆州',value: 80}], [{name: '荆州'}, {name: '宜昌',value: 80}], [{name: '宜昌'}, {name: '恩施',value: 80}], [{name: '恩施'}, {name: '重庆',value: 80}], [{name: '重庆'}, {name: '达州',value: 80}], [{name: '达州'}, {name: '广安',value: 80}], [{name: '广安'}, {name: '南充',value: 80}], [{name: '南充'}, {name: '遂宁',value: 80}], [{name: '遂宁'}, {name: '资阳',value: 80}], [{name: '资阳'}, {name: '成都',value: 80}], [{name: '成都'}, {name: '雅安',value: 80}], [{name: '雅安'}, {name: '甘孜',value: 80}], [{name: '甘孜'}, {name: '昌都',value: 80}], [{name: '昌都'}, {name: '林芝',value: 80}], [{name: '林芝'}, {name: '拉萨',value: 80}], [{name: '拉萨'}, {name: '日喀则',value: 100}], ]; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem[0].name]; var toCoord = geoCoordMap[dataItem[1].name]; if (fromCoord && toCoord) { res.push({ fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord] }); } } return res; }; var color = ['#3ed4ff']; var series = []; [ ['318', GMDData] ].forEach(function (item, i) { series.push({ name: item[0], type: 'lines', zlevel: 2, symbol: ['none', 'arrow'], symbolSize: 10, effect: { show: true, period: 6, trailLength: 0, symbol: 'arrow', symbolSize: 5 }, lineStyle: { normal: { color: color[i], width: 1, opacity: 0.6, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0], type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: function (val) { return val[2] / 8; }, itemStyle: { normal: { color: color[i] } }, data: item[1].map(function (dataItem) { console.log('dataItem',dataItem) return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) }); }); var option = { title: { show: true, x: "center", y: "15", text: "318川藏线路图", textStyle: { color: "#fff", fontSize: 22, fontWeight: 'normal' } }, geo: { map: 'china', label: { normal: { //静态的时候展示样式 show: false, //是否显示地图份得名称 textStyle: { color: "#fff", fontSize: 12 } }, emphasis: { //动态展示的样式 color: '#fff', }, }, zoom: 2.2, roam: true, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(175,238,238, 0)' }, { offset: 1, color: 'rgba(47,79,79, .1)' }], globalCoord: false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } }, itemStyle: { normal: { areaColor: 'rgba(58, 127, 213, .2)', borderColor: '#0a53e9', //线 shadowColor: '#092f8f', //外发光 shadowBlur: 50 }, emphasis: { color: 'rgba(58, 127, 213, 1)' //悬浮背景 } }, }, series: series }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); </script>
点击运行
还原