🔥前端必看！Vue3 + TypeScript 项目也能优雅用上 ECharts，图表类型提示超丝滑！

: john 在知识的海洋中遨游

0 人点赞了该文章 · 100 浏览

💡 简介：

最近在做可视化项目，发现 ECharts 原来在 Vue3 + TS 里用起来这么顺！不仅有官方类型支持，连 option 配置都能自动补全、报错提示贼强！适合做仪表盘、折线图、K线图、地图都不在话下～
顺手封装个组件，代码整洁还高复用，真的太爱了！

Vue 3 + TypeScript 项目中是完全可以使用 ECharts 的，并且有良好的类型支持。ECharts 从 v5 开始已经提供了完整的 TypeScript 类型定义，因此在 Vue3 项目中可以很好地结合使用。

✅ 一、安装 ECharts

在你的 Vue3 + TS 项目中执行：

bash
npm install echarts

✅ 二、基础用法示例（Vue3 + TS）

1. 创建组件 `EchartDemo.vue`

vue
<template>
  <div ref="chartRef"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref, onBeforeUnmount } from 'vue'

const chartRef = ref<HTMLElement | null>(null)
let myChart: echarts.ECharts | null = null

onMounted(() => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)

    const option: echarts.EChartsOption = {
      title: {
        text: '折线图示例'
      },
      tooltip: {},
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'line',
          data: [150, 230, 224, 218, 135, 147, 260]
        }
      ]
    }

    myChart.setOption(option)
  }
})

onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose()
  }
})
</script>

✅ 三、类型提示支持

echarts.EChartsOption：是官方的配置项类型（强类型校验）。
所有组件、图表类型等都有完整的类型提示，使用更安全、更方便。

✅ 四、常见建议

封装成组件：可以封装一个通用的 <BaseChart /> 组件，接收 option、theme 等参数。
自适应窗口大小：监听 resize 调用 chart.resize()。
异步数据更新：在 watch 中更新 chart.setOption() 即可。

✅ 五、官方文档与类型支持

官网：https://echarts.apache.org/
类型定义：node_modules/echarts/types/ 中有完整定义，或查看 DefinitelyTyped

✅ 六、TSX / Vue+TS 开发推荐用法

对于严格类型项目，也可以导出 chart 实例并使用组合式 API 控制生命周期和数据更新，非常适合复杂交互。