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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值