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和地圖的使用方法