依赖下载

首先要在Vue项目中结合vue-baidu-map和ECharts绘制行驶路线，需要先安装并导入相关的库

npm install vue-baidu-map echarts --save

注册引入

Echarts引入详情 官网查看

import * as echarts from 'echarts';// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]
});

vue-baidu-map引入详情 官网查看
在vue.config.js文件中

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: 'YOUR_APP_KEY'
})

到这里我们的准备工作就完成了下面开始上代码

核心代码

<template><baidu-map class="map" @ready="handler"><div class="echarts" :style="{width: '100%', height: '100%'}"><div ref="chart" :style="{width: '100%', height: '100%'}"></div></div></baidu-map>
</template><script>
import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
import * as echarts from 'echarts'export default {components: {BaiduMap},data() {return {chartInstance: null,map: null}},methods: {handler({ BMap, map }) {this.map = mapthis.initChart()// 假设你已经有了行驶路线的数据const drivingPath = [] //经纬度点数组this.drawDrivingPath(drivingPath)},initChart() {this.chartInstance = echarts.init(this.$refs.chart)const option = {// ECharts 配置项}this.chartInstance.setOption(option)},drawDrivingPath(path) {if (this.chartInstance) {const series = {type: 'lines',coordinateSystem: 'BD_09', // 使用百度地图坐标系data: path.map(point => [point.lng, point.lat])// 其他配置项}this.chartInstance.setOption({ series: [series] })}}}
}
</script><style>
.map {width: 100%;height: 80%;
}
.echarts {position: relative;width: 100%;height: 100%;
}
</style>

在上述代码中，我们在模板中引入了baidu-map组件，并在其上添加了一个用于ECharts的div容器。在handler方法中，我们获取了百度地图实例，并初始化了ECharts实例。然后，我们假设有行驶路线的数据，通过drawDrivingPath方法将路线绘制在地图上。
请注意，如果你已经有了行驶路线的数据和const series = {...}中的注释部分，你需要替换路线数据和ECharts的配置项。