vue cli3.0与echarts3.0和地图结合使用的示例

前言

Echarts提供直观、交互式和高度个性化的可视化数据图表。而vue更适合操作数据。

最近一直忙着搬家，所以没有更新博客。今天，我抽出时间写了一篇关于vue和echarts的博客。下面是一个结合地图的小型echarts演示。我在使用npm的时候比较了echart和vue-echart的依赖，最终决定使用echart依赖包，因为它更接近原生，使用现实更小。如果你对vue的生命周期有更好的理解，它会更容易操作。

让我们来谈谈制作这样一个电子海图。话不多说，我们来看看详细的介绍

基本的电子海图制作

1.首先，将echarts引入vue项目并进行全球配置

NPM install echart-save在main.js中引入，并挂在vue的原型上

从“echart”导入echart；Vue.prototype. $ echarts=echarts2.创建一个用于加载电子海图的框

Div id='chart1'/div差不多是这样的，只是设置一个id。

3.根据需要引入所需的电子技术组件

4.在数据中配置电子零件的配置项目和数据

5.在挂载的生命周期中初始化echart图表，在相应的方法中获取echart节点并渲染。

首先调用挂载的初始化函数

this . draw line()；然后获取echarts节点

this.chart1=this。$ echart . init(document . getelementbyid(' chart 1 '))；this . chart 1 . SetOption(this . items 2)；6.当屏幕尺寸改变时，我们重新渲染图表

这个步骤很简单，只需要调用resize方法

window . onresize=()={ this . chart 1 . resize()；};就这样，我们完成了这样一个简单的图表。如果你想制作一个更酷的图表，请研究电子艺术文档。接下来，我们将看到如何使用echarts的地图功能

二、电子海图的使用

1.echarts地图功能并不复杂，只需要引入对应省市国家的map js库即可。

然后介绍你想用它的地方

导入' echart/map/js/省份/Beijing . js '；2.配置地图配置项目

3.修改地图默认数据

这样配置之后，会出现一些问题，地图的一些名称会出现显示问题，就像这样

文本显示的位置不令人满意。让我们调整文本显示的位置。打开地图js文件，修改经纬度，就知道满意了。

这样我们就可以操作我们的地图了，不是很简单吗？喜欢就关注吧。我会定期更新一些小文章

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。