elementui chart
ElementUI 图表集成方案
ElementUI 本身不提供内置图表组件，但可以通过集成第三方库（如 ECharts 或 Chart.js）实现数据可视化功能。
集成 ECharts
安装 ECharts 依赖：
npm install echarts --save在 Vue 组件中引入并使用：
<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({
title: { text: '示例图表' },
tooltip: {},
xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
yAxis: {},
series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 15] }]
});
}
};
</script>集成 Chart.js
安装 Chart.js 依赖：
npm install chart.js --save创建 Vue 组件：
<template>
<canvas ref="chartCanvas"></canvas>
</template>
<script>
import { Chart } from 'chart.js';
export default {
mounted() {
new Chart(this.$refs.chartCanvas, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: '数据集',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
]
}]
}
});
}
};
</script>响应式处理
添加窗口大小变化监听：
mounted() {
this.initChart();
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.chart.resize();
}
}主题定制
使用 ECharts 主题：
import * as echarts from 'echarts';
import theme from 'echarts/theme/dark';
echarts.registerTheme('dark', theme);
const chart = echarts.init(this.$refs.chartDom, 'dark');性能优化
对于大数据量场景：
series: [{
type: 'scatter',
large: true,
largeThreshold: 500,
data: [...]
}]注意事项
- 确保在组件销毁时清理图表实例
- 动态数据更新需要调用 setOption 方法
- 移动端显示可能需要额外 viewport 配置
- 图表容器必须指定明确的宽高尺寸
