echarts 地图飞线实例
效果图
demo实例:
<template> <div ref="main" style="width: 1920px; height: 1080px; border: 1px solid #ddd"></div> </template> <script> import * as echarts from 'echarts' import china from '@/assets/china.json' export default { data() { return {} }, mounted() { this.init() }, methods: { init() { var mapChart = this.$echarts.init(this.$refs.main) //这里注释掉的2个是通过遍历geojson文件中的所有点位绘制成飞线，一般实际应用中不会这样用 // const coord = china.features.map(val => { // // debugger // return { // name:val.properties.name, // value:val.properties.cp // } // }) // coord.forEach((v,index)=> { // debugger // index > 0 && lines_coord.push({ // coords:[v.value,coord[0].value] // }) // }) //所有点位的集合 const coord =[ /* *写法一：数组中的元素是以对象的形式，主要用到的其实也就关于点位的经纬度数组，就是下面的value，对象中可以其他key， *比如name等,这个就提示框tooltip的展示可能需要，如果不需要的话可以直接以写法二的方式就好了 */ // { name: '台湾', value: [121.509062, 25.044332]}, // { name: '山西', value: [112.549248, 37.857014]}, // {name:'河北', value: [114.502461, 38.045474]} /* *写法二：数组中的元素直接以点位的经纬度数组形式 */ //零、一角标的为终点，后面的为起点 [121.509062, 25.044332], [101.509062, 25.044332], [112.549248, 37.857014], [114.502461, 38.045474], [102.549248, 37.857014], [124.502461, 42.045474] ] //所有飞线起点终点的集合 const lines_coord = [ /* * 写法一：标准写法对象：key:coords value:经纬度的数组 */ {coords:[[112.549248, 37.857014],[121.509062, 25.044332]]}, {coords:[[114.502461, 38.045474],[121.509062, 25.044332]]}, {coords:[[102.549248, 37.857014],[101.509062, 25.044332]]}, {coords:[[124.502461, 42.045474],[101.509062, 25.044332]]}, /* * 写法二：数组形式，默认该点位的数组为key:coords 的值 */ // [[112.549248, 37.857014],[121.509062, 25.044332]], // [[114.502461, 38.045474], [121.509062, 25.044332]] ]; var planePath = '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' mapChart.setOption({ geo:{ name:'地图', // type: 'map', //地图种类、 map: 'china', //地图类型。 zlevel: 0, show:true, layoutCenter: ['50%', '50%'], roam: false, layoutSize: "90%", zoom: 1, label: { normal: { show: true, textStyle:{ fontSize:14, // 文字顔色 color: '#43D0D6' } } }, itemStyle: { //地图区域的多边形 图形样式。 emphasis:{ //高亮状态下的样试 label:{ show:true, }, areaColor: '#FFB800', }, normal: { areaColor: '#1b579c', borderWidth: 1,//设置外层边框 borderColor:'#1ECEF4', } }, }, series: [ { // effectScatter画散点【起点】 type:'effectScatter', coordinateSystem: 'geo', zlevel: 2, symbolSize:6, rippleEffect: { period: 3, brushType: 'stroke', scale: 3 }, itemStyle:{ color:'#FFB800', opacity:0.7 }, data:coord.slice(2) }, { // 画中心散点【终点】,这里是为了区分起点终点不同样式，所以分开写，如果二者样式一样那就直接合在一起写就好了 type:'effectScatter', coordinateSystem: 'geo', zlevel: 2, symbolSize:10, rippleEffect: { period: 4, brushType: 'stroke', scale: 4 }, itemStyle:{ color:'#FF5722', opacity:1 }, data:coord.slice(0,2) }, //这里设了2条不同效果的飞线是为了讲他们叠加起来，满足飞机后面白色的喷气动画效果 { type: 'lines', zlevel: 1, effect: { show: true, period: 5, trailLength: 0.7, color: '#fff', symbolSize: 3 }, lineStyle: { normal: { color: '#FFB800', width: 0, curveness: 0.2 } }, data: lines_coord }, { // lines画线 type:'lines', coordinateSystem:'geo', zlevel: 2, symbol: ['none', 'arrow'],//设置飞线的起点终点处的绘制图形 symbolSize: 12, effect: { show: true, period: 5, //箭头指向速度，值越小速度越快 trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: planePath, //飞机图标 symbolSize: 15, //图标大小 color:'#01AAED' }, itemStyle: { normal: { borderWidth: 1, lineStyle: { type: 'solid', shadowBlur: 10 } } }, lineStyle: { //飞线的样式 normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'} }, data:lines_coord } ], }) } }, } </script> <style scoped> .test-title { background: #146402; color: #fff; } </style>
