vue cli3.0 结合echarts3.0和地图的使用方法

echarts 提供了直观，交互丰富，可高度个性化定制的数据可视化图表。而vue更合适操纵数据。

最近一直忙着搬家，就没有更新博客，今天抽出空来写一篇关于vue和echarts的博客。下面是结合地图的一个小的echarts demo，我在使用npm的时候对比了echarts和vue-echarts两个依赖，最后决定使用echarts依赖包，由于它更接近原生，使用现实更小，若是对vue生命周期比较了解，那就更容易操做。下面讲一下作出这样一个echarts图。

一 基础的echarts图表制做

1.首先在vue项目中引入echarts并全局配置

npm install echarts --save

在main.js中引入并挂在到vue的prototype上

import echarts from "echarts"; Vue.prototype.$echarts = echarts;

2.建立一个装载echarts图表的盒子

<div id="chart1"></div>

差很少就是这样，设置一个id便可。

3.按需引入须要的echarts组件

4.在data里面配置好echarts的配置项和数据

5.在mounted生命周期中初始化echarts图表，在对应的方法中获取echarts节点并渲染。

首先在mounted中调用初始化函数

this.drawLine();

而后获取echarts节点

this.chart1 = this.$echarts.init(document.getElementById("chart1")); this.chart1.setOption(this.items2);

6.在屏幕大小发生变化时，咱们从新渲染图表

这一步很简单只需调用resize方法便可

window.onresize = () => { this.chart1.resize(); };

这样一来咱们就完成了这样一个简单的图表，想作出更炫酷的图表请研读echarts文档，接下来咱们看看怎么使用echarts的地图功能

二 echarts地图的使用

1.echarts地图功能也不复杂，只须要引入对应省份国家的地图js库便可

而后在想使用的地方引入

import "echarts/map/js/province/beijing.js";

2.配置地图配置项

3.修改地图默认数据

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

文字显示的位置不太满意，咱们调整一下文字显示的位置。打开地图js文件，修改经纬度，知道本身满意。

 

这样就能够操做咱们的地图了，是否是很简单？！喜欢就加个关注，我会按期更新一些使用的小文章

 

原创博客：转载请注明vue cli3.0 结合echarts3.0和地图的使用方法