vue项目中在openlayers地图上展示echarts图表

思路：

1、创建一个地图组件mapView，使用openlayers进行地图展示
2、创建一个图表组件chart，用于呈现图表
3、创建一个overlay组件，在模板中使用chart组件；利用openlayers的ol.Overlay类来把overlay组件添加到地图上。

示例代码

1、数据

以这次新冠病毒数据为例，这里是今年2月份全国新增新冠肺炎患者的数据（数据源来自百度），分为全国的新增数量和湖北省内的新增数量。

ncovData.js

const ncovData = {
  add: {
    startDate: '2.1',
    endDate: '2.29',
    quanguoTotal: [2590, 2829, 3235, 3887, 3694, 3151, 3399, 2653, 3073, 2484, 2022, 15153, 5093, 2644, 2009, 2051, 1891, 1751, 825, 892, 399, 649, 416, 517, 411, 440, 329, 430, 579],
    hubeiTotal: [1921, 2103, 2345, 3156, 2987, 2447, 2841, 2147, 2618, 2097, 1638, 14840, 4823, 2420, 1843, 1933, 1807, 1693, 775, 631, 366, 630, 398, 499, 401, 409, 318, 423, 570]
  }
}

export default ncovData

2、图表组件

在图表组件中，以折线图的形式来展示数据。
chart.vue

3、overlay组件

overlayChart .vue

这个组件中，我们引入了上面的chart组件，并向其中传递数据。另外，在show方法中，创建了一个ol.Overlay实例，把它添加到map地图对象上。

4、地图组件

mapView.vue

在这个mapview组件中，以vue.extend方式引入了overlayChart组件,然后再在必要的时候，new出一个overlayChart的实例，通过overlayChart的show方法来呈现想要的图表。
这里，当我在地图上任意位置点击时，即弹出图表。

参数传递

从mapView -> overlayChart, 通过在new对象时传入data参数，数据包装在data内，不要再overlayChart中使用props
从overlayChart -> chart，props方式传递。

最终效果