概述

基於圖表的處理，我們一般往往都是利用對應第三方的圖表元件，然後在這個基礎上為它的資料模型提供符合要求的圖表資料即可，vue+Element 前端應用也不例外，我們這裡使用了基於vue-echarts元件模組來處理各種圖表vue-echarts是對echarts圖表元件的封裝。

1、圖表元件的安裝使用

首先使用npm 安裝vIvIIKiue-echarts元件。

git地址：https://github.com/ecomfe/vue-echarts

NPM安裝命令

npm install echarts vue-echarts

然後在對應模組頁面裡面引入對應的元件物件，如下程式碼所示。

<script>
import ECharts from 'vue-echarts' // 主圖表物件
import 'echarts/lib/chart/line' // 曲線圖表
import 'echarts/lib/chart/bar' // 柱狀圖
import 'echarts/lib/chart/pie' // 餅狀圖
import 'echarts/lib/component/tooltip' // 提示資訊

接著在Vue元件裡面物件中加入物件即可。

expor程式設計客棧t default {
  components: {
    'v-chart': ECharts
  },

如果是全域性註冊使用，那麼可以在main.js裡面進行載入

// 註冊元件後即可使用
Vue.component('v-chart',VueECharts)

我們來看看圖表展示的效果圖

柱狀圖效果

餅狀圖

曲線圖

其他型別，極座標和散點圖形

或者曲線和柱狀圖組合的圖形

更多的案例可以參考官網的展示介紹：https://echarts.apache.org/examples/zh/index.html

2、各種圖表的展示處理

對於我們需要的各種常規的柱狀圖、餅狀圖、折線圖（曲線圖）等，我下來介紹幾個案例程式碼，其他的一般我們根據官方案例提供的data資料模型，構造對應的資料即可生成，就不再一一贅述。

另外，我們也可以參考Vue-echarts封裝的處理demo:https://github.com/ecomfe/vue-echarts/tree/master/src/demo

對於柱狀圖，效果如下

在Vue模組頁面的Template 裡面，我們定義介面程式碼如下即可。

<v-chart
  ref="simplebar"
  :options="simplebar"
  autoresize
/>

然後在data裡面為它準備好資料即可，如下程式碼所示。

data() {
    return {
      simplebar: {
        title: { text: '柱形圖Demo' },tooltip: {},xAxis: {
          data: ['襯衫','羊毛衫','雪紡衫','褲子','高跟鞋','襪子']
        },yAxis: {},series: [{
          name: '銷量',type: 'bar',data: [5,20,36,10,20]
        }]
      }
    }
  }

當然我們也可以把這些構造對應資料的邏輯放在單獨的JS檔案裡面，然後匯入即可。

例如對於餅圖，它的介面效果如下所示。

它的vue檢視下，Template裡面的程式碼如下所示。

<v-chart
  ref="pie"
  :options="pie"
  autoresize />

一般對於圖表的資料，由於處理程式碼可能不少，建議是獨立放在一個JS檔案裡面，然後我們通過import匯入即可使用。

然後在data裡面引入對應的物件即可，如下所示。

<script>
import ECharts from 'vue-echarts' // 主圖表物件
import 'echarts/lib/chart/line' // 曲線圖表
import 'echarts/lib/chart/bar' // 柱狀圖
import 'echarts/lib/chart/pie' // 餅狀圖
import 'echarts/lib/component/tooltip' // 提示資訊

// 匯入報表資料
import getBahttp://www.cppcns.comr from './chartdata/bar'
import pie from './chartdata/pie'
import scatter from './chartdata/scatter'
import lineChart from './chartdata/lineChart'
import incomePay from './chartdata/incomePay'

export default {
  components: {
    'v-chart': ECharts
  },return {
      pie,scatter,lineChart,incomePay,simplebar: {
        title: { text: '柱形圖Demo' },20]
        }]
      }
    }
  },

其中pie.js裡面放置的是處理餅圖資料的邏輯，如下程式碼所示。

export default {
程式設計客棧  title: {
    text: '餅圖程式呼叫高亮示例',x: 'center'
  },tooltip: {
    trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'
  },legend: {
    orient: 'vertical',left: 'left',data: ['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎']
  },series: [
    {
      name: '訪問來源',type: 'pie',radius: '55%',center: ['50%','60%'],data: [
        { value: 335,name: '直接訪問' },{ value: 310,name: '郵件營銷' },{ value: 234,name: '聯盟廣告' },{ value: 135,name: '視訊廣告' },{ value: 1548,name: '搜尋引擎' }
      ],itemStyle: {
        emphasis: {
          shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0,0.5)'
        }
      }
    }
  ]
}

在介面處理的時候，值得注意的時候，有時候Vue頁面處理正常，但是圖表就是沒有出來，可能是因為高度或者寬度為0的原因，需要對對應的樣式進行處理設定，以便能夠正常顯示出來。

如下是我 對圖表的設定的樣式處理，使得圖表在一個卡片的位置能夠顯示正常。

<style scoped>
  .echarts { width: 100%; height: 400px;}

  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
    marhttp://www.cppcns.comgin-bottom: 20px;
  }
</style>

最後幾個介面組合一起的效果如下所示。

以上就是基於vue-echarts處理各種圖表展示，其中常規的引入元件很容易的，主要就是需要根據對應的圖表案例，參考資料組成的規則，從而根據我們實際情況構建對應的資料，賦值給對應的模型變數即可。

以上就是Vue Element前端應用開發之echarts圖表的詳細內容，更多關於Vue Element之echarts圖表的資料請關注我們其它相關文章！