首发于浮云
Vue-ECharts v6 发布了

Vue-ECharts v6 发布了

了解 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 Fuvue-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 选择器就能可靠地重写组件的默认样式了。

最后

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

编辑于 2021-03-08 18:57