一文詳解Vue如何整合Echarts實(shí)現(xiàn)可視化界面

更新時間：2022年04月24日 09:58:46 作者：Bug 終結(jié)者

ECharts，縮寫來自Enterprise Charts，商業(yè)級數(shù)據(jù)圖表，一個純Javascript的圖表庫，可以流暢的運(yùn)行在PC和移動設(shè)備上。本文將在Vue中整合Echarts實(shí)現(xiàn)可視化界面，感興趣的可以了解一下

一、什么是可視化

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

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

二、什么是Echarts

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

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

三、Echarts的優(yōu)點(diǎn)

開源軟件，并且我們提供了非常炫酷的圖形界面

國人開發(fā)，文檔全，便于開發(fā)和閱讀文檔。

圖表豐富，可以適用各種各樣的功能。

使用簡單，在官網(wǎng)中為我們封裝了js，只要會引用就會得到完美的展示效果；

種類多，echarts實(shí)現(xiàn)簡單，各類圖形都有；相應(yīng)的模板，還有豐富的API及文檔說明，非常詳細(xì)

四、Vue 整合Echarts

下載Echarts依賴

pnpm install echarts --save

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

Vue引入Echarts

main.js全局引入 Echarts

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

測試使用Echarts

打開 echarts官網(wǎng)

選擇自己需要的圖形打開

新建vue文件，將options文件復(fù)制到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);
      // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
      this.chart.setOption(this.option);
    }
  }