6-5 完成首頁table部分及ECharts介紹

目錄：

• 實現效果圖
• 完成首頁table部分代碼
• ECharts介紹

一、實現效果圖

二、完成首頁table部分代碼

這一塊主要借助 element-ui的 Table 表格 組件 完成的

2.1、編輯Home.vue

<template>
    <div>
      <el-row class="home" :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover" style="height: 290px">
            .....
          </el-card>
          <el-card shadow="hover" style="height: 633px;margin-top: 20px">
            <el-table :data="tabeData">
              <!--show-overflow-tooltip單行顯示 默認為true-->
              <el-table-column show-overflow-tooltip v-for="(val,key) in tableLable" :key="key" :prop="key" :label="val"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="16">
          .....
        </el-col>
      </el-row>
    </div>
</template>

<script>
    import '../../assets/css/home.css'
    export default {
        data(){
          return {
            .....,
            tabeData: [],
            tableLable: {
              name: '課程',
              todayBuy: '今日購買',
              monthBuy: '本月購買',
              totalBuy: '總購買'
            }
          }
        },
        methods: {
          getTableData(){  //定義事件，獲取 mock數據
              this.$http.get('/home/getData').then(res => {
              res = res.data;
              this.tabeData = res.data.tableData;
              console.log(this.tabeData);
            });
          }
        },
        created() {  //在 實例創建的時候，就去調用 getTableData方法
          this.getTableData();
        }
    }
</script>

注意：show-overflow-tooltip單行顯示 默認為true，什么意思吶，就是如果我們表格中的字符串 太長的話，就會自動換行，則如下顯示：

所以我們需要在標簽上加上show-overflow-tooltip屬性，就會顯示如下：

2.2.編輯mock下的home.js的數據改變

import Mock from 'mockjs'

//圖標數據
let List = [];
export default {
  getSatisticalData: () =>{
    for(let i = 0; i <7; i++){
      List.push(
        Mock.mock({
          vue: Mock.Random.float(100,8000,0,2),
          wechat: Mock.Random.float(100,8000,0,2),
          ES6: Mock.Random.float(100,8000,0,2),
          Redis: Mock.Random.float(100,8000,0,2),
          React: Mock.Random.float(100,8000,0,2),
          springboot: Mock.Random.float(100,8000,0,2),
        })
      )
    }
    //餅圖
    let videoData= [
        {
            name: 'SpringBoot',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'Vue',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: '小程序',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'Python',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'ES6',
            value: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'JAVA',
            value: Mock.Random.float(1000,10000,0,2)
          }
      ];
    return {
      code: 2000,
      data:{videoData:videoData,userData:List,OrderData:List,tableData:[
          {
            name: 'SpringBoot',
            todayBuy: Mock.Random.float(1000,10000,0,2),
            monthBuy: Mock.Random.float(1000,10000,0,2),
            totalBuy: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'JAVA',
            todayBuy: Mock.Random.float(1000,10000,0,2),
            monthBuy: Mock.Random.float(1000,10000,0,2),
            totalBuy: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'python',
            todayBuy: Mock.Random.float(1000,10000,0,2),
            monthBuy: Mock.Random.float(1000,10000,0,2),
            totalBuy: Mock.Random.float(1000,10000,0,2)
          },
          {
            name: 'Vue',
            todayBuy: Mock.Random.float(1000,10000,0,2),
            monthBuy: Mock.Random.float(1000,10000,0,2),
            totalBuy: Mock.Random.float(1000,10000,0,2)
          },
        ]}
    }
  }
}

2.3、編輯 mock 下的index.js

......

//調用getSatisticalData方法
Mock.mock(/\home\/getData/,'get',HomeApi.getSatisticalData);

三、ECharts介紹

1. Echarts 官網：5 分鍾上手 ECharts

2.Echarts 圖形下載地址： 實例下載

3.echarts組件的一些想法：

• 圖表的大分類
• 組件的一些動態參數抽離
• 組件的基本配置
• 主題顏色

color: [
    '#2ec7c9',
    '#b6a2de',
    '#5ab1ef',
    '#ffb980',
    '#d87a80',
    ...
]

目錄結構：

....
-src
    -api
        ...
    -common
        -...
        -Echarts.vue（新增Echarts組件）
        -...
    -...
....

安裝echarts：

> npm install echarts

編輯 Echarts.vue組件

<template>
    <div style="height: 100%" ref="echart"> <!--ref添加屬性元素，通過vm.$ref獲取dom元素-->
      echart
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        props: {
          chartData: {
            type: Object,
            default(){
              return {
                xData: [],
                series: []
              }
            }
          },
          isAxisChart: {  //判斷是否有坐標軸
            type: Boolean,
            default: true
          }
        },
        computed: {
          options() {  //通過計算屬性來判斷是不是有坐標
            return this.isAxisChart ? this.axisOptions : this.normalOptions
          }
        },
        data(){
          return { //動態傳入的參數定義出來
            echarts: null,
            axisOptions: {},
            normalOptions: {}

          }
        },
      methods: {
          initChart(){   //初始化echarts
            if(this.echarts){
              this.echarts.setOption(this.options)
            }else {
              this.echarts = echarts.init(this.$refs.echarts);
              this.echarts.setOption(this.options)
            }
          },
          initChartData(){  //初始化數據
            if(this.isAxisChart) {
              console.log('axis');
            }else {
              console.log('normal');
            }
          }
      }
    }
</script>

<style scoped>

</style>