echarts实现地图飞线
echarts实现地图飞线
- echarts画地图
echarts画地图
- 由于地图需要省市区经纬度，需要geoJSON数据，我们使用aliyun官方的JSON数据，以中国地图为例（链接: link.）。可以将返回的JSON数据写入到util文件夹下的json文件中。
- 在使用的页面引入该json文件
import china from '../../util/geoJSON/china.json' //根据实际路径引入
eventMap() {
let hotEventMap = this.$echarts.init(this.$refs.hotEventMap)
let that = this
const coord = china.features.map(val => {
return {
name:val.properties.name,
value:val.properties.cp
}
})
const lines_coord = [];
coord.forEach((v,index)=> {
index > 0 && lines_coord.push({
coords:[v.value,coord[0].value]
})
})
this.$echarts.registerMap('henan',china)
hotEventMap.setOption({
// 提示框，鼠标移入
tooltip:{
show:true, //鼠标移入是否触发数据
trigger: 'item', //触发方式,
formatter: function (params) {
let value = 0;
that.eventTc.forEach(item => {
if(item.name == params.name + '市') {
value = item.value
}
})
return params.name
+ "：" + value},
backgroundColor: 'rgba(0,0,0,0.7)',//背景颜色（此时为默认色）
borderRadius: 4,//边框圆角
textStyle: {
color: '#fff'
}
},
//配置地图的数据，并且显示
geo:
{
name:'地图',
// type: 'map', //地图种类、
map: 'china', //地图类型。
zlevel: 10,
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: 15,
symbolSize:6,
rippleEffect: {
period: 3, brushType: 'stroke', scale: 3
},
itemStyle:{
color:'#FFB800',
opacity:0
},
data:coord.slice(1)
},
{
// 画中心散点
type:'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
symbolSize:10,
rippleEffect: {
period: 4, brushType: 'stroke', scale: 4
},
itemStyle:{
color:'#FF5722',
opacity:1
},
data:coord.slice(0,1)
},
{
// lines画线
type:'lines',
coordinateSystem:'geo',
zlevel: 15,
symbolSize:12,
effect: {
show: true,
period: 5, //箭头指向速度，值越小速度越快
trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 8, //图标大小
color:'#01AAED'
},
itemStyle: {
normal: {
borderWidth: 1,
lineStyle: {
type: 'solid',
shadowBlur: 10
}
}
},
lineStyle: {
// normal: {
// type: 'solid',
// width: 1,
// opacity: 1,
// curveness: 0.3,
// color: {
// x: 0.5,
// y: 0.5,
// r: 0.5,
// 渐变色线条
// colorStops: [{
// offset: 0, color: 'red' // 0% 处的颜色
// }, {
// offset: 1, color: 'blue' // 100% 处的颜色
// }],
// global: false // 缺省为 false
// }
// },
normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'}
},
data:lines_coord
}
],
// dataRange: {
// show: true,
// realtime: false,
// // calculable: true,
// x: '5%',
// y: '60%',
// splitList: [
// {start: 800, end:800,label: '> 800', color: '#a40e0e'},
// {start: 600, end: 800, label: '600-800', color: '#c80f0f'},
// {start: 400, end: 600, label: '400-600', color: '#e42e2e'},
// {start: 200, end: 400, label: '200-400', color: '#f79c9c'},
// {start: 0, end: 200, label: '0-200', color: '#fefbf5'}
// ],
// textStyle: {
// color: '#fff', // 值域文字颜色
// text: ['高', '低'],
// },
// selectedMode: true,
// inRange: {
// color: ['#fefbf5', '#f79c9c', '#e42e2e', '#c80f0f', '#a40e0e']
// }
// },
}),
window.addEventListener('resize', () => {
// 自动渲染echarts
hotEventMap.resize();
})
},
- 到此地图飞线就能够实现。但实现的过程中飞线一直出不来，最后发现是飞线与热力图冲突了（V5版本），所以就把热力图注释掉了，如果哪位大佬实现热力图与飞线共存的，请告知，三克油~~~