样式属性的变化
- 去除 default exports 的支持
//echarts5.0之前的引入方式
import echarts from 'echarts'
//echarts5.0的引入方式
import * as echarts from 'echarts'
- 新加了按需引入
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]);
- Echarts5.0 移除了内置的 geoJSON(原先在 echarts/map 文件夹下)
- Echarts5.0 不再支持 IE8 浏览器
- Echarts5.0之前的版本
5.0之前版本 (itemStyle | lineStyle | areaStyle的优先级)< visualMap的优先级,
5.0版本 (itemStyle | lineStyle | areaStyle的优先级)> visualMap的优先级,
- 图形元素 transform属性的改动:
position: [number, number] 改为 x: number / y: number。
scale: [number, number] 改为 scaleX: number / scaleY: number。
origin: [number, number] 改为 originX: number / originY: number。
- 图形元素附带的文本(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
- label属性 color、textBorderColor、backgroundColor、borderColor 中,值 auto 已不推荐使用,而推荐使用 ‘inherit’ 代替
- hoverAnimation属性
series.hoverAnimation => series.emphasis.scale
- 折线图(line):
series.clipOverflow => series.clip
- 饼图(pie)
series.label.margin => series.label.edgeDistance
series.clockWise => series.clockwise
series.hoverOffset => series.emphasis.scaleSize
- 地图(map)
series.mapType => series.map
选项 series.mapLocation 已经不推荐使用。
- 仪表盘(gauge):
series.clockWise => series.clockwise
series.hoverOffset => series.emphasis.scaleSize
- 雷达图(radar):
radar.name => radar.axisName
radar.nameGap => radar.axisNameGap
包括标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画
- 提示框的样式进行了优化
通过对字体样式,颜色的调整,指向图形的箭头,跟随图形颜色的边框色等功能,让提示框的默认展示优雅又清晰
5.0之前版本的提示框样式
5.0的提示框样式
- 标签的样式进行了优化
可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签,可以选择自动截断或者换行,让密集的标签能清晰显
- 时间轴进行了优化
时间轴不再如之前般绝对平均分割,而是选取年、月、日、整点这类更有意义的点来展示,并且能同时显示不同层级的刻度。标签的 formatter 支持了时间模版(例如 {yyyy}-{MM}-{dd}),并且可以为不同时间粒度的标签指定不同的 formatter,结合已有的富文本标签,可以定制出醒目而多样的时间效果。
-
新加了多种仪表盘图表,如:
-
支持了饼图、旭日图、矩形树图的扇形圆角
-
新增了贴花的功能
-
还有最重要的一点,优化渲染速度
对海量数据下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化,使得百万量级的数据也能做到实时的更新(每次更新耗时少于 30ms),甚至对于千万级的数据,也可以在 1s 内渲染完,并且保持很小的内存占用以及流畅的提示框(tooltip)等交互
暂时就这么多,后面如果在发现有改动的地方会及时补充!!!