Vue3组合式API：响应式数据可视化仪表盘实战

Vue3组合式API实战：从零构建一个响应式数据可视化仪表盘

Vue3的组合式API（Composition API）为开发者提供了一种更灵活、更强大的组织代码的方式。它让我们能够将相关的逻辑和状态组合在一起，而不是分散在不同的选项中。今天，我们将通过实战项目，一步步构建一个响应式的数据可视化仪表盘，探索组合式API的魅力。

项目概述

我们要构建的是一个实时数据可视化仪表盘，包含以下功能：

• 实时显示销售数据折线图
• 动态展示用户分布饼图
• 可交互的数据表格
• 响应式布局适配不同屏幕

我们将使用Vue3的组合式API，配合ECharts实现数据可视化，整个过程从零开始，逐步完善。

第一步：项目初始化

首先，我们需要创建一个新的Vue3项目。使用Vue CLI或Vite都可以，这里我们选择Vite，因为它更快更轻量。

npm create vite@latest dashboard -- --template vue
cd dashboard
npm install
npm install echarts vue-echarts

安装完成后，我们创建基本的项目结构。在src目录下，我们创建以下文件：

• components/ – 存放组件
• composables/ – 存放组合式函数
• data/ – 存放模拟数据

第二步：创建基础组件

我们先创建几个基础组件：LineChart.vue、PieChart.vue和DataTable.vue。这些组件将负责显示不同的数据可视化内容。

以LineChart.vue为例，我们使用vue-echarts来绘制折线图：

<template>
  <div ref=\"chartRef\" style=\"width: 100%; height: 400px;\"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from \'vue\'
import { use } from \'echarts/core\'
import { LineChart } from \'echarts/charts\'
import { CanvasRenderer } from \'echarts/renderers\'
import { TitleComponent, TooltipComponent, GridComponent } from \'echarts/components\'
import VChart from \'vue-echarts\'

use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, GridComponent])

const props = defineProps({
  data: {
    type: Array,
    required: true
  }
})

const chartRef = ref(null)
let chartInstance = null

const initChart = () => {
  chartInstance = echarts.init(chartRef.value)
  updateChart()
}

const updateChart = () => {
  const option = {
    title: { text: \'销售趋势\' },
    tooltip: { trigger: \'axis\' },
    xAxis: {
      type: \'category\',
      data: props.data.map(item => item.date)
    },
    yAxis: {
      type: \'value\'
    },
    series: [{
      data: props.data.map(item => item.value),
      type: \'line\'
    }]
  }
  chartInstance.setOption(option)
}

onMounted(() => {
  initChart()
  window.addEventListener(\'resize\', () => {
    chartInstance && chartInstance.resize()
  })
})

onUnmounted(() => {
  chartInstance && chartInstance.dispose()
  window.removeEventListener(\'resize\', () => {
    chartInstance && chartInstance.resize()
  })
})
</script>

第三步：使用组合式API管理数据

现在，让我们创建组合式函数来管理数据。在composables目录下，我们创建useDashboardData.js：

import { ref, reactive } from \'vue\'
import { mockSalesData, mockUserDistribution } from \'../data/mockData\'

export function useDashboardData() {
  const salesData = ref(mockSalesData)
  const userDistribution = ref(mockUserDistribution)
  const loading = ref(false)

  const refreshData = async () => {
    loading.value = true
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1000))
    // 更新数据
    salesData.value = mockSalesData.map(item => ({
      ...item,
      value: Math.floor(Math.random() * 1000)
    }))
    userDistribution.value = mockUserDistribution.map(item => ({
      ...item,
      value: Math.floor(Math.random() * 100)
    }))
    loading.value = false
  }

  return {
    salesData,
    userDistribution,
    loading,
    refreshData
  }
}

这个组合式函数封装了仪表盘所需的所有数据和状态，包括销售数据、用户分布数据和加载状态。它还提供了一个refreshData方法来模拟数据刷新。

第四步：构建仪表盘主页面

现在，我们创建Dashboard.vue主页面，将各个组件组合起来：

<template>
  <div class=\"dashboard\">
    <header>
      <h1>数据可视化仪表盘</h1>
      <button @click=\"refreshData\" :disabled=\"loading\">
        {{ loading ? \'刷新中...\' : \'刷新数据\' }}
      </button>
    </header>

    <main>
      <div class=\"chart-container\">
        <LineChart :data=\"salesData\" />
      </div>
      <div class=\"chart-container\">
        <PieChart :data=\"userDistribution\" />
      </div>
      <div class=\"table-container\">
        <DataTable :data=\"salesData\" />
      </div>
    </main>
  </div>
</template>

<script setup>
import { useDashboardData } from \'./composables/useDashboardData\'
import LineChart from \'./components/LineChart.vue\'
import PieChart from \'./components/PieChart.vue\'
import DataTable from \'./components/DataTable.vue\'

const { salesData, userDistribution, loading, refreshData } = useDashboardData()
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-container {
  margin-bottom: 20px;
}

.table-container {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .dashboard {
    padding: 10px;
  }
  
  header {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

第五步：添加交互功能

为了让仪表盘更加实用，我们添加一些交互功能。比如，在数据表格中添加排序功能：

<template>
  <table>
    <thead>
      <tr>
        <th @click=\"sortBy(\'date\')\">日期</th>
        <th @click=\"sortBy(\'value\')\">销售额</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for=\"item in sortedData\" :key=\"item.date\">
        <td>{{ item.date }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { computed } from \'vue\'

const props = defineProps({
  data: {
    type: Array,
    required: true
  }
})

const sortKey = ref(\'date\')
const sortOrder = ref(\'asc\')

const sortedData = computed(() => {
  return [...props.data].sort((a, b) => {
    if (sortOrder.value === \'asc\') {
      return a[sortKey.value] > b[sortKey.value] ? 1 : -1
    } else {
      return a[sortKey.value]  {
  if (sortKey.value === key) {
    sortOrder.value = sortOrder.value === \'asc\' ? \'desc\' : \'asc\'
  } else {
    sortKey.value = key
    sortOrder.value = \'asc\'
  }
}
</script>