ECharts 入门教程 更多有关ECharts图表的设置

2024-02-25 开发教程 ECharts 入门教程 匿名 5
blendMode

ECharts使用blendMode来设置图形的混合模式,不同的混合模式请参考 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

默认为 'source-over'。 支持每个系列单独设置。

'lighter' 也是比较常见的一种混合模式,该模式下图形数量集中的区域会颜色叠加成高亮度的颜色(白色)。常常能起到突出该区域的效果。见示例 全球飞行航线

hoverLayerThreshold

图形数量阈值,决定是否开启单独的 hover 层,在整个图表的图形数量大于该阈值时开启单独的 hover 层。

单独的 hover 层主要是为了在高亮图形的时候不需要重绘整个图表,只需要把高亮的图形放入单独的一个 canvas 层进行绘制,防止在图形数量很多的时候因为高亮重绘所有图形导致卡顿。

ECharts 2 里是底层强制使用单独的层绘制高亮图形,但是会带来很多问题,比如高亮的图形可能会不正确的遮挡所有其它图形,还有图形有透明度因为高亮和正常图形叠加导致不正确的透明度显示,还有移动端上因为每个图表都要多一个 canvas 带来的额外内存开销。因此 3 里默认不会开启该优化,只有在图形数量特别多,有必要做该优化时才会自动开启。

useUTC

是否使用 UTC 时间。

  • true: 表示 axis.type 为 'time' 时,依据 UTC 时间确定 tick 位置,并且 axisLabel 和 tooltip 默认展示的是 UTC 时间。
  • false: 表示 axis.type 为 'time' 时,依据本地时间确定 tick 位置,并且 axisLabel 和 tooltip 默认展示的是本地时间。

默认取值为false,即使用本地时间。因为考虑到:

  • 很多情况下,需要展示为本地时间(无论服务器存储的是否为 UTC 时间)。
  • 如果 data 中的时间为 '2012-01-02' 这样的没有指定时区的时间表达式,往往意为本地时间。默认情况下,时间被展示时需要和输入一致而非有时差。

注意,这个参数实际影响的是『展示』,而非用户输入的时间值的解析。 关于用户输入的时间值(例如 1491339540396, '2013-01-04' 等)的解析,参见 date 中时间相关部分。