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>