Vue之v-charts單組件封裝

• 簡介

  在沒有v-charts之前要使用echarts生成圖表時配置、數據非常繁瑣，可以說v-charts的出現給開發者們省去了不少麻煩，可以提前幾小時下班^_

• 安裝

  npm i v-charts echarts -S
  

• 引入方式兩種

  全局引入

  import Vue from 'vue'
  import VCharts from 'v-charts'
  Vue.use(VCharts)
  

  按需引入

  v-charts的每種圖表組件都單獨打包到lib文件夾下,故但組件引入的方式如下

  import VePie from 'v-charts/lib/pie.common'
  

  

• 單組件引入示例

  <template>
    <ve-pie :data="chartData" class="pie"></ve-pie>
  </template>
  
  <script>
      import VePie from 'v-charts/lib/pie.common'
      export default {
        components:{
          [VePie.name]:VePie
        },
        data () {
          return {
            chartData: {
              columns: ['日期', '訪問用戶'],
              rows: [
                { '日期': '1/1', '訪問用戶': 1393 },
                { '日期': '1/2', '訪問用戶': 3530 },
                { '日期': '1/3', '訪問用戶': 2923 },
                { '日期': '1/4', '訪問用戶': 1723 },
                { '日期': '1/5', '訪問用戶': 3792 },
                { '日期': '1/6', '訪問用戶': 4593 }
              ]
            }
          }
        }
      }
  </script>
  
  <style scoped>
  .pie{
    width:500px;
    height:300px;
  }
  </style>