遷徙圖Demo,echarts+json實現 地圖資料軌跡(根據value設定軌跡顏色02)
阿新 • • 發佈:2021-07-29
<!DOCTYPE html> <html> <head> <title>openlayers6結合echarts4實現遷徙圖</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script> <!-- 引入變數shijie --> <script src="./datamap.js"></script> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initData() { var data = [ { "name": "拉薩市", "value": ["91.140860000", "29.645571000", 15], "xzqh": "5401", "zxcs": "y" }, { "name": "昌都市", "value": ["97.175897000", "31.143480000", 50], "xzqh": "5421", "zxcs": "n" }, { "name": "山南市", "value": ["91.771023000", "29.185499000", 60], "xzqh": "5422", "zxcs": "n" }, { "name": "日喀則市", "value": ["88.719257000", "29.184578000", 80], "xzqh": "5423", "zxcs": "n" }, { "name": "那曲市", "value": ["92.345548000", "31.720672000", 40], "xzqh": "5424", "zxcs": "n" }, { "name": "阿里地區", "value": ["80.044934000", "32.377686000", 30], "xzqh": "5425", "zxcs": "n" }, { "name": "林芝市", "value": ["94.366439000", "29.664846000", 10], "xzqh": "5426", "zxcs": "n" } ] initEcharts(data); } function initEcharts(convertData) { convertData.forEach((ele) => { ele.value[2] = ele.value[2] }) // 標記點 var geoCoordMap = { 拉薩市: ['91.140860000', '29.645571000'], 日喀則市: ['88.719257000', '29.184578000'], 昌都市: ['97.175897000', '31.143480000'], 林芝市: ['94.366439000', '29.664846000'], 山南市: ['91.771023000', '29.185499000'], 那曲市: ['92.345548000', '31.720672000'], 阿里地區: ['80.044934000', '32.377686000'] } // 給value一個隨機值 var mapData = convertData.map((val) => { return { name: val.name, value: val.value[2] } }) var color1 = ['#f0ffec', '#d2ffc3', '#a6f28e', '#258c30', '#61b8ff', '#0000e1', '#fa00fa', '#be011e', '#880015'] // 設定目標點, 配置線條指向 function convertToLineData(data) { var res = [] for (var i = 0; i < data.length; i++) { // 起點 var fromCoord = geoCoordMap[data[i].name] // 終點, var toCoord = ['91.140860000', '29.645571000'] res.push([ { coord: fromCoord, value: data[i].value }, { coord: toCoord } ]) } return res } var myChart = echarts.init(document.getElementById('map')) // 註冊地圖,傳入資料 echarts.registerMap('lasa', shijie) var optionMap = { timeline: { show: false }, baseOption: { // 設定地圖引數和樣式 geo: { show: true, map: 'lasa', roam: true, zoom: 0, // 地圖中心點, 可調節顯示的偏移量 center: ['90.140860000', '30.645571000'], label: { // 高亮文字隱藏 emphasis: { show: false } }, silent: true, itemStyle: { normal: { borderColor: '#08ACF0', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0,// 0% 處的顏色 color: 'rgba(0, 0, 0, 0)' }, { offset: 1, // 100% 處的顏色 color: 'rgba(0, 0, 0, .3)' } ] }, shadowColor: 'rgba(0, 0, 0, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 } } } }, options: [{ grid: { right: 50 }, xAxis: { show: false }, yAxis: { show: false }, tooltip: { trigger: 'item', formatter: function(params) { if (params.seriesType === 'effectScatter') { return params.name + '線上率' + params.data.value[2] + '%' } } }, visualMap: { type: 'continuous', calculable: false, show: true, min: 0, max: 100, color: color1, textStyle: { color: '#005' }, text: ['100', '0'], pieces: [ { min: 0, max: 25 }, { min: 25, max: 50 }, { min: 50, max: 55 }, { min: 55, max: 60 }, { min: 60, max: 65 }, { min: 65, max: 70 }, { min: 70, max: 75 }, { min: 75, max: 80 }, { min: 80, max: 100 } ], left: 50 // top: 0, // right: 0, // bottom: 10, // itemWidth: 10 }, series: [ { // 座標點引數和樣式 type: 'effectScatter', coordinateSystem: 'geo', data: convertData, // symbolSize: function(val) { // return val[2] / 4 // }, symbolSize: 15, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { // color: '#FF4500', // shadowBlur: 10, // shadowColor: '#FF4500' } } }, { // 線條引數和樣式 type: 'lines', // 變化頻率 zlevel: 2, effect: { show: true, // 箭頭指向速度,值越小速度越快 period: 4, // 特效尾跡長度,取值0到1,值越大,尾跡越長 0為沒有尾跡特效 trailLength: 0.05, symbol: 'arrow', // 圖示大小 symbolSize: 10 }, label: { emphasis: { show: false } }, lineStyle: { normal: { // 尾跡線條寬度 width: 1, // 尾跡線條透明度 opacity: 1, // 尾跡線條曲直度 0為直線 curveness: 0.2 } }, data: convertToLineData(mapData) } ] } ] } myChart.setOption(optionMap) } initData(); </script> </body> </html>
效果圖:
datamap.js內容:(即變數shijie定義)
https://yun.baidu.com/s/4moGB7gG(原始檔分享)
變數shijie: