本文主要是介绍echarts写飞机航线类图形,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
var geoCoordMap = {'黑龙江': [127.9688, 45.368],'北京': [116.4551, 40.2539],"陕西": [109.1162, 34.2004],"新疆": [87.9236, 43.5883],"西藏": [91.11, 29.97],"重庆": [108.384366, 30.439702],"贵州": [106.6992, 26.7682],"云南": [102.9199, 25.4663],"广东": [113.12244, 23.009505],'上海': [121.4648, 31.2891],'温江区': [103.9526, 30.7617],};var dataT = [{name: '上海',value: 321 },{name: '广东',value: 123,},{name: '重庆',value: 433,},{name: '北京',value: 111,},{name: '云南',value: 261,},{name: '陕西',value: 123,},{name: '新疆',value: 771,},{name: '西藏',value: 91,},{name: '贵州',value: 230,},{name: '黑龙江',value: 165,}];geoCoordMap['四川'] = [103.9526, 30.7617];var GZData = [];var tempData = ['四川', GZData];dataT.map((item, index) => {var arr = [];arr.push(item)arr.push({name: '四川'})GZData.push(arr)})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],value: dataItem[0].value});}}return res;};var color = ['#00ff78', '#ff971b', '#acff43', '#ff73b7', '#ffff46', '#27bbfe'];var series = [{type: 'map',map: 'china',// width: '100%',zoom: 1.1 //可以显示map最外围的边框轮廓geoIndex: 1,zlevel: 1,// aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: false,},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: false,itemStyle: {normal: {areaColor: 'rgba(128, 128, 128, 0)',borderColor: '#49a7d5', //省市边界线00fcff 516a89},emphasis: {areaColor: 'rgba(128, 128, 128, 0)',}},data: [{name: '南海诸岛',value: 0,itemStyle: {normal: {opacity: 0,label: {show: false}}}}]}, ];series.push({name: tempData[0],type: 'lines',zlevel: 3,symbol: ['none', 'circle'], effect: {show: true,period: 3, //箭头指向速度,值越小速度越快trailLength: 0.01, //特效尾迹长度[0,1]值越大,尾迹越长重symbolSize: 4, //图标大小},lineStyle: {normal: {opacity: 1,curveness: 0.4, //曲线的弯曲程度color: '#609fd4'}},data: convertData(tempData[1])}, {name: tempData[0],type: 'scatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'right',formatter: '{b}',}},symbolSize: function (val) {console.log(val)return val[2]/20+5;},itemStyle: {normal: {// fontSize: 80,}},data: tempData[1].map(function(dataItem) {return {name: dataItem[0].name,value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])};})}, {type: 'effectScatter',coordinateSystem: 'geo',zlevel: 4,symbolSize: 30,label: {normal: {show: true,position: 'right',formatter: '{b}',color: 'white'}},itemStyle: {normal: {color: 'white'}},rippleEffect: {scale: 4,brushType: 'stroke'},data: [{name: tempData[0],value: geoCoordMap[tempData[0]],visualMap: false}],});option = {tooltip: {trigger: 'item',formatter: function(params) {if (params.seriesType == "scatter" && params.name != tempData[0]) {return "<br>" + params.data.name + " ---> " + params.seriesName + "<br />数量1:" + params.data.value[2];} else if (params.seriesType == "lines") {return "<br>" + params.data.fromName + " ---> " + params.data.toName + "<br />数量2:" + params.data.value;} else {return params.name;}}},visualMap: {min: 70,max: 1000,// textStyle: {// color: '#fff',// },show: true,pieces: [{max: 200,label: '未请假',color: '#c23c33'},{min: 200,label: '无异常',color: '#2c9a42'}],color: '#fff',textStyle: {color: '#fff',},},geo: {map: 'china',zoom: 0.98,zlevel: 2,label: {emphasis: {show: false},},roam: false, //是否允许缩放itemStyle: {normal: {areaColor: '#214278',borderColor: '#195BB9', //省市边界线00fcff 516a89},emphasis: {color: '#112246' //悬浮背景}},},series: series};
生成图片如下
这篇关于echarts写飞机航线类图形的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!