Vue2整合Echarts实现柱状图与饼图可视化：安装配置与主题使用

脚本专家 发表于 2026-6-12 18:00:02

本文记录在 Vue 2 项目中整合 ECharts 实现基本数据可视化的流程，包括柱状图、饼图的渲染以及自定义主题的下载与应用。以下步骤基于实际项目经验，覆盖从依赖安装到图表渲染的完整过程。

1. 安装 ECharts 依赖

在项目根目录下运行 npm 命令安装 ECharts 包：

npm install echarts -S

安装完成后，推荐在 Vue 的入口文件 main.js 中全局引入并挂载到 Vue 原型上，以便在所有组件中通过 this.$echarts 直接调用。

// main.js
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

2. 创建容器与初始化图表

在任意组件中准备一个用于放置图表的 div 容器，并设置宽高。

<div>
<div class="echart-box" ref="box"></div>
</div>

使用 scoped 样式约束容器尺寸，边框仅用于开发调试：

.echart-box {
width: 500px;
height: 350px;
border: 3px solid pink;
margin: 20px auto;
}

在组件 mounted 钩子中通过 $refs 获取 DOM 元素，并调用 echarts.init 初始化实例。

const userdom = this.$refs.box
const mycart = this.$echarts.init(userdom)

3. 绘制柱状图

以 ECharts 官方示例中的基础柱状图为例，配置 xAxis、yAxis 及 series 数据。

const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: ,
type: 'bar',
showBackground: true,
backgroundStyle: {
   color: 'rgba(180, 180, 180, 0.2)'
}
}]
}
mycart.setOption(option)

showBackground 和 backgroundStyle 用于在柱状图柱子背后显示浅色底块，增强视觉效果。setOption 方法将配置应用到实例上。

4. 绘制饼图

使用相同思路绘制饼图，在组件中创建第二个容器（ref="boxpie"）并初始化。

const mypie = this.$echarts.init(this.$refs.boxpie)
mypie.setOption({
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
   { value: 1048, name: 'Search Engine' },
   { value: 735, name: 'Direct' },
   { value: 580, name: 'Email' },
   { value: 484, name: 'Union Ads' },
   { value: 300, name: 'Video Ads' }
],
emphasis: {
   itemStyle: {
   shadowBlur: 10,
   shadowOffsetX: 0,
   shadowColor: 'rgba(0, 0, 0, 0.5)'
   }
}
}]
})

emphasis 配置用于鼠标悬停时的高亮阴影效果。

5. 主题下载与使用

默认样式较普通，可以从 ECharts 主题下载页面（https://echarts.apache.org/zh/theme-builder.html）选择并下载 JS 主题文件，例如 vintage.js。将下载的 JS 文件放在项目 assets 目录中（如 src/assets/vintage.js），在组件中引入：

import '@/assets/vintage.js'

然后在 init 方法中传入主题名称作为第二个参数：

const mycart = this.$echarts.init(userdom, 'vintage')
const mypie = this.$echarts.init(this.$refs.boxpie, 'vintage')

应用主题后，图表的配色和样式会随之变化。

6. 完整组件示例

将上述步骤整合到一个 Vue 单文件组件中，最终代码如下：

<template>
<div style="display: flex; justify-content: space-around;">
<div class="echart-box" ref="box"></div>
<div class="echart-box" ref="boxpie"></div>
</div>
</template>

<script>
import '@/assets/vintage.js'
export default {
mounted() {
this.showEcarts()
},
methods: {
showEcarts() {
   // 柱状图
   const userdom = this.$refs.box
   const mycart = this.$echarts.init(userdom, 'vintage')
   mycart.setOption({
   xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   yAxis: {
      type: 'value'
   },
   series: [{
      data: ,
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
         color: 'rgba(180, 180, 180, 0.2)'
      }
   }]
   })

   // 饼图
   const mypie = this.$echarts.init(this.$refs.boxpie, 'vintage')
   mypie.setOption({
   title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
   },
   tooltip: {
      trigger: 'item'
   },
   legend: {
      orient: 'vertical',
      left: 'left'
   },
   series: [{
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
         { value: 1048, name: 'Search Engine' },
         { value: 735, name: 'Direct' },
         { value: 580, name: 'Email' },
         { value: 484, name: 'Union Ads' },
         { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
         itemStyle: {
         shadowBlur: 10,
         shadowOffsetX: 0,
         shadowColor: 'rgba(0, 0, 0, 0.5)'
         }
      }
   }]
   })
}
}
}
</script>

<style scoped>
.echart-box {
width: 500px;
height: 350px;
border: 3px solid pink;
margin: 20px;
}
</style>

总结

本文展示了在 Vue 2 项目中整合 ECharts 并渲染柱状图和饼图的核心步骤：安装依赖、全局注入、初始化实例、配置 option 以及应用第三方主题。这套流程同样适用于折线图、散点图等其他图表类型，只需根据 ECharts 官方示例调整 series.type 和相关配置即可。对于生产环境，建议将主题文件打包而非在运行时动态加载，以减少请求次数。

热心网友7 发表于 2026-6-12 18:10:00

Re: Vue2整合Echarts实现柱状图与饼图可视化：安装配置与主题使用

感谢分享！这个教程步骤非常清晰，从安装到柱状图、饼图的渲染再到主题应用，都讲得很直观。特别是把主题文件放在 assets 里引入这种方式，之前我直接放在 public 下总出问题，按你的方法再试一下。另外想请教一下，如果图表容器需要在窗口变化时自适应，有没有推荐的 resize 处理方式？在 mounted 里加监听会不会有性能隐患？

热心网友6 发表于 2026-6-19 00:10:05

Re: Vue2整合Echarts实现柱状图与饼图可视化：安装配置与主题使用

感谢分享，很实用的教程！步骤清晰，从安装到主题应用都覆盖了，对新手很友好。我有个小疑问：如果数据是异步加载的，比如通过接口获取后更新图表，是否需要在 `setOption` 前先清空之前的数据？或者直接用新的 option 覆盖就行？另外，在组件销毁时调用 `dispose()` 释放资源是必要的吧，楼主有没有遇到内存泄漏的问题？

热心网友1 发表于 2026-6-19 09:05:00

Re: Vue2整合Echarts实现柱状图与饼图可视化：安装配置与主题使用

感谢分享这么详细的教程！正好最近准备在Vue2项目里集成图表，步骤很清晰，从安装到主题应用都覆盖了，直接照着做就能跑起来。有个小问题想请教：容器设置了固定宽高（500px × 350px），如果页面需要自适应，有没有好的处理方式？比如用 resize 事件刷新图表？期待交流～

页: [1]

红客联盟 - 由08小组运营's Archiver