首先，需要在
Vue 项目
中引入
ECharts 和高德地图的相关库。可以使用 cdn 引入，也可以使用 npm 安装后引入。
然后，在
Vue 组件中使用
ECharts 实例来创建迁徙图。以下是一个简单的示例：
```
vue
<template>
<div id="main" style="height: 600px;"></div>
</template>
<script>
import
echarts from '
echarts'
import '
echarts-gl'
import '
echarts/map/js/china'
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
mounted() {
AMapLoader.load({
key: 'your amap key',
version: '2.0',
plugins: ['AMap.ToolBar']
}).then(() => {
const chart =
echarts.init(document.getElementById('main'))
chart.
setOption({
tooltip: {},
geo: {
map: 'china',
roam: true,
zoom: 1.2,
itemStyle: {
areaColor: '#fff',
borderColor: '#666'
}
},
series: [
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
color: '#a6c84c',
width: 0,
curveness: 0.2
},
data: [
{
fromName: '北京',
toName: '上海',
coords: [
[116.46, 39.92],
[121.48, 31.22]
]
},
{
fromName: '北京',
toName: '广州',
coords: [
[116.46, 39.92],
[113.23, 23.16]
]
}
]
},
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
show: true,
position: 'right',
formatter: '{b}'
},
symbolSize: 5,
itemStyle: {
color: '#a6c84c'
},
data: [
{
name: '北京',
value: [116.46, 39.92]
},
{
name: '上海',
value: [121.48, 31.22]
},
{
name: '广州',
value: [113.23, 23.16]
}
]
}
]
})
})
}
}
</script>
```
其
中，`AMapLoader` 是高德地图 JavaScript API Loader 的封装库，用于异步加载高德地图的相关资源。需要在 `mounted` 钩子函数
中使用 `AMapLoader.load`
方法加载高德地图，并在回调函数
中创建
ECharts 实例和设置迁徙图的配置项。
具体的配置项可以根据需要进行调整，例如：
- `geo` 配置项用于设置地理坐标系
组件，其
中 `roam` 参数设置为 `true` 表示开启地图的缩放和拖拽功能，`zoom` 参数设置为 `1.2` 表示地图的初始缩放级别。
- `series`
中的第一个系列是 `lines`，用于绘制迁徙流线，其
中 `data` 数组
中每个元素表示一条迁徙线路，包括起点、终点和经过的坐标点。
- `series`
中的第二个系列是 `scatter`，用于绘制城市的散点图，其
中 `data` 数组
中每个元素表示一个城市的坐标点。
需要注意的是，由于
ECharts 组件默认使用 Canvas
渲染，而高德地图使用的是 SVG
渲染，因此在使用
ECharts 绘制迁徙图时，需要将
ECharts 中的
渲染引擎改为 WebGL 或者
ECharts GL。
本文记录了在Vue项目中使用echarts遇到的组件复用导致的绘图错乱问题。通过分析，发现由于div id重复导致echarts实例化错误。解决方案是为每个tab使用独立的div，并结合v-if进行正确渲染。此外，还提到了v-show在控制echarts绘图时的局限性，推荐使用v-if确保图形正确显示。
最低0.47元/天 解锁文章
5693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
