前言

由於最近專案需要做視覺化資料展示，也就是用圖表展示資料，他還有一個很高階的名字：“大資料視覺化”（參考圖一），首先考慮選擇什麼圖表庫來作為基礎開發，目前被普遍認可的是Hcharts、Echarts、AntV。

介紹：

Hcharts：國外的一款圖表庫，是圖表庫的領頭羊

Echarts：百度開發的資料視覺化庫，國內圖表庫的 “領軍人物”

AntV：是螞蟻金服開發的資料視覺化庫

總結出以下幾個優略點區別Echarts、Hcharts哪個比較合適：

1、學習容易程度：只要懂JS，那麼相信你能很快上手。兩者打分相同。但是百度出品的Echarts對於國內城市已經有了相應的配置，呼叫非常方便。因此在繪製地圖方面，Echarts

2、大資料表現力：有網友說，當資料量達到萬條的級別時，Highcharts的多表聯動、自動縮放具有更強的優勢，而Echarts則會出現明顯的卡頓，需要設定datazoom。因此Hcharts完勝。

3、文件友好程度：Echarts是百度的，Hcharts是國外的。另外，Echarts的文件像是說明書，而Highcharts的文件像是部落格。個人仍偏向於說明書一樣的文件，容易定位，因此我為Echarts轉身亮燈。

4、圖表美觀程度：看看兩家的例項Echarts、Hcharts，Echarts完爆啊！而且Echarts基於Canvas，對於3D繪圖有絕對優勢，能畫出極漂亮的圖形。

5、圖表配置的自由度

6、圖表的豐富程度：Echarts豐富的圖表種類，和驚豔的3D效果，吊打Hcharts。

最後，更為關鍵的是，Echarts免費，Hcharts用於商業用途時還需要授權，個人用時雖然免費，但會在圖表上顯示logo，有潔癖的話就只能繞道了。

所以，就決定是你了，Echarts！

個人不推薦使用Vue-Echarts版本，因為Echarts本身難度不算大，雖然文件有點像是“說明書”，但是還算全乎，花點時間還是可以理解的。

引入：

在Vue中使用Echarts時可以按照一般引入外掛的方式引入

1、使用npm安裝Echarts：

npm install echarts --save

2、全域性引入Echarts：

//main.js 不推薦
import echarts from "echarts";
Vue.prototype.$echarts = echarts;

個人不推薦在main.js全域性引入的發方式，根據專案使用Echarts的程度可以選擇按需引入：

3、按需引入Echarts：

let Echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar'); //所需圖表

簡單使用：

首先應該明確Echarts圖形必須滿足四項剛性條件才可以繪製：

準備一個具有寬高的容器（container）；每次繪製之前需要初始化（init）；必須設定配置，否則無從繪製（option）；改變資料時必須傳入改變的資料，否則監聽不到新資料（setOption）；

四步缺一不可，可以簡單理解為日常生活中娶媳婦：

找到適合結婚的女朋友（container）；認識一段時間之後確定關係（init）；確定關係之後需要買買買，她才會跟你繼續交往（option）；關係進一步升溫之後就可以把他娶回家了（setOption）；

使用：

 <!-- 準備具有寬高的容器 -->
 <div style="width: 100%; height: 100%" ref="chart"></div>

<script>
let Echarts = require('echarts/lib/echarts'); //基礎例項 注意不要使用import
require('echarts/lib/chart/bar'); //按需引入 bar = 柱狀圖
export default {
  data() { return { chart: null } },//圖表例項
  mounted() { this.init() },methods: {
    init() {
      //2.初始化
      this.chart = Echarts.init(this.$refs.chart);
      //3.配置資料
      let option = {
        xAxis: { type: 'category',data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] },//X軸
        yAxis: { type: 'value' },//Y軸
        series: [{ data: [120,200,150,80,70,110,130],type: 'bar' }] //配置項
      };
      // 4.傳入資料
      this.chart.setOption(option);
    }
  }
};
</script>

自適應視窗大小：

為了相容性，需要做到每個圖表根據螢幕變化而自適應寬高

單個/ 多個圖表均生效：

 mounted() {
    window.addEventListener('resize',() => {
      this.chart.resize();
    });
  }

效果展示：

總結

到此這篇關於在Vue中使用Echarts視覺化庫的文章就介紹到這了,更多相關Vue使用Echarts視覺化庫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！