本文字數：3957 預計閱讀時間：10分鐘
由于最近專案需要做可視化資料展示，也就是用圖表展示資料，他還有一個很高端的名字：“大資料可視化”（參考圖一），首先考慮選擇什么圖表庫來作為基礎開發，目前被普遍認可的是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、圖表配置的自由度：Hcharts基于SVG，方便定制，同型別的圖表，Hcharts能玩出100種花樣，
6、圖表的豐富程度：Echarts豐富的圖表種類，和驚艷的3D效果，吊打Hcharts，
最后，更為關鍵的是，Echarts免費，Hcharts用于商業用途時還需要授權，個人用時雖然免費，但會在圖表上顯示logo，有潔癖的話就只能繞道了，
所以，就決定是你了，Echarts！
個人不推薦使用Vue-Echarts版本，因為Echarts本身難度不算大，雖然檔案有點像是 “說明書”，但是還算全乎，花點時間還是可以理解的，
引入：
在Vue中使用Echarts時可以按照一般引入插件的方式引入
1、使用npm安裝Echarts：
npm install echarts --save2、全域引入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();
});
}效果展示：
------ 全文 完！ ------
制作不易，如果該篇博文幫助你解決了開發問題，請不要吝嗇你的小紅心哦！?
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/181690.html
標籤：其他
上一篇：微信小程式自定義導航欄 膠囊選單按鈕高度適配 原理簡單 賽過一些大廠的完美適配 媽媽再也不用擔心我強迫癥啦
下一篇：做網站應該注意哪些細節？