codecamp

更多有关ECharts图表的设置

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 中时间相关部分。

ECharts渐进式渲染简单介绍
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }