ECharts 5 升级指南_ngx-echarts升級-程序员宅基地

技术标签: # Apache ECharts教程  

更多关于Apache ECharts的文档,请阅读:

《Apache ECharts教程》


本指南面向那些希望将 echarts 4.x(以下简称 v4)升级到 echarts 5.x(以下简称 v5)的用户。大家可以在 ECharts 5 新特性 中了解这次v5带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,v5 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,v5 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使用(当然,我们尽量兼容了这些改动)。我们会在这篇文档里尽量详尽得解释这些改动。

因为我们在 v5.0.1 增加了新的按需引入接口,所以本文档基于 v5.0.1 或者更高的版本。

非兼容性改变

默认主题(theme)

首先是默认主题的改动,v5 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:

chart.setOption({
    
    color: [
        '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
        '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
    ],
    // ...
});

或者,做一个简单的 v4 主题:

var themeEC4 = {
    
    color: [
        '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
        '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
    ]
};
var chart = echarts.init(dom, themeEC4);
chart.setOption(/* ... */);

引用 ECharts

去除 default exports 的支持

如果使用者在 v4 中这样引用了 echarts:

import echarts from 'echarts';
// 或者按需引入
import echarts from 'echarts/lib/echarts';

这两种方式,v5 中不再支持了。

使用者需要如下更改代码解决这个问题:


import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';
按需引入

在 5.0.1 中,我们引入了新的按需引入接口

import * as echarts from 'echarts/core';
import {
     BarChart } from 'echarts/charts';
import {
     GridComponent } from 'echarts/components';
// 注意,新的接口中默认不再包含 Canvas 渲染器,需要显示引入,如果需要使用 SVG 渲染模式则使用 SVGRenderer
import {
     CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, GridComponent, CanvasRenderer]);

如果之前是使用import 'echarts/lib/chart/bar’引入,新的接口对应的是import {BarChart} from 'echarts/charts';
为了方便大家了解自己的配置项需要引入哪些模块,我们新的示例编辑页面添加了生成按需引入代码的功能,大家可以在示例编辑页的完整代码标签下选中按需引入后查看需要引入的模块以及相关代码。

在大部分情况下,我们都推荐大家尽可能用这套新的按需引入接口,它可以最大程度的利用打包工具 tree-shaking 的能力,并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法,之前的方式我们也依旧是支持的:

const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/component/grid');

其次,因为我们的源代码已使用 TypeScript 重写,v5 将不再支持从 echarts/src 引用文件,需要改为从echarts/lib引入。

依赖调整

注意:该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者,如果是全量引入的不需要关注

为了保证 tree-shaking 后的体积足够小,我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候,CanvasRenderer将不再被默认引入,这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来,除此之外,还有下面这些依赖的改动:

  • 在使用折线图,柱状图中不再默认引入直角坐标系组件,因此之前使用下面的引入方式
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');

需要再单独引入grid组件

require('echarts/lib/component/grid');

参考 issue:#14080, #13764

  • 默认不再引入aria组件,如果需要的话可以手动引入。
import {
     AriaComponent } from 'echarts/components';
echarts.use(AriaComponent);

或者:

require('echarts/lib/component/aria');

去除内置的 geoJSON

v5 移除了内置的 geoJSON(原先在 echarts/map 文件夹下)。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们,可以去从老版本中得到,或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。

浏览器兼容性

v5 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 VML 渲染器 来着实现 IE8 的兼容。如果使用者确实有很强的需求,那么欢迎提 pull request 来升级 VML 渲染器,或者单独维护一个第三方 VML 渲染器,我们从 v5.0.1 开始支持注册独立的渲染器了。

ECharts 配置项调整

视觉样式设置的优先级改变

v5 对调了 visualMap 组件 和 itemStyle | lineStyle | areaStyle 的视觉样式优先级。

具体来说,v4 中,visualMap 组件 中生成的视觉样式(如,颜色、图形类型、图形尺寸等)的优先级,比开发者在 itemStyle | lineStyle | areaStyle 中设置的样式的优先级高,也就是说如果他们同时设置的话,前者会生效而后者不会生效。这带来了些麻烦:假如使用者在使用 visualMap 组件 时,又想针对某个数据项对应的图形,设置 itemStyle 样式,则做不到。v5 中于是提高了 itemStyle | lineStyle | areaStyle 的优先级,使他们能生效。

在绝大多处情况下,这个变化并不会带来什么影响。但是为保险起见,使用者在升级 v4 到 v5 时,还是可以检查下,是否有同时使用 visualMap 和 itemStyle | lineStyle | areaStyle 的情况。

富文本的 padding

v5 调整了 rich.?.padding 的格式使其更符合 CSS 的规范。v4 里,例如 rich.?.padding: [11, 22, 33, 44] 表示 padding-top 是 33 且 padding-bottom 是 11。在 v5 中调整了上下的位置,rich.?.padding: [11, 22, 33, 44] 表示 padding-top 是 11 且 padding-bottom 是 33。

如果使用者有在使用 rich.?.padding,需要注意调整下这个顺序。

ECharts 的相关扩展

如果想要升级到 v5 ,下面这些扩展需要升级到最新的版本实现兼容。

  • echarts-gl
  • echarts-wordcloud
  • echarts-liquidfill

不再推荐使用的 API

一些 API(包括接口调用,事件监听和配置项)在 v5 中不再推荐使用。当然,使用者仍然可以用他们,只是会在 dev 模式下,在 console 中打印一些 warning,并不会影响功能。但是从长远维护考虑,我们还是推荐升级成新的 API。

下面是不再推荐使用的 API 以及推荐的新 API:
详情参见 ECharts 5 升级指南

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_52265084/article/details/118192207

智能推荐

freeRTOS学习 — 事件标志组,很好用哦!!!_freertos里成功标志位用什么好-程序员宅基地

文章浏览阅读1.4k次。freeRTOS中还有一种可以用于任务之间同步的手段 — 事件标志组。_freertos里成功标志位用什么好

cad命令栏怎么调出来_中望CAD菜单栏和功能栏都消失怎么办-程序员宅基地

文章浏览阅读4.9k次。在我们使用中望CAD的时候,有时候会发现菜单栏和功能栏都消失不见了,这时候我们很多操作习惯可能就可能无法实现,当遇到这个问题我们该怎么办了?首先,我使用中望CAD安装包进行重新安装,但是还是没有作用,这时候可能确认的是并非软件问题,而是我们操作中出现的问题。第二,我们可以选择的方法有两种,第一就是用命令行输入命令去解决,第二就是使用我们常用的鼠标去进行操作。(1)用命令行的方法:1、在中望CAD..._中望cad命令栏不见了

xmysql:可为MySql生成REST API的神奇命令_mysql x devapi-程序员宅基地

文章浏览阅读1.5w次,点赞2次,收藏14次。原文:xmysql: one command to generate REST APIs for any MySql database 作者:o1lab 翻译:Vincent为什么用这个命令?为MySql数据库快速生成REST API,而且还不遵循诸如rails、django等框架的约定,这可能是一种不太受欢迎的冒险行为。 但是也正因为如此。该命令的功能都是由node packa_mysql x devapi

【java web毕业设计】 基于opencv与SVM的车牌识别系统_车牌识别 毕业设计 web-程序员宅基地

文章浏览阅读68次。基于opencv与SVM的车牌识别系统用python3+opencv3做的中国车牌识别,包括算法和客户端界面,只有2个文件,surface.py是界面代码,predict.py是算法代码,界面不是重点所以用tkinter写得很简单。python3.7.3opencv4.0.0.21numpy1.16.2TkinterPIL5.4.1算法思想来自于网上资源,先使用图像边缘和车牌颜色定位车牌,再识别字符。由于训练样本有限,测试时会发现,车牌字符识别,可能存在误差,尤其是第一个中文字符出现的误差概率较大_车牌识别 毕业设计 web

计算机系统要素-从零开始构建现代计算机-答案_计算机系统要素:从零开始构建现-程序员宅基地

文章浏览阅读1.6k次,点赞3次,收藏16次。关于这本书的好处 豆瓣上已经有一堆人说了 我就不重复了 直接附上项目答案练习题答案全套工具这本书的PDF可以百度自己下载内容简介本书通过展现简单但功能强大的计算机系统之构建过程,为读者呈现了一幅完整、严格的计算机应用科学大图景。本书作者认为,理解计算机工作原理的最好方法就是亲自动手,从零开始构建计算机系统。通过12个章节和项目来引领读者从头开始,本书逐步地构建一个基本的硬件平台和现代..._计算机系统要素:从零开始构建现

VMware虚拟机上Ubuntu与Windows XP文件共享_vmmuyub-程序员宅基地

文章浏览阅读3.4k次。现在使用虚拟机的人越来越多,它的确给我们带来了很大的方便。但是其中总会有一些问题困扰着我们,今天我就给大家讲一讲我的一点小小的经验。关于VMware虚拟机上Ubuntu与Windows XP文件共享的问题! 我的情况:本人电脑系统为Windows XP,在该系统上装了VMware 6.0虚拟机,并在虚拟机上安装了Ubuntu 9.04。最终实现了两系统的文件共享!(其他系统大同小略) 进入正题,以下为详细步骤: 一. 首先确保你的虚拟系统正确安装了VMware-Tools,并_vmmuyub

随便推点

webstorm 扩大内存_webstorm设置内存-程序员宅基地

文章浏览阅读1.1k次。个人感知-----vs/ws对于vscode 总是很多东西操作不熟练 还是喜欢用wenstorm ,可视化能力简直不要太好!!!但是不得不承认ws真的巨慢巨卡,尤其是公司电脑配置不高的情况下 更是恼火5分钟改个bug 提代码用了半小时。面对测试及其他人的冷眼斜视,我很无奈!!!更改一下内存设置,默认值为2M多一点 ,也是太慢好不好!所以玩命加!!!只能说还有是有点点效果的 操作切换分支时没有那么卡 持续找解决办法。。。。。..._webstorm设置内存

python docx官网_Python操作docx文档-程序员宅基地

文章浏览阅读1.2k次。最近学 Python 的一部分原因是我想用Python的docx包来写一个自动化生成word报告的脚本(需求产生动力),本来是打算用rmarkdown来出报告的,其对网页版支持比较好(样式也好看),对PDF支持也不错(毕竟可以依靠latex),但是对于word的可操作性并是不很好(可能使用的比较粗糙);最后听人说Python的docx包不错,专门对于window下的word进行操作,所以尝试下对于..._python word处理 官网

Un*、Id分别突变情况下单闭环直流调速系统仿真-程序员宅基地

文章浏览阅读1.7k次,点赞2次,收藏9次。P、PI调节器在直流电机调速上的MATLAB SIMULINK仿真分析

Kafka ACL(SASL/SCRAM-SHA-256)动态权限管理【windows】-程序员宅基地

文章浏览阅读2.1k次。Window系统下配置Kafka ACL SASL/SCRAM-SHA-256 模式动态权限管理_scram-sha-256

cad字体修改方案分享-缺少SHX字体、替换字体_cad缺少字体如何用万能字体替换-程序员宅基地

文章浏览阅读1.3w次,点赞3次,收藏13次。本文提供了cad缺少SHX字体时的解决方案,对于饱受每次打开都被提醒更换字体的兄弟有较大帮助。_cad缺少字体如何用万能字体替换

干货分享:在Windows下使用Visual Studio搭建C语言开发环境_visual studio c语言-程序员宅基地

文章浏览阅读4.3k次,点赞5次,收藏29次。前言:本文将教大家如何使用 VIsual Studio Code 搭建 C 语言开发环境,包括使用 VS Code 如何编译和调试 C 语言程序,需要 用到的工具有 Visual Studio Code 、MinGw-w64 。1. 安装 C/C++ 插件C/C++ 是由 Microsoft 发布的支持 C/C++ 智能提示和调试等功能的插件,安装步骤如下:使用快捷键Ctrl + Shift + X呼出扩展面板在搜索框中输入:C/C++再安装由Microsoft提供的名为C/C++插._visual studio c语言

推荐文章

热门文章

相关标签