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
        }
      }
    }
  }
}