ECharts3.0遷徙圖
阿新 • • 發佈：2018-12-22
<!DOCTYPE html> <html> <head> <title>遷徙圖</title> </head> <body> <div id="container" style="height: 1100px;width: 1400px;"></div> <script src="js/echarts.min.js"></script> <script src="js/ddk.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var geoCoordMap = { '育才小學':[106.487632,29.486692], '跳瞪小學': [106.44258,29.404382], '馬王小學':[106.491697,29.49302], '晉愉綠島':[106.466861,29.485048], '鋼花小學':[106.484382,29.465458], '烏龜石':[106.411681,29.396306], '綠地城':[106.49608,29.418906], '採石場':[106.407561,29.347688], '梅子灣':[106.463351,29.392567] }; var BJData = [ [{name: '育才小學'}, {name: '跳瞪小學',value: 90}], [{name: '育才小學'}, {name: '馬王小學',value: 70}], [{name: '育才小學'}, {name: '晉愉綠島',value:40}], [{name: '育才小學'}, {name: '鋼花小學',value:20}] ]; var SHData = [ [{name: '跳瞪小學'}, {name: '烏龜石',value: 90}], [{name: '跳瞪小學'}, {name: '綠地城',value: 60}], [{name: '跳瞪小學'}, {name: '梅子灣',value:70}], [{name: '跳瞪小學'}, {name: '育才小學',value:40}], [{name: '跳瞪小學'}, {name: '採石場',value:10}] ]; //自定義圖示路徑 var iconPath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem[1].name]; var toCoord = geoCoordMap[dataItem[0].name]; if (fromCoord && toCoord) { res.push({ fromName: dataItem[1].name, toName: dataItem[0].name, numValue: dataItem[1].value, coords: [fromCoord, toCoord] }); } } return res; }; var color = ['#46bee9','gold']; var color1 = ['#ff3333','orange','lime','aqua']; var series = []; [['育才小學', BJData],['跳瞪小學', SHData]].forEach(function(item, i) { series.push({ name: item[1], type: 'lines', zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: '#fff', symbolSize: 4 }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, lineStyle: { normal: { color: function(params){ var num = params.data.numValue; if(num>75){ return color1[0]; }else if(num>50){ return color1[1]; }else if(num>25){ return color1[2]; }else{ return color1[3]; } }, width: 1, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0].name,//這個寫成這樣可以實現**>**的這種效果 type: 'lines', zlevel: 2, effect: { show: true, period: 6, trailLength: 0, symbol: iconPath, symbolSize: 30 }, itemStyle: { normal: { borderWidth: 1, lineStyle: { type: 'solid', shadowBlur: 10 } } }, lineStyle: { normal: { color: function(params){ var num = params.data.numValue; if(num>75){ return color1[0]; }else if(num>50){ return color1[1]; }else if(num>25){ return color1[2]; }else{ return color1[3]; } }, width: 1, opacity: 0.9, 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: function(params){ var str = params.value; var num = str[2]; if(num>75){ return color1[0]; }else if(num>50){ return color1[1]; }else if(num>25){ return color1[2]; }else{ return color1[3]; } } } }, data: item[1].map(function (dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) }); }); option = { backgroundColor: '#404a59', title: { text: '', subtext: '', left: 'center', textStyle: { color: '#fff' } }, tooltip: { trigger: 'item' }, /*dataRange: { min: 0, max: 100, calculable: true, color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'], textStyle: { color: '#fff' } },*/ legend: { orient: 'vertical', top: 'bottom', left: 'right', data: [], textStyle: { color: '#fff' }, selectedMode: 'single' }, geo: { map: 'ddk', label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#404a59' }, emphasis: { areaColor: '#2a333d' } } }, series: series }; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
