第6天

一.CountData数据获取

api.js:增加getCountData()

import request from './request'

const api = {
    getTableData() {
        return request({ url: '/api/home/getTableData' })
    },
    getCountData() {
        return request({ url: '/api/home/getCountData' })
    }
}

export default api

mock.js中进行拦截：

import mock from 'mockjs'
import homeApi from './mockData/home'

mock.mock("/api/home/getTableData", 'get', homeApi.getTableData)
mock.mock("/api/home/getCountData", 'get', homeApi.getCountData)

在home.js中添加数据：

getCountData: () => {
  return {
    code: 200,
    data: [
      {
        name: "今日支付订单",
        value: 1234,
        icon: "SuccessFilled",
        color: "#2ec7c9",
      },
      {
        name: "今日收藏订单",
        value: 210,
        icon: "StarFilled",
        color: "#ffb980",
      },
      {
        name: "今日未支付订单",
        value: 1234,
        icon: "GoodsFilled",
        color: "#5ab1ef",
      },
      {
        name: "本月支付订单",
        value: 1234,
        icon: "SuccessFilled",
        color: "#2ec7c9",
      },
      {
        name: "本月收藏订单",
        value: 210,
        icon: "StarFilled",
        color: "#ffb980",
      },
      {
        name: "本月未支付订单",
        value: 1234,
        icon: "GoodsFilled",
        color: "#5ab1ef",
      },
    ],
  };
}

Home.vue组件中增加CountData：

const CountData = ref([])

const getCountData = async () => {
  try {
    const data = await proxy.$api.getCountData()
    console.log(data);
    
  } catch (error) {
    console.error('Failed to fetch table data:', error)
  }
}

// 使用 onMounted 钩子在组件挂载时调用 getTableData,getCountData 函数
onMounted(()=>{
  getTableData()
  getCountData()

})

二.CountData数据渲染

Home中template中增加一个新的el-col :

用v-for填入countData中的数据

    <el-col :span="16" style="margin-top:20px">
       <div class="countdata">
          <el-card :body-style="{display:'flex',padding:0}"
            v-for="item in countData" :key="item.name"
            >
            <component :is="item.icon" class="icons" :style="{background:item.color}"></component>
            <div class="detail">
              <p class="num">￥{{ item.value }}</p>
              <p class="txt">￥{{ item.name }}</p>
            </div>
        </el-card>
       </div>
    </el-col>

样式：

.countdata {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-card {
    width: 30%;
    margin-bottom: 20px;
  }
  .icons {
    width: 60px;
    height: 60px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color: #fff;
  }
  .detail {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .num {
      font-size: 30px;
      margin-bottom: 10px;
    }
    .txt {
      font-size: 15px;
      color: #999;
    }
  }

实现的效果：

三.echarts数据的获取

先安装echarts:

 npm install echarts -D

Chart的数据放入home.js:

getChartData: () => {
  return {
    code: 200,
    data: {
      orderData: {
        date: [
          "2019-10-01",
          "2019-10-02",
          "2019-10-03",
          "2019-10-04",
          "2019-10-05",
          "2019-10-06",
          "2019-10-07",
        ],
        data: [
          {
            苹果: 3839,
            小米: 1423,
            华为: 4965,
            oppo: 3334,
            vivo: 2820,
            一加: 4751,
          },
          {
            苹果: 3560,
            小米: 2099,
            华为: 3192,
            oppo: 4210,
            vivo: 1283,
            一加: 1613,
          },
          {
            苹果: 1864,
            小米: 4598,
            华为: 4202,
            oppo: 4377,
            vivo: 4123,
            一加: 4750,
          },
          {
            苹果: 2634,
            小米: 1458,
            华为: 4155,
            oppo: 2847,
            vivo: 2551,
            一加: 1733,
          },
          {
            苹果: 3622,
            小米: 3990,
            华为: 2860,
            oppo: 3870,
            vivo: 1852,
            一加: 1712,
          },
          {
            苹果: 2004,
            小米: 1864,
            华为: 1395,
            oppo: 1315,
            vivo: 4051,
            一加: 2293,
          },
          {
            苹果: 3797,
            小米: 3936,
            华为: 3642,
            oppo: 4408,
            vivo: 3374,
            一加: 3874,
          },
        ],
      },
      videoData: [
        { name: "小米", value: 2999 },
        { name: "苹果", value: 5999 },
        { name: "vivo", value: 1500 },
        { name: "oppo", value: 1999 },
        { name: "魅族", value: 2200 },
        { name: "三星", value: 4500 },
      ],
      userData: [
        { date: "周一", new: 5, active: 200 },
        { date: "周二", new: 10, active: 500 },
        { date: "周三", new: 12, active: 550 },
        { date: "周四", new: 60, active: 800 },
        { date: "周五", new: 65, active: 550 },
        { date: "周六", new: 53, active: 770 },
        { date: "周日", new: 33, active: 170 },
      ],
    },
  };
}

api.js增加:

    getChartData() {
        return request({ url: '/api/home/getChartData' })
    }

mock.js进行拦截：

import mock from 'mockjs'
import homeApi from './mockData/home'

mock.mock("/api/home/getTableData", 'get', homeApi.getTableData)
mock.mock("/api/home/getCountData", 'get', homeApi.getCountData)
mock.mock("/api/home/getChartData", 'get', homeApi.getChartData)

在Home.vue中去获取数据：

const chartData = ref([])

const getChartData = async () => {
  try {
    const data = await proxy.$api.getChartData()
    chartData.value=data
    console.log(data);
    
    
  } catch (error) {
    console.error('Failed to fetch table data:', error)
  }
}

// 使用 onMounted 钩子在组件挂载时调用 getTableData,getCountData 函数
onMounted(()=>{
  getTableData()
  getCountData()
  getChartData()
})

echarts的配置：

import * as echarts from "echarts";
import { reactive } from 'vue';

// observer 接收观察器实例对象
const observer = ref(null);

// 这个是折线图和柱状图 两个图表共用的公共配置
const xOptions = reactive({
  // 图例文字颜色
  textStyle: {
    color: "#333",
  },
  legend: {},
  grid: {
    left: "20%",
  },
  // 提示框
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    type: "category", // 类目轴
    data: [],
    axisLine: {
      lineStyle: {
        color: "#17b3a3",
      },
    },
    axisLabel: {
      interval: 0,
      color: "#333",
    },
  },
  yAxis: [
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#17b3a3",
        },
      },
    },
  ],
  color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8c98b3"],
  series: [],
});

const pieOptions = reactive({
  tooltip: {
    trigger: "item",
  },
  legend: {},
  color: [
    "#0f78f4",
    "#dd5366",
    "#9462e5",
    "#a6a6a6",
    "#e1bb22",
    "#39c362",
    "#3ed1ef",
  ],
  series: [],
});

四.折线图数据渲染

html结构：

<el-card class="top-echart">
            <div ref="echart" style="height: 280px;">

            </div>
       </el-card>

修改Home.vue中的异步函数：

import * as echarts from "echarts";
import { ref, onMounted, getCurrentInstance,reactive} from 'vue'

const getChartData = async () => {
  try {
    const {orderData} = await proxy.$api.getChartData()
    xOptions.xAxis.data=orderData.date
    xOptions.series=Object.keys(orderData.data[0]).map(val=>{
      return {
        name:val,
        data:orderData.data.map(item=>item[val]),
        type:'line'
      }
    })
    const oneEcharts=echarts.init(proxy.$refs['echart'])
    oneEcharts.setOption(xOptions)
    
    
  } catch (error) {
    console.error('Failed to fetch table data:', error)
  }
}

1. 获取图表数据：

   const { orderData } = await proxy.$api.getChartData()

   通过 proxy.$api.getChartData 从 API 获取图表数据。orderData 包含了图表所需的数据。

2. 设置 x 轴数据：

   xOptions.xAxis.data = orderData.date

   将 orderData.date 设置为 xOptions.xAxis.data，用于配置图表的 x 轴数据。

3. 设置 series 数据：

• Object.keys(orderData.data[0]) 获取 orderData.data 中每个对象的键名。

-   使用 `map` 方法遍历这些键名，为每个键名创建一个 `series` 对象。

-   `series` 对象包含 `name`、`data` 和 `type` 属性：

    -   `name`：系列名称，使用键名。
    -   `data`：系列数据，使用 `orderData.data` 中对应键名的值。
    -   `type`：图表类型，这里设置为 `'line'`（折线图）。

4. 初始化 ECharts 实例：

const oneEcharts = echarts.init(proxy.$refs['echart'])

使用 echarts.init 初始化一个 ECharts 实例，绑定到模板中 ref 为 echart 的 DOM 元素。

5. 设置图表选项：

   oneEcharts.setOption(xOptions)

   使用 setOption 方法将配置好的 xOptions 应用到 ECharts 实例中，渲染图表。

实现效果：

五.柱状图、饼状图渲染

结构：

<el-col :span="16" style="margin-top:20px">
       <div class="countdata">
          <el-card :body-style="{display:'flex',padding:0}"
            v-for="item in countData" :key="item.name"
            >
            <component :is="item.icon" class="icons" :style="{background:item.color}"></component>
            <div class="detail">
              <p class="num">￥{{ item.value }}</p>
              <p class="txt">￥{{ item.name }}</p>
            </div>
        </el-card>
       </div>

       <el-card class="top-echart">
            <div ref="echart" style="height: 280px;">

            </div>
       </el-card>

       <div class="graph">
           <el-card>
               <div ref="userEchart" style="height: 240px;"></div>
           </el-card>
           <el-card>
               <div ref="videoEchart" style="height: 240px;"></div>
           </el-card>
       </div>
    </el-col>

获取数据：

    // 设置第二个图表
    xOptions.xAxis.data = userData.map(item => item.date)
    xOptions.series = [
      {
        name: '新增用户',
        data: userData.map(item => item.new),
        type: 'bar'
      },
      {
        name: '活跃用户',
        data: userData.map(item => item.active),
        type: 'bar'
      }
    ]
    const twoEcharts = echarts.init(proxy.$refs['userEchart'])
    twoEcharts.setOption(xOptions)


    //第三个图表
    pieOptions.series=[
      {
        data:videoData,
        type:'pie'
      }
    ]

    const threeEcharts = echarts.init(proxy.$refs['videoEchart'])
    threeEcharts.setOption(pieOptions)
    
  } catch (error) {
    console.error('Failed to fetch table data:', error)
  }

样式：

.graph {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .el-card {
    width: 50%;
    height: 260px;
  }
}

实现效果：

六.监听窗口变化

observer.value=new ResizeObserver((en)=>{
      oneEcharts.resize()
      twoEcharts.resize()
      threeEcharts.resize()
})

if(proxy.$refs['echart']){
  observer.value.observe(proxy.$refs['echart'])
}

这样窗口大小变化了表格大小页相应变化