本文字?jǐn)?shù)：3957 預(yù)計(jì)閱讀時(shí)間：10分鐘

由于最近項(xiàng)目需要做可視化數(shù)據(jù)展示，也就是用圖表展示數(shù)據(jù)，他還有一個(gè)很高端的名字：“大數(shù)據(jù)可視化”（參考圖一），首先考慮選擇什么圖表庫來作為基礎(chǔ)開發(fā)，目前被普遍認(rèn)可的是Hcharts、Echarts、AntV。

介紹：

• Hcharts：國外的一款圖表庫，是圖表庫的領(lǐng)頭羊

• Echarts：百度開發(fā)的數(shù)據(jù)可視化庫，國內(nèi)圖表庫的 “領(lǐng)軍人物”

• AntV：是螞蟻金服開發(fā)的數(shù)據(jù)可視化庫

總結(jié)出以下幾個(gè)優(yōu)略點(diǎn)區(qū)別Echarts、Hcharts哪個(gè)比較合適：

1、學(xué)習(xí)容易程度：只要懂JS，那么相信你能很快上手。兩者打分相同。但是百度出品的Echarts對于國內(nèi)城市已經(jīng)有了相應(yīng)的配置，調(diào)用非常方便。因此在繪制地圖方面，Echarts略勝一籌。

2、大數(shù)據(jù)表現(xiàn)力：有網(wǎng)友說，當(dāng)數(shù)據(jù)量達(dá)到萬條的級別時(shí)，Highcharts的多表聯(lián)動(dòng)、自動(dòng)縮放具有更強(qiáng)的優(yōu)勢，而Echarts則會(huì)出現(xiàn)明顯的卡頓，需要設(shè)置datazoom。因此Hcharts完勝。

3、文檔友好程度：Echarts是百度的，Hcharts是國外的。另外，Echarts的文檔像是說明書，而Highcharts的文檔像是博客。個(gè)人仍偏向于說明書一樣的文檔，容易定位，因此我為Echarts轉(zhuǎn)身亮燈。

4、圖表美觀程度：看看兩家的實(shí)例Echarts、Hcharts，Echarts完爆啊！而且Echarts基于Canvas，對于3D繪圖有絕對優(yōu)勢，能畫出極漂亮的圖形。

5、圖表配置的自由度：Hcharts基于SVG，方便定制，同類型的圖表，Hcharts能玩出100種花樣。

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

最后，更為關(guān)鍵的是，Echarts免費(fèi)，Hcharts用于商業(yè)用途時(shí)還需要授權(quán)，個(gè)人用時(shí)雖然免費(fèi)，但會(huì)在圖表上顯示logo，有潔癖的話就只能繞道了。

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

個(gè)人不推薦使用Vue-Echarts版本，因?yàn)镋charts本身難度不算大，雖然文檔有點(diǎn)像是 “說明書”，但是還算全乎，花點(diǎn)時(shí)間還是可以理解的。

引入：

在Vue中使用Echarts時(shí)可以按照一般引入插件的方式引入

1、使用npm安裝Echarts：

npm install echarts --save

2、全局引入Echarts：

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

個(gè)人不推薦在main.js全局引入的發(fā)方式，根據(jù)項(xiàng)目使用Echarts的程度可以選擇按需引入：

3、按需引入Echarts：

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

簡單使用：

首先應(yīng)該明確Echarts圖形必須滿足四項(xiàng)剛性條件才可以繪制：

1. 準(zhǔn)備一個(gè)具有寬高的容器（container）；
2. 每次繪制之前需要初始化（init）；
3. 必須設(shè)置配置，否則無從繪制（option）；
4. 改變數(shù)據(jù)時(shí)必須傳入改變的數(shù)據(jù)，否則監(jiān)聽不到新數(shù)據(jù)（setOption）；

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

1. 找到適合結(jié)婚的女朋友（container）；
2. 認(rèn)識一段時(shí)間之后確定關(guān)系（init）；
3. 確定關(guān)系之后需要買買買，她才會(huì)跟你繼續(xù)交往（option）；
4. 關(guān)系進(jìn)一步升溫之后就可以把他娶回家了（setOption）；

使用：

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

<script>
let Echarts = require('echarts/lib/echarts'); //基礎(chǔ)實(shí)例 注意不要使用import
require('echarts/lib/chart/bar'); //按需引入 bar = 柱狀圖
export default {
    data() { return { chart: null } }, //圖表實(shí)例
    mounted() { this.init() },
    methods: {
        init() {
            //2.初始化
            this.chart = Echarts.init(this.$refs.chart);
            //3.配置數(shù)據(jù)
            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' }] //配置項(xiàng)
            };
            // 4.傳入數(shù)據(jù)
            this.chart.setOption(option);
        }
    }
};
</script>

自適應(yīng)窗口大小：

為了兼容性，需要做到每個(gè)圖表根據(jù)屏幕變化而自適應(yīng)寬高

• 單個(gè) / 多個(gè)圖表均生效：

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

效果展示：

------ 全文 完！ ------

---

制作不易，如果該篇博文幫助你解決了開發(fā)問題，請不要吝嗇你的小紅心哦！?

---