效果图
数据格式转换
var convertData1 = function(data,index) {
console.log('daft',data)
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoordCar = data[i];
if (geoCoordCar) {
res.push({
name: geoCoordCar.pnum,
value: [geoCoordCar.lon,geoCoordCar.lat],
});
}
}
console.log('resgeoCoordCar11',res)
return res;
};
页面渲染
效果可参考echarts 在线链接:https://gallery.echartsjs.com/editor.html?c=xnmZ5X4gCz
drawMap() {
var convertData = function(data, index) {
var res = [];
for (var i = 0; i < index.length; i++) {
var geoCoord = data[index[i]];
if (geoCoord) {
res.push({
name: index[i],
value: geoCoord.concat(index[i])
});
}
}
return res;
};
var convertData1 = function(data,index) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoordCar = data[i];
if (geoCoordCar) {
res.push({
carId: geoCoordCar.carid,
name: geoCoordCar.pnum,
value: [geoCoordCar.lon,geoCoordCar.lat],
});
}
}
return res;
};
let chart = document.getElementById("myChart");
let myChart = null;
if ($echarts.getInstanceByDom(chart)) {
myChart = $echarts.getInstanceByDom(chart);
} else {
myChart = $echarts.init(chart);
}
var hStep = 300 / (data.length - 1);
var busLines = [].concat.apply(
[],
data.map(function(busLine, idx) {
var prevPt;
var points = [];
for (var i = 0; i < busLine.length; i += 2) {
var pt = [busLine[i], busLine[i + 1]];
if (i > 0) {
pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
}
prevPt = pt;
points.push([pt[0] / 1e4, pt[1] / 1e4]);
}
return {
coords: points,
lineStyle: {
normal: {
color: $echarts.color.modifyHSL(
"#5A94DF",
Math.round(hStep * idx)
)
}
}
};
})
);
let option;
if (this.echarts.indexOf(document.getElementById("myChart")) == -1) {
this.echarts.push(document.getElementById("myChart"));
}
myChart.setOption(
(option = {
bmap: {
center: [116.46, 39.92],
zoom: 12,
roam: true,
mapStyle: {
styleJson: [], //隐藏地图上的poi
style: "midnight" //设置地图风格为高端黑
}
},
geo: {
map: "china",
itemStyle: {
normal: {
areaColor: "#323c48",
borderColor: "#111"
},
emphasis: {
areaColor: "#2a333d"
}
}
},
series: [
{
name: "已投运",
type: "scatter",
coordinateSystem: "bmap",
data: convertData(this.newData3, this.ids3),
symbol: "circle",
symbolSize: 20,
symbolOffset: ["-20px", "20px"],
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#F5A623"
},
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
}
},
{
name: "规划中",
type: "scatter",
coordinateSystem: "bmap",
data: convertData(this.newData1, this.ids1),
symbol: "circle",
symbolSize: 20,
symbolOffset: ["10px", "-15px"],
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#E3DDC7 "
},
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
}
},
{
name: "建设中",
type: "scatter",
coordinateSystem: "bmap",
data: convertData(this.newData2, this.ids2),
symbol: "circle",
symbolSize: 20,
symbolOffset: ["-20px", "-10px"],
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "#50E3C2 "
},
emphasis: {
borderColor: "#fff",
borderWidth: 1
}
}
},
{
name: 'carInfo',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData1(this.trajectoryList),
symbol:'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
symbolSize:[20,20],
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
position: [10, 10],
formatter: '{b}',
position: 'right',
show: true
}
},
zlevel: 8
},
]
})
);
let that = this;
myChart.on("click", function(params) {
if(params.seriesName == 'carInfo'){
let caridPara = {
carId: params.data.carId
};
that.sigleCarInfo(caridPara);
}else{
let data = {
chargingStationId: params.data.name
};
that.chargingstationnDetails(data);
}
});
},