Vue-ECharts v6 发布了

前端开发等 3 个话题下的优秀答主

107 人赞同了该文章

了解 ECharts 的同学应该知道，ECharts 在近期发布了 5.0 新版本，在多个方面都有了很多改进。之前看到 @逍为发布了新版本的 ECharts for React，可能也会有同学好奇 Vue 版本的组件什么时候可以更新，所以在发布了若干个 beta 版本以后，我觉得也差不多可以发出发布公告了。

GitHub: ecomfe/vue-echarts
Demo: Vue.js component for Apache ECharts.

主要变化

基于新发布的 Apache ECharts 5
同时支持 Vue 2 / 3
使用 TypeScript 开发

迁移指南

参见_迁移到 v6_。

关于新版本

同时支持 Vue 2 / 3

基于 @Anthony Fu 的 vue-demi 项目开发，是开发兼容 Vue 2 / 3 项目的必备工具。原理是通过 postinstall 脚本自动根据环境 Vue 版本切换对应引用并抹平模块接口差异。

对齐 ECharts 接口

在之前的版本中，Vue-ECharts 稍微修改了一些 ECharts 对外暴露的参数、方法名称（比如将 option 改为 options），而在新版本中，我们决定回归 ECharts 原本的接口，使开发者在查阅文档时可以直接对应 ECharts 的文档而不会感到困惑。

提供 provide 注入能力

对于图表的常见设置：初始化配置（init 参数）、更新配置（setOption 参数）、加载配置（showLoading 参数）、主题），新版本 Vue-ECharts 提供了在上层统一 provide 配置的能力，同时支持单个组件通过 prop 覆盖，以提供更好的便利性。

默认样式

之前版本中，我们提供了 600×400 的默认尺寸，但这个尺寸往往需要用户手动覆盖，而且通过 CSS 覆盖样式的用户还需要特别注意选择器的优先级，之前也有遇到过因为打包前后样式顺序差异导致的问题。新版本中，我们将默认尺寸修改为 100%×100%，并且通过一个自定义标签定义，这样用户只需要写单 class 选择器就能可靠地重写组件的默认样式了。