在 Vue 3 中集成 ECharts：打造交互式数据可视化

本文链接：https://blog.csdn.net/qbit2coding/article/details/137091004

本文详细介绍了如何在Vue3项目中集成开源可视化库ECharts，包括环境设置、安装、组件引入、使用实例以及高级配置，帮助开发者实现丰富的数据可视化功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序。ECharts 是一个使用 JavaScript 实现的开源可视化库，能够轻松地创建各种类型的图表和数据可视化。
在 Vue 3 中集成 ECharts 可以让您利用 Vue 的响应式系统和组件化特性，同时享受 ECharts 提供的丰富图表类型和强大的交互功能。以下是一个关于如何在 Vue 3 中集成 ECharts 的技术教程。

1. 环境准备

确保您已经安装了 Node.js 和 npm，并且您的开发环境中已经安装了 Vue 3。如果没有，请先进行安装。接下来，通过 Vue CLI 创建一个新的 Vue 3 项目：

npm install -g @vue/cli
vue create my-vue3-app
cd my-vue3-app

2. 安装 ECharts 和 Vue ECharts 组件

在项目中安装 ECharts 和 vue-echarts 组件：

npm install echarts vue-echarts

3. 引入 ECharts 组件

在您的 Vue 项目的组件中引入 ECharts。首先，在 src/components 目录下创建一个名为 ECharts.vue 的新文件：

<template>
  <div ref="chart" :style="{width: '100%', height: '400px'}"></div>
</template>

<script>
import * as echarts from 'echarts';
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  name: 'ECharts',
  setup() {
    onMounted(() => {
      // 初始化图表
      const chart = echarts.init(document.getElementById('chart'));

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option);
    });
  }
});
</script>

4. 在父组件中使用 ECharts 组件

现在您可以在任何 Vue 3 组件中使用 ECharts 组件了。例如，在 src/App.vue 中使用：

<template>
  <div id="app">
    <ECharts />
  </div>
</template>

<script>
import ECharts from './components/ECharts.vue';

export default {
  name: 'App',
  components: {
    ECharts
  }
};
</script>