Vue3 大屏可视化平台开发指南
一、自定义开发
1. 添加新图表
步骤一：创建图表组件
在 src/components/charts/ 目录下创建新组件：
<!-- src/components/charts/MyChart.vue -->
<template><div ref="chartRef" class="my-chart"></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { getCommonChartOption } from '@/utils'const chartRef = ref(null)
let chartInstance = nullconst initChart = () => {if (!chartRef.value) returnchartInstance = echarts.init(chartRef.value)const option = {...getCommonChartOption(),xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]}chartInstance.setOption(option)
}onMounted(() => {initChart()window.addEventListener('resize', chartInstance.resize)
})onUnmounted(() => {window.removeEventListener('resize', chartInstance.resize)chartInstance?.dispose()
})
</script><style scoped>
.my-chart {width: 100%;height: 300px;
}
</style>
步骤二：在页面中使用
<script setup>
import MyChart from '@/components/charts/MyChart.vue'
</script><template><ChartCard title="我的图表"><MyChart /></ChartCard>
</template>
2. 修改主题样式
修改主题配色
编辑 src/config/theme.config.js：
export const THEME_CONFIG = {primaryColor: '#2C58A6', // 主色调backgroundColor: '#001d58', // 背景色cardBgColor: '#034c6a', // 卡片背景色borderColor: '#2C58A6', // 边框颜色textColor: '#ffffff', // 文字颜色chartColors: [ // 图表颜色系列'#5490CB', '#63B2EE', '#76DA91', '#F8CB7F', '#F89588', '#7CD6CF','#9192AB', '#7898E1', '#EFA666']
}
修改全局样式
编辑 src/assets/styles/global.scss：
// 自定义变量
$primary-color: #2C58A6;
$background-color: #001d58;// 全局样式
body {background-color: $background-color;color: #ffffff;
}// 卡片样式
.card {background-color: rgba(3, 76, 106, 0.8);border: 1px solid $primary-color;border-radius: 4px;
}
3. 添加新功能模块
创建 Composable
// src/composables/useMyFeature.js
import { ref, onMounted, onUnmounted } from 'vue'export function useMyFeature() {const data = ref([])const loading = ref(false)const error = ref(null)let timer = nullconst fetchData = async () => {loading.value = truetry {// 获取数据逻辑const response = await fetch('/api/data')data.value = await response.json()} catch (e) {error.value = e} finally {loading.value = false}}const startAutoUpdate = (interval = 5000) => {timer = setInterval(fetchData, interval)}const stopAutoUpdate = () => {if (timer) {clearInterval(timer)timer = null}}onMounted(() => {fetchData()startAutoUpdate()})onUnmounted(() => {stopAutoUpdate()})return {data,loading,error,fetchData,startAutoUpdate,stopAutoUpdate}
}
在组件中使用
<script setup>
import { useMyFeature } from '@/composables/useMyFeature'const { data, loading, error, fetchData } = useMyFeature()
</script><template><div v-if="loading">加载中...</div><div v-else-if="error">{{ error.message }}</div><div v-else><!-- 显示数据 --></div>
</template>
二、接入真实数据
1. 创建 API 服务
// src/api/index.js
import axios from 'axios'const api = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL || '/api',timeout: 10000
})// 请求拦截器
api.interceptors.request.use(config => {// 添加 token 等const token = localStorage.getItem('token')if (token) {config.headers.Authorization = `Bearer ${token}`}return config
})// 响应拦截器
api.interceptors.response.use(response => response.data,error => {console.error('API Error:', error)return Promise.reject(error)}
)export default api// 具体接口
export const getStatistics = () => api.get('/statistics')
export const getPersonnelList = () => api.get('/personnel')
export const getChartData = (type) => api.get(`/chart/${type}`)
2. 替换模拟数据
修改 src/views/Dashboard.vue：
<script setup>
import { ref, onMounted } from 'vue'
import { getStatistics, getChartData } from '@/api'const statistics = ref([])
const chartData = ref({})onMounted(async () => {// 替换 mock 数据为真实 API 调用statistics.value = await getStatistics()chartData.value = await getChartData('monthly')
})
</script>
3. 配置环境变量
创建 .env.local 文件：
VITE_API_BASE_URL=http://your-api-server.com/api
三、扩展地图功能
1. 添加自定义图层
// 添加标注图层
const addMarkerLayer = (map, markers) => {markers.forEach(marker => {const markerObj = new T.Marker(new T.LngLat(marker.lng, marker.lat),{icon: new T.Icon({iconUrl: marker.iconUrl,iconSize: new T.Point(24, 24)})})// 添加点击事件markerObj.addEventListener('click', () => {handleMarkerClick(marker)})map.addOverLay(markerObj)})
}
2. 添加信息窗口
const showInfoWindow = (map, position, content) => {const infoWindow = new T.InfoWindow(content, {closeButton: true,autoPan: true})map.openInfoWindow(infoWindow, new T.LngLat(position.lng, position.lat))
}
3. 添加绘制功能
// 绘制多边形
const drawPolygon = (map, points) => {const polygon = new T.Polygon(points.map(p => new T.LngLat(p.lng, p.lat)),{color: '#2C58A6',weight: 2,opacity: 0.8,fillColor: '#2C58A6',fillOpacity: 0.3})map.addOverLay(polygon)return polygon
}
四、测试与调试
1. 性能调试
// 使用性能监控
import { usePerformanceMonitor } from '@/composables/usePerformanceMonitor'const { fps, memoryUsage, performanceWarnings, getPerformanceReport } = usePerformanceMonitor()// 打印性能报告
console.log(getPerformanceReport())
2. 日志调试
import { logDebug, logInfo, PerformanceTimer } from '@/utils/logger'// 详细日志（仅开发环境）
logDebug('详细调试信息', someData)// 性能计时
const timer = new PerformanceTimer('数据处理')
// ... 处理逻辑
timer.end() // 输出耗时
3. 关闭生产环境日志
在 src/config/dashboard.config.js 中配置：
logging: {enableConsoleLog: import.meta.env.DEV, // 仅开发环境启用logLevel: import.meta.env.DEV ? 'debug' : 'error'
}
五、最佳实践
1. 组件设计原则
- 单一职责 - 每个组件只负责一个功能
- 可复用性 - 通过 props 和 events 实现组件复用
- 解耦合 - 使用 Composables 分离业务逻辑
2. 性能优化建议
- 使用
v-show替代频繁切换的v-if - 大列表使用虚拟滚动
- 图表组件按需销毁
- 合理使用缓存
3. 代码规范
- 使用 ESLint 进行代码检查
- 遵循 Vue3 官方风格指南
- 组件命名使用 PascalCase
- 文件命名使用 kebab-case 或 PascalCase
六、学习资源
- Vue 3 官方文档
- Element Plus 组件库
- ECharts 图表库
- Vite 构建工具
- 天地图 API
- 和风天气 API
