📢📢📢📣📣📣

哈嘍！大家好，我是【Bug 終結者】 ，【CSDN新星創(chuàng)作者】🏆，阿里云技術博主🏆，51CTO人氣博主🏆，INfoQ寫作專家🏆

一位上進心十足，擁有極強學習力的【Java領域博主】😜😜😜

🏅【Bug 終結者】博客的領域是【面向后端技術】的學習，未來會持續(xù)更新更多的【后端技術】以及【學習心得】。 偶爾會分享些前端基礎知識，會更新實戰(zhàn)項目，面向企業(yè)級開發(fā)應用！
🏅 如果有對【后端技術】、【前端領域】感興趣的【小可愛】，歡迎關注【Bug 終結者】💞💞💞


?????? 感謝各位大可愛小可愛！ ??????

文章目錄

• 一、什么是可視化？
• 二、什么是Echarts？
• 三、Echarts的優(yōu)點
• 四、Vue 整合Echarts
• • ?下載Echarts依賴
  • ??Vue引入Echarts
  • ??測試使用Echarts
• 五、效果圖
• ?小結

一、什么是可視化？

可視化就是可以通過視覺進行傳達的。 再專業(yè)一點就可以解釋為可視化（Visualization）是利用計算機圖形學和圖像處理技術，將數(shù)據轉換成圖形或圖像在屏幕上顯示出來，再進行交互處理的理論、方法和技術。

將數(shù)據通俗的在屏幕中展現(xiàn)出來！

二、什么是Echarts？

一個純JavaScript圖表庫。ECharts，縮寫來自Enterprise Charts，商業(yè)級數(shù)據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數(shù)據可視化圖表。創(chuàng)新的拖拽重計算、數(shù)據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數(shù)據進行挖掘、整合的能力。

Echarts 為商業(yè)級數(shù)據圖表

三、Echarts的優(yōu)點

• 開源軟件，并且我們提供了非常炫酷的圖形界面
• 國人開發(fā)，文檔全，便于開發(fā)和閱讀文檔。
• 圖表豐富，可以適用各種各樣的功能。
• 使用簡單，在官網中為我們封裝了js，只要會引用就會得到完美的展示效果；
• 種類多，echarts實現(xiàn)簡單，各類圖形都有；相應的模板，還有豐富的API及文檔說明，非常詳細

四、Vue 整合Echarts

?下載Echarts依賴

pnpm install echarts --save

安裝成功，接下來使用Vue引入Echarts

??Vue引入Echarts

main.js全局引入 Echarts

// 全局引入相關包 import * as echarts from "echarts"; // 開啟echarts Vue.prototype.$echarts = echarts;

??測試使用Echarts

打開 echarts官網

選擇自己需要的圖形打開

新建vue文件，將options文件復制到data中

<div class="box-pie" style="height: 400px" ref="chart"></div> data(){return {chart:null,// 配置可視化圖形option: {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}}},mounted() {this.getPage();},methods:{getPage() {// 引用chart并初始化this.chart = this.$echarts.init(this.$refs.chart);// 使用剛指定的配置項和數(shù)據顯示圖表。this.chart.setOption(this.option);}}

五、效果圖

?小結

以上就是【Bug 終結者】對整合Echarts實現(xiàn)可視化界面簡單的概述，本案例實現(xiàn)了Vue對Echarts的整合，整合后可大大提升數(shù)據的可視化，提升美觀性！

如果這篇【文章】有幫助到你，希望可以給【Bug 終結者】點個贊👍，創(chuàng)作不易，如果有對【后端技術】、【前端領域】感興趣的小可愛，也歡迎關注?????? 【Bug 終結者】??????，我將會給你帶來巨大的【收獲與驚喜】💝💝💝！

總結

以上是生活随笔為你收集整理的3分钟搞懂Vue整合Echarts实现可视化界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。