vue图表表格实现
Vue 图表与表格实现方案
图表实现（基于 ECharts）
安装 ECharts 依赖：
npm install echarts --save基础折线图组件示例：
<template>
<div ref="chartDom" style="width: 600px; height: 400px"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
const chart = echarts.init(this.$refs.chartDom);
chart.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: { type: 'value' },
series: [{
data: [820, 932, 901, 934, 1290],
type: 'line'
}]
});
}
}
</script>响应式处理方案：
window.addEventListener('resize', () => {
chart.resize();
});表格实现（基于 Element UI）
安装 Element UI：
npm install element-ui --save基础表格组件示例：
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区'
},{
date: '2016-05-04',
name: '李小狼',
address: '北京市海淀区'
}]
}
}
}
</script>高级功能实现
表格分页控制：
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>图表异步数据加载：
async fetchChartData() {
const res = await axios.get('/api/chart-data');
this.chart.setOption({
series: [{
data: res.data
}]
});
}性能优化建议
表格大数据量处理：
- 使用虚拟滚动（如 vue-virtual-scroller）
- 实现分页加载
- 固定列宽减少重排
图表优化方案：
- 按需导入 ECharts 模块
- 使用 dataset 管理数据
- 适当降低动画效果
移动端适配方案
响应式表格处理：
@media screen and (max-width: 768px) {
.el-table__body-wrapper {
overflow-x: auto;
}
}触摸事件支持：
chart.on('click', params => {
console.log(params.data);
});常见问题解决方案
图表不显示排查：
- 检查 DOM 容器宽度高度是否为 0
- 验证数据格式是否符合要求
- 确认 ECharts 实例化时机
表格渲染异常处理：
- 检查数据响应性（Vue.set）
- 验证 column 定义是否完整
- 排查样式冲突问题
