Vue ECharts 8.0 发布了

距离 Vue ECharts 的上一次大版本发布已经一年多了，这一次借着 ECharts 6 正式发布的契机，我们也顺势发布了 Vue ECharts 的 8.0 版本。它不仅提供了新版本的 ECharts 的支持，同时也在功能、开发体验上加入了全新功能，并且对工程链路做了全面现代化重构。

官网：https://vue-echarts.dev

GitHub：https://github.com/ecomfe/vue-echarts

ECharts 6 支持

ECharts 6 带来了全新的主题、新的系列和布局机制，是官方近年来最重要的一次更新。我们为 Vue ECharts 适配了 ECharts 6 的新功能，并且将依赖的 ECharts 版本也更新为了 6.0.0 以上。想了解 ECharts 6 的具体特性，建议直接阅读官方的新版功能介绍，在此不再赘述。

停止支持 Vue 2

我们在支持 ECharts 6 的同时，选择同步放弃 Vue 2 支持。Vue 2 已经在 2023 年底到达终止支持时间，在 Vue ECharts 8.0 放弃 Vue 2 可以让我们移除对 vue-demi 的依赖、提供更一致的类型并且简化打包流程，从而提高库的稳定性和可维护性。如果你依然要在 Vue 2 项目中使用，请继续使用 Vue ECharts 7 。

tooltip 和 dataView 插槽支持

在 ECharts 中，自定义 tooltip 内容需要编写 formatter(params) 返回 HTML 字符串或 DOM 节点，自定义数据视图则要在 option.toolbox.feature.dataView.optionToContent(opt) 中做类似处理 。这一模式既不易复用，也难以与 Vue 的声明式渲染相结合。Vue ECharts 8.0 为这两个功能引入了插槽 API ，将这些回调映射为模板插槽。你可以在组件内写：

<VChart :option="option">
  <template #tooltip="p">
    <div class="tooltip">
      <span v-html="p.marker" />
      <strong>{{ p.seriesName }}</strong><br/>
      {{ formatDate(p.name) }}: {{ formatNumber(p.value) }}
      <HolidayBadge v-if="isHoliday(p.name)" />
    </div>
  </template>
  <template #dataView="opt">
    <table>
      <tbody>
        <tr v-for="(v, i) in opt.series?.[0]?.data ?? []" :key="i">
          <td>{{ opt.xAxis?.[0]?.data?.[i] ?? i }}</td>
          <td>{{ v }}</td>
        </tr>
      </tbody>
    </table>
  </template>
</VChart>

这样，你就可以直接在 Vue 模板中使用计算属性、条件渲染及组件组合，利用 Vue 的响应式更新同步管理原本依赖字符串拼接和手工操作 DOM 的内容。这是新版本对开发体验提升最明显的功能之一，欢迎大家升级体验。

利用新 API ，短短几行代码即可实现在 tooltip 中渲染嵌套图表

智能更新

除了插槽，我们还为数据更新设计了智能更新策略。默认情况下，当 option 改变时，Vue ECharts 会分析数据更新的差异，决定哪些对象需要合并、哪些需要替换，自动设置 replaceMerge；如果操作风险较大则采用 notMerge: true。若需要完全控制更新逻辑，仍可通过 update-options 或开启 manual-update 来进行手动控制。

删除 CSP 入口

此前我们提供了专用的 vue-echarts/csp 入口，以便在启用严格 CSP 时或者 SSR 环境下加载无内联样式的版本。我们在 8.0 移除了该入口，并提供了一个新的在运行时注入内联样式的方案，在绝大多数情况下都不再需要提供无样式版本并在应用中手动引入样式文件。仅当你同时启用严格的 CSP 且目标浏览器不支持 CSSStyleSheet() API 时，才需要手动引入 vue-echarts/style.css。这意味着绝大部分项目可以直接使用默认入口，不再需要为 CSP 维护额外配置。

工程化更新

Vue ECharts 至今已有九年历史。长时间积累的工程配置与依赖在现代前端环境下显得陈旧。本次版本更新中，我们重构了项目的工具链和相关配置，将构建、测试和发布流程全面现代化：

• 升级到 ESLint flat config
• 库本身从 Rollup 切换到使用 tsdown 构建
• 从为了同时兼容 Vue 2/3 而手写的类型声明迁移到自动生成
• 迁移到 npm trusted publishing
• Demo 站点从 webpack + Vue CLI 迁移到 Vite （ rolldown-vite ）
• 接入了 Renovate ，自动更新依赖
• 新增了基于 Vitest 的单元测试，并借助 Codex 和 Copilot 的 coding agent 实现了 100% 的分支覆盖率

这些改动主要集中在维护者和工具链层面，对 API 使用者影响有限，但意味着长期使用该库的项目可以在更现代的基础上继续前进。

新版官网

借助 AI 和 Vibe coding ，我们为 Vue ECharts 的官网进行了一次设计更新，希望大家能喜欢。主要改动如下：

• 官网设计改版
• 新增深色模式支持
• 在 import 代码生成器中，使用 Monaco editor 代替之前的原生 <textarea> + esbuild-wasm + Highlight.js 的方案

项目主页

深色模式 + import 代码生成器

团队与维护

Last but not least ，在 8.0 设计、迭代、发布的过程中，我们迎来了新的团队成员 @kingyue737，可以说他主导了 8.0 版本大部分功能的实现，包括插槽 API 的实现、工具链的重构升级等等。有兴趣的话可以在 GitHub 上关注他：https://github.com/kingyue737

最后

欢迎大家尝试使用新版本，并且通过 GitHub issue 反馈问题和建议。