echarts5.0新特性

样式属性的变化

  1. 去除 default exports 的支持
	//echarts5.0之前的引入方式
	import echarts from 'echarts'
	
	//echarts5.0的引入方式
	import * as echarts from 'echarts'
  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]);
  1. Echarts5.0 移除了内置的 geoJSON(原先在 echarts/map 文件夹下)
  2. Echarts5.0 不再支持 IE8 浏览器
  3. Echarts5.0之前的版本
	5.0之前版本  (itemStyle | lineStyle | areaStyle的优先级)< visualMap的优先级,
	5.0版本		 (itemStyle | lineStyle | areaStyle的优先级)> visualMap的优先级,
  1. 图形元素 transform属性的改动:
	position: [number, number] 改为 x: number / y: number。
	scale: [number, number] 改为 scaleX: number / scaleY: number。
	origin: [number, number] 改为 originX: number / originY: number。
  1. 图形元素附带的文本(text)的声明方式被改变:
	textPosition 改为 textConfig.position
	textOffset 改为 textConfig.offset
	textRotation 改为 textConfig.rotation
	textDistance 改为 textConfig.distance

	//下面左边部分的属性在 style 和 style.rich.? 中已不推荐使用或废弃。请使用下面右边的属性:
	textFill => fill
	textStroke => stroke
	textFont => font
	textStrokeWidth => lineWidth
	textAlign => align
	textVerticalAlign => verticalAlign
	textLineHeight =>
	textWidth => width
	textHeight => hight
	textBackgroundColor => backgroundColor
	textPadding => padding
	textBorderColor => borderColor
	textBorderWidth => borderWidth
	textBorderRadius => borderRadius
	textBoxShadowColor => shadowColor
	textBoxShadowBlur => shadowBlur
	textBoxShadowOffsetX => shadowOffsetX
	textBoxShadowOffsetY => shadowOffsetY

  1. label属性 color、textBorderColor、backgroundColor、borderColor 中,值 auto 已不推荐使用,而推荐使用 ‘inherit’ 代替
  2. hoverAnimation属性
	series.hoverAnimation => series.emphasis.scale
  1. 折线图(line):
	series.clipOverflow => series.clip
  1. 饼图(pie)
	series.label.margin => series.label.edgeDistance
	series.clockWise => series.clockwise
	series.hoverOffset => series.emphasis.scaleSize
  1. 地图(map)
	series.mapType => series.map 
	选项 series.mapLocation 已经不推荐使用。
  1. 仪表盘(gauge):
	series.clockWise => series.clockwise 
	series.hoverOffset => series.emphasis.scaleSize
  1. 雷达图(radar):
	radar.name => radar.axisName
	radar.nameGap => radar.axisNameGap
  1. 新增动态排序柱状图(bar-racing)以及动态排序折线图(line-racing)
    动态排序柱状图
    动态排序折线图
    在这里插入图片描述

  2. 新增自定义系列动画

包括标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画

  1. 提示框的样式进行了优化

通过对字体样式,颜色的调整,指向图形的箭头,跟随图形颜色的边框色等功能,让提示框的默认展示优雅又清晰

5.0之前版本的提示框样式
在这里插入图片描述
5.0的提示框样式
在这里插入图片描述

  1. 标签的样式进行了优化

可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签,可以选择自动截断或者换行,让密集的标签能清晰显

  1. 时间轴进行了优化

时间轴不再如之前般绝对平均分割,而是选取年、月、日、整点这类更有意义的点来展示,并且能同时显示不同层级的刻度。标签的 formatter 支持了时间模版(例如 {yyyy}-{MM}-{dd}),并且可以为不同时间粒度的标签指定不同的 formatter,结合已有的富文本标签,可以定制出醒目而多样的时间效果。

  1. 新加了多种仪表盘图表,如:
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

  2. 支持了饼图、旭日图、矩形树图的扇形圆角
    在这里插入图片描述在这里插入图片描述

  3. 新增了贴花的功能
    在这里插入图片描述

  4. 还有最重要的一点,优化渲染速度

对海量数据下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化,使得百万量级的数据也能做到实时的更新(每次更新耗时少于 30ms),甚至对于千万级的数据,也可以在 1s 内渲染完,并且保持很小的内存占用以及流畅的提示框(tooltip)等交互

暂时就这么多,后面如果在发现有改动的地方会及时补充!!!

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue 3.0 和 ECharts 5.0 是两个非常流行的前端框架和可视化库。Vue 3.0 于 2020 年正式发布,是 Vue.js 的最新版本。而 ECharts 5.0 则在 2020 年 12 月发布了正式版,是一款强大的可视化库。 Vue 3.0 带来了许多重大更新和改进,包括更好的性能、更好的开发体验、更好的 TypeScript 支持等。Vue 3.0 让开发人员能够更快地构建高性能的 Web 应用程序,同时也提供了更完善的生态系统,使得开发过程更加便捷和高效。 ECharts 5.0 是一款强大的可视化库,它提供了多种类型的图表、地图、关系图等,使得开发人员能够快速创建出精美的可视化效果。ECharts 5.0 支持多种数据格式,包括 JSON、CSV、XML 等,同时也支持多种数据源,包括静态数据、API 接口、WebSocket 等。ECharts 5.0 还提供了丰富的图表配置选项,使得开发人员能够轻松地定制各种流行的数据可视化效果。 Vue 3.0 与 ECharts 5.0 的结合,可以实现更加高效和优秀的数据可视化效果。Vue 3.0 的性能优化可以让 ECharts 5.0 更好地展示大量数据,同时 ECharts 5.0 的丰富图表类型和选项,可以为 Vue 3.0 应用程序提供更加精细的数据呈现。 总的来说,Vue 3.0 和 ECharts 5.0 是两个非常优秀的前端框架和可视化库,它们的结合能够为开发人员提供更加高效、精细和出色的 Web 应用程序开发体验。 ### 回答2: Vue 3.0和Echarts 5.0是目前前端开发中非常流行的框架和库,分别用于开发Web页面和数据可视化。Vue 3.0是Vue.js框架的最新版本,与先前版本相比有许多改进,例如更好的性能、更直接的响应式系统、更好的TypeScript支持等。Echarts 5.0是Apache开源项目Echarts的最新版本,它是一个基于JavaScript的可视化库,可以用来制作各种类型的图表,如折线图、柱状图、饼图、散点图等。 Vue.jsEcharts可以非常好地结合使用。Vue.js可以帮助我们组织代码,将数据绑定到HTML标记中,处理事件和生命周期等。而Echarts可以让我们非常方便地制作图表并将其展示在页面上。Vue.js的响应式数据和组件化的思想也与Echarts的数据驱动原则非常契合,两者可以无缝对接。 在使用Vue.jsEcharts时,我们可以通过Vue.js的组件化特性将Echarts作为Vue.js组件来实现。这样可以让我们在Vue.js中直接使用Echarts,而不需要手动编写JavaScript代码。另外,在Vue.js 3.0中,通过Composition API的支持,我们可以更加灵活地组织代码和处理数据,这也对于Echarts的使用提供了更多方便。 总之,Vue 3.0和Echarts 5.0是非常强大的前端开发工具,它们可以帮助我们快速地构建高性能的Web页面和数据可视化。在Vue.jsEcharts的结合使用中,可以通过组件化、响应式数据等特性实现代码的高效组织和数据的快速展示。 ### 回答3: Vue 3.0和Echarts 5.0是现在很火热的前端框架和可视化工具,在开发和设计方面都有很大的用途。 Vue 3.0具有更快的速度和更小的代码体积,采用了全新的响应式API和Composition API,这使得开发更加灵活方便。与此同时,Echarts 5.0则支持更多的图表类型,具有更好的性能和更多的交互功能。它也增加了更多的自定义选项,允许用户按照自己的需要进行调整和设计。 Vue 3.0和Echarts 5.0的结合可以为开发者们提供更强大的可视化工具,从而可以更好地呈现数据和交互,同时也可以加速开发过程,减少代码量和时间成本。通过使用Vue 3.0和Echarts 5.0,开发者们可以快速地创建功能强大、适应性强的大型应用程序,并实现自己的数据可视化目标。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值