Vue3 + ECharts 数据可视化实战指南

一、为什么选择ECharts？

百度开源的成熟可视化库
支持30+种图表类型
完善的文档和社区支持
与Vue3完美兼容

二、环境搭建

1. 创建Vue3项目

复制代码

npm create vue@latest
# 选择TypeScript、Pinia等按需配置

2. 安装核心依赖

复制代码

npm install echarts vue-echarts @vueuse/core
# 推荐版本：
# echarts@5.4.2 
# vue-echarts@6.5.0

3. 按需引入配置（推荐）

TypeScript 复制代码

// src/plugins/echarts.ts
import { use } from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import {
  LineChart,
  BarChart,
  PieChart,
  ScatterChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components'

use([
  SVGRenderer,
  LineChart,
  BarChart,
  PieChart,
  ScatterChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
])
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ECharts from 'vue-echarts'
import './plugins/echarts'

const app = createApp(App)
app.component('VChart', ECharts)

三、四大基础图表实现

1. 响应式折线图

html 复制代码

<template>
  <VChart
    class="chart"
    :option="lineOption"
    :autoresize="true"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const lineOption = ref({
  title: { text: '用户增长趋势', left: 'center' },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['Q1', 'Q2', 'Q3', 'Q4'],
    axisLabel: { rotate: 45 }
  },
  yAxis: { name: '用户量（万）' },
  series: [{
    data: [12, 34, 56, 89],
    type: 'line',
    smooth: true,
    areaStyle: { color: '#1890ff20' },
    itemStyle: { color: '#1890ff' },
    lineStyle: { width: 3 }
  }]
})
</script>

2. 多系列柱状图

TypeScript 复制代码

const barOption = ref({
  dataset: {
    source: [
      ['产品', '2022', '2023'],
      ['手机', 4321, 5932],
      ['电脑', 2843, 3765],
      ['平板', 1567, 2891]
    ]
  },
  legend: { top: 30 },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' }
  ]
})

3. 环形饼图

TypeScript 复制代码

const pieOption = ref({
  title: { text: '市场份额', left: 'center' },
  tooltip: { trigger: 'item' },
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    label: { show: true, formatter: '{b}: {d}%' },
    data: [
      { value: 1048, name: '阿里云' },
      { value: 735, name: '腾讯云' },
      { value: 580, name: '华为云' }
    ]
  }]
})

4. 散点图（带回归线）

TypeScript 复制代码

const scatterOption = ref({
  xAxis: { name: '广告投入（万）' },
  yAxis: { name: '销售额（万）' },
  dataset: {
    source: [
      [10, 30],
      [15, 42],
      [20, 55],
      [25, 68],
      [30, 80]
    ]
  },
  series: [
    {
      type: 'scatter',
      symbolSize: 12
    },
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
      lineStyle: { type: 'dashed' }
    }
  ]
})

四、高级技巧

1. 动态更新数据

TypeScript 复制代码

const updateChart = () => {
  lineOption.value.series[0].data = 
    Array.from({length:4}, () => Math.random()*100)
}

2. 主题切换

TypeScript 复制代码

import { registerTheme } from 'echarts/core'

registerTheme('dark', {
  backgroundColor: '#1a1a1a',
  textStyle: { color: '#fff' }
})

// 使用时
<VChart :theme="isDark ? 'dark' : 'light'" />

3. 性能优化

html 复制代码

<VChart 
  :style="{ height: '400px' }"
  :autoresize="true"
  :update-options="{ notMerge: true }"
  :debounceDelay="300"
/>

五、常见问题

Q1：图表不显示？

检查容器高度是否为0
查看控制台报错
确保正确引入组件

Q2：如何响应式布局？

使用autoresize属性
外层容器使用响应式单位（vw/%）
配合@vueuse/core的useResizeObserver

Q3：大数据量卡顿？

开启数据采样（sampling）
使用大数据模式（large: true）
开启渐变动画（animation: true）

项目源码 ：GitHub示例仓库

如果对你有帮助，请帮忙点个赞