当前位置：首页 > VUE

vue实现exs图表

2026-01-18 01:42:02VUE

Vue 中实现 ECharts 图表

在 Vue 项目中集成 ECharts 图表库可以通过以下步骤完成：

安装 ECharts 依赖 通过 npm 或 yarn 安装 ECharts：

npm install echarts --save
# 或
yarn add echarts

全局或局部引入 ECharts 在 Vue 组件中引入 ECharts：

import * as echarts from 'echarts';

创建图表容器 在模板中添加一个用于渲染图表的 DOM 元素：

<template>
  <div id="chart-container" style="width: 600px; height: 400px;"></div>
</template>

初始化图表 在 Vue 的 mounted 生命周期钩子中初始化图表：

export default {
  mounted() {
    const chartDom = document.getElementById('chart-container');
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: '示例图表'
      },
      tooltip: {},
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      series: [{
        name: '数据',
        type: 'bar',
        data: [5, 20, 36, 10, 15]
      }]
    };
    myChart.setOption(option);
  }
};

使用 Vue-ECharts 封装组件

为了更方便地在 Vue 中使用 ECharts，可以封装一个可复用的图表组件：

创建 ChartComponent.vue

<template>
  <div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    options: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartRef);
      this.chart.setOption(this.options);
    }
  },
  watch: {
    options: {
      handler(newVal) {
        if (this.chart) {
          this.chart.setOption(newVal);
        }
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};
</script>

在父组件中使用

<template>
  <ChartComponent :options="chartOptions" />
</template>

<script>
import ChartComponent from './ChartComponent.vue';

export default {
  components: { ChartComponent },
  data() {
    return {
      chartOptions: {
        title: { text: '动态图表' },
        xAxis: { data: ['Q1', 'Q2', 'Q3', 'Q4'] },
        yAxis: {},
        series: [{ type: 'line', data: [120, 200, 150, 80] }]
      }
    };
  }
};
</script>

响应式调整图表大小

为了使图表能够响应窗口大小变化，可以添加以下代码：

methods: {
  handleResize() {
    if (this.chart) {
      this.chart.resize();
    }
  }
},
mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

按需引入 ECharts 模块

为了优化打包体积，可以按需引入 ECharts 的模块：

import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  LineChart,
  CanvasRenderer
]);

常见图表类型示例

折线图

const option = {
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
  yAxis: { type: 'value' },
  series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }]
};

饼图

const option = {
  series: [{
    type: 'pie',
    data: [
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' }
    ]
  }]
};

地图

const option = {
  series: [{
    type: 'map',
    map: 'china',
    data: [
      { name: '北京', value: 100 },
      { name: '上海', value: 200 }
    ]
  }]
};