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