Vue2 + ECharts 入门教程：四种基础图表快速上手

原创于 2026-06-19 15:52:34 发布 · 188 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#echarts #前端 #javascript

项目实战同时被 2 个专栏收录

4 篇文章

订阅专栏

Vue前端开发教程

2 篇文章

订阅专栏

前言

在数据可视化需求日益普遍的今天，ECharts 作为国内最流行的开源图表库，凭借丰富的图表类型和友好的中文文档，成为前端开发者的首选工具。本文将带你从零开始，在 Vue2 + vue-cli 项目中通过静态脚本引入的方式集成 ECharts，并实现折线图、柱状图、饼图、散点图四种最常用的基础图表。

本文采用echarts本地化部署的方式，适合不希望通过 npm 安装、离线化的入门场景。

一、环境准备

1.1 创建 Vue2 项目

确保你已安装 Node.js 和 vue-cli，执行以下命令创建项目：

vue create vue-echarts-demo

选择 Vue 2 模板，等待项目创建完成。

1.2 放置 ECharts 文件

去 ECharts 官网下载 echarts.min.js 文件（推荐 5.x 版本）
将 echarts.min.js 直接放在项目的 public 根目录下

目录结构如下：

public/

└── echarts.min.js

1.3 index.html 中引入

打开 public/index.html，在 <body> 结束标签前添加 script 引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue ECharts 入门</title>
</head>
<body>
  <div id="app"></div>
  
  <!-- 引入 ECharts -->
  <script src="<%= BASE_URL %>echarts.min.js"></script>
</body>
</html>

说明：<%= BASE_URL %> 是 vue-cli 提供的变量，会自动替换为项目的基础路径，生产环境和开发环境都能正确加载。

引入完成后，ECharts 会挂载到全局 window.echarts 上，在组件中可以直接通过 window.echarts 使用。

二、通用封装思路

在 Vue 中使用 ECharts 的标准流程分为三步：

准备一个有宽高的 DOM 容器
通过 echarts.init(dom) 初始化实例
使用 setOption(option) 传入配置项渲染图表

为了避免重复代码，我们先理解这个通用模式，后面的图表都遵循此逻辑。

三、四种基础图表示例

下面我们在单个组件中依次实现四种图表，新建 src/components/ChartDemo.vue。

3.1 基础结构

<template>
  <div class="chart-container">
    <h2>ECharts 基础图表示例</h2>
    
    <div class="chart-item">
      <h3>折线图</h3>
      <div ref="lineChart" class="chart-box"></div>
    </div>

    <div class="chart-item">
      <h3>柱状图</h3>
      <div ref="barChart" class="chart-box"></div>
    </div>

    <div class="chart-item">
      <h3>饼图</h3>
      <div ref="pieChart" class="chart-box"></div>
    </div>

    <div class="chart-item">
      <h3>散点图</h3>
      <div ref="scatterChart" class="chart-box"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChartDemo',
  data() {
    return {
      lineChart: null,
      barChart: null,
      pieChart: null,
      scatterChart: null
    }
  },
  mounted() {
    this.initLineChart()
    this.initBarChart()
    this.initPieChart()
    this.initScatterChart()
    
    // 监听窗口大小变化，自适应图表
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 组件销毁前释放图表实例
    window.removeEventListener('resize', this.handleResize)
    this.lineChart && this.lineChart.dispose()
    this.barChart && this.barChart.dispose()
    this.pieChart && this.pieChart.dispose()
    this.scatterChart && this.scatterChart.dispose()
  },
  methods: {
    handleResize() {
      this.lineChart && this.lineChart.resize()
      this.barChart && this.barChart.resize()
      this.pieChart && this.pieChart.resize()
      this.scatterChart && this.scatterChart.resize()
    },
    
    // --- 下面是四个图表的初始化方法 ---
    
    initLineChart() {
      const echarts = window.echarts
      this.lineChart = echarts.init(this.$refs.lineChart)
      
      const option = {
        title: { text: '一周销售额趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: { type: 'value' },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line',
          smooth: true
        }]
      }
      
      this.lineChart.setOption(option)
    },
    
    initBarChart() {
      const echarts = window.echarts
      this.barChart = echarts.init(this.$refs.barChart)
      
      const option = {
        title: { text: '各班级人数统计' },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['一班', '二班', '三班', '四班', '五班']
        },
        yAxis: { type: 'value' },
        series: [{
          name: '人数',
          type: 'bar',
          data: [45, 52, 38, 60, 48],
          barWidth: '40%'
        }]
      }
      
      this.barChart.setOption(option)
    },
    
    initPieChart() {
      const echarts = window.echarts
      this.pieChart = echarts.init(this.$refs.pieChart)
      
      const option = {
        title: { text: '水果销量占比' },
        tooltip: { trigger: 'item' },
        legend: { bottom: '5%' },
        series: [{
          name: '销量',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 335, name: '苹果' },
            { value: 310, name: '香蕉' },
            { value: 234, name: '橙子' },
            { value: 135, name: '葡萄' },
            { value: 148, name: '西瓜' }
          ]
        }]
      }
      
      this.pieChart.setOption(option)
    },
    
    initScatterChart() {
      const echarts = window.echarts
      this.scatterChart = echarts.init(this.$refs.scatterChart)
      
      // 模拟身高体重数据 [身高cm, 体重kg]
      const data = [
        [160, 50], [165, 55], [170, 60], [175, 65],
        [180, 70], [155, 48], [168, 58], [172, 63],
        [158, 52], [178, 68], [162, 54], [169, 62]
      ]
      
      const option = {
        title: { text: '身高体重分布' },
        tooltip: { trigger: 'item' },
        xAxis: {
          name: '身高(cm)',
          type: 'value',
          min: 150,
          max: 185
        },
        yAxis: {
          name: '体重(kg)',
          type: 'value',
          min: 40,
          max: 80
        },
        series: [{
          type: 'scatter',
          data: data,
          symbolSize: 15
        }]
      }
      
      this.scatterChart.setOption(option)
    }
  }
}
</script>

<style scoped>
.chart-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.chart-item {
  margin-bottom: 40px;
}

.chart-box {
  width: 100%;
  height: 400px;
  border: 1px solid #eee;
  border-radius: 4px;
}

h2 {
  text-align: center;
  color: #333;
}

h3 {
  color: #666;
  margin-bottom: 10px;
}
</style>

3.2 在 App.vue 中使用

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

<script>
import ChartDemo from './components/ChartDemo.vue'

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

<style>
#app {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}
</style>

四、各图表核心配置详解

4.1 折线图（Line）

折线图适合展示数据随时间变化的趋势。核心配置：

xAxis.type: 'category'：类目型 x 轴，对应日期、分类等
series.type: 'line'：指定图表类型为折线
smooth: true：开启平滑曲线，视觉更柔和

4.2 柱状图（Bar）

柱状图适合对比不同类别的数值大小。核心配置：

series.type: 'bar'：指定为柱状图
barWidth：控制柱子宽度，支持百分比和像素值
多组数据时可在 series 中添加多个对象实现分组柱状图

4.3 饼图（Pie）

饼图用于展示各部分占总体的比例。核心配置：

series.type: 'pie'：指定为饼图
radius: '50%'：饼图半径，设为数组如 ['40%', '70%'] 可变成环形图
数据格式为 { value, name } 对象数组

4.4 散点图（Scatter）

散点图用于展示两个变量之间的相关性。核心配置：

xAxis 和 yAxis 都设为 type: 'value' 数值轴
series.data 为二维数组，每项是 [x值, y值]
symbolSize 控制点的大小

五、常见问题与注意事项

5.1 图表不显示？

检查 DOM 容器是否设置了明确的高度，没有高度 ECharts 无法渲染
确认 echarts.min.js 文件路径正确，打开浏览器控制台看是否 404
初始化必须在 DOM 挂载之后，所以写在 mounted 生命周期中

5.2 窗口缩放图表不变形

通过监听 window.resize 事件，调用图表实例的 resize() 方法实现自适应。本文示例中已包含该逻辑。

5.3 数据更新后图表不刷新

当数据变化时，重新调用 setOption() 即可，ECharts 会自动合并配置并刷新：

this.lineChart.setOption({
  series: [{ data: newData }]
})

5.4 关于全局变量的 eslint 报错

如果 eslint 提示 'echarts' is not defined，可以在使用前加上 window.，或者在 eslint 配置中添加全局变量声明。本文统一使用 window.echarts 规避此问题。

六、总结

通过本文的实践，你已经掌握了：

在 vue-cli 项目中通过静态脚本引入 ECharts 的方法
ECharts 的通用使用流程：初始化 → 传配置 → 渲染
折线图、柱状图、饼图、散点图四种基础图表的配置方式
图表自适应和销毁释放的最佳实践

ECharts 的强大远不止于此，后续你可以在此基础上尝试更多图表类型、添加交互事件、自定义主题样式等。建议配合 ECharts 官方文档的示例进行学习，通过修改配置项快速掌握各种效果。

运行项目：执行 npm run serve 启动开发服务器，即可在浏览器中看到四个图表的效果。建议动手修改数据和配置项，直观感受每个参数的作用。