循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示-有解無憂

在我們做應用系統的時候，往往都會涉及圖表的展示，綜合的圖表展示能夠給客戶帶來視覺的享受和資料直觀體驗，同時也是增強客戶認同感的舉措之一，基于圖表的處理，我們一般往往都是利用對應第三方的圖表組件，然后在這個基礎上為它的資料模型提供符合要求的圖表資料即可，VUE+Element 前端應用也不例外，我們這里使用了基于vue-echarts組件模塊來處理各種圖表vue-echarts是對echarts圖表組件的封裝，

1、圖表組件的安裝使用

首先使用npm 安裝vue-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組件里面物件中加入物件即可，

export 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, 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 getBar 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' },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [{
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 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, 0, 0.5)'
        }
      }
    }
  ]
}

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

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

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

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

最后幾個界面組合一起的效果如下所示，

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

為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：

循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備作業

循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理

循序漸進VUE+Element 前端應用開發(5）--- 表格串列頁面的查詢，串列展示和欄位轉義處理

循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用

循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式

循序漸進VUE+Element 前端應用開發(8）--- 樹串列組件的使用

循序漸進VUE+Element 前端應用開發(9）--- 界面語言國際化的處理

循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示

循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用

循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理

循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理

循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端介面實作前端界面展示

循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理

循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理

循序漸進VUE+Element 前端應用開發(17）--- 選單管理

循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21619.html

標籤：Html/Css

上一篇：springboot 這種錯誤怎么解決

下一篇：weblogic受管節點無法啟動，求大神幫我看看。