【后台系統開發】 vue-admin-template 寫一個自己的dashboard 加入Echarts圖表庫

加入Echarts圖表庫

Echartsjs圖表庫，是我個人心中的地表最強前端圖表庫，官方Demo可欣賞：ECharts Demo 。由於日常的研究，基本的流程就是，爬取數據，數據清洗，數據分析和數據結論展示，對於最后一步的結論展示，圖表肯定是最直觀的。

導入echarts到項目

很有趣的是，目前有兩家公司在維護echarts for vue的工作，一家是作者方百度，提供了vue-echartsGitHub - ecomfe/vue-echarts: ECharts component for Vue.js., 另一家是vue生態大貢獻家，餓了么，提供了v-echarts，GitHub - ElemeFE/v-charts: 基於 Vue2.0 和 ECharts 封裝的圖表組件📈📊。更有趣的是star數都在2k多，不相上下。簡單比較了下，vue-echarts使用暴露原生配置的方式，理論上可以支持echarts的所有特性，而v-echarts是主打易用性，在封裝和局部導入縮減大小等方面做了很多工作，但是從文檔上看，支持的圖表類型沒有echarts官方多，但也足夠用了。所以為了方便，還是選擇了后者，如果實在不能滿足需求了，自定義也無妨。

直接安裝：

npm i v-charts echarts -S

運行demo

在respage01/index.vue中加入v-charts demo代碼：

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
  import VeLine from 'v-charts/lib/line.common'
    export default {
        name: "index",
        components: { VeLine },
        data () {
          return {
            chartData: {
              columns: ['date', 'PV'],
              rows: [
                { 'date': '01-01', 'PV': 1231 },
                { 'date': '01-02', 'PV': 1223 },
                { 'date': '01-03', 'PV': 2123 },
                { 'date': '01-04', 'PV': 4123 },
                { 'date': '01-05', 'PV': 3123 },
                { 'date': '01-06', 'PV': 7123 }
             ]
            }
          }
        }
    }
</script>
<style scoped>
</style>

 

 

獲得如下結果：

 

image.png

作者：蘿卜日志
鏈接：https://www.jianshu.com/p/1b4570e210b8
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。