elementui图表
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>响应式处理建议
为图表容器添加响应式样式：
.chart-container {
width: 100%;
height: 400px;
min-width: 300px;
}监听窗口变化时重置图表尺寸：
window.addEventListener('resize', () => {
if (this.chartInstance) {
this.chartInstance.resize();
}
});主题定制技巧
ECharts 支持主题定制：
// 注册主题
echarts.registerTheme('customTheme', {
backgroundColor: '#f5f5f5',
color: ['#c23531','#2f4554','#61a0a8']
});
// 使用主题
echarts.init(dom, 'customTheme');Chart.js 可通过配置对象定制：
options: {
plugins: {
legend: {
labels: {
font: {
family: 'Arial',
size: 14
}
}
}
}
}
