下列属性用于配置渐进渲染的功能细节:　配置名　类型　默认值　说明　large　boolean　false　是否开启大数据量优化　largeThreshold　number　400　启动绘制优化的阈值,在large　=　true　的情况下,若数据量超过该值则启动绘制优化　progressive　number　5000　渐进式渲染时每一帧绘制图形数量　progressiveThreshold　number　3000　启用渐进式渲染的图形数量阈值,在单个系列的图形数量超过该阈值时启用渐进式渲染　progressiveChunkMode　string　mod　渐进渲染时每一帧图形的分片方式　启动渐进渲染的功能很简单,只需要设置　large　=　true　,当数据量超过　largeThreshold　设定的阈值时,ECharts　就会启动渐进渲染功能,例如下例中渲染　50000　数据:　实例演示　预览　复制　　<　html　lang　=　"　zh-CN　"　>　<　head　>　<　meta　charset　=　"　utf-8　"　/>　<　meta　http-equiv　=　"　X-UA-Compatible　"　content　=　"　IE=edge　"　/>　<　meta　name　=　"　viewport　"　content　=　"　width=device-width,initial-scale=1.0　"　/>　<　title　>　Echarts　Example　　　<　body　>　<　button　id　=　"　btnStart　"　type　=　"　button　"　>　开始渲染　　<　div　id　=　"　main　"　style　="　width　:　800　px　;　height　:　400　px　"　>　　<　script　src　=　"　//cdn.bootcss.com/echarts/4.5.0/echarts.common.js　"　>　　<　script　type　=　"　text/javascript　"　>　//　生成随机数　function　generateData　(　count　)　{　var　baseValue　=　Math　.　random　(　)　*　1000　;　var　time　=　+　new　Date　(　2011　,　0　,　1　)　;　var　smallBaseValue　;　function　next　(　idx　)　{　smallBaseValue　=　idx　%　30　===　0　?　Math　.　random　(　)　*　700　:　smallBaseValue　+　Math　.　random　(　)　*　500　-　250　;　baseValue　+=　Math　.　random　(　)　*　20　-　10　;　return　Math　.　max　(　0　,　Math　.　round　(　baseValue　+　smallBaseValue　)　+　3000　)　;　}　var　categoryData　=　[　]　;　var　valueData　=　[　]　;　for　(　var　i　=　0　;　i　<　count　;　i　++　)　{　categoryData　.　push　(　echarts　.　format　.　formatTime　(　'yyyy-MM-dd\nhh:mm:ss'　,　time　)　)　;　valueData　.　push　(　next　(　i　)　.　toFixed　(　2　)　)　;　time　+=　1000　;　}　return　{　categoryData　:　categoryData　,　valueData　:　valueData　,　}　;　}　var　data　=　generateData　(　500000　)　;　console　.　log　(　'generate　done'　)　;　var　chart　=　echarts　.　init　(　document　.　getElementById　(　'main'　)　)　;　var　option　=　{　toolbox　:　{　feature　:　{　saveAsImage　xAxis　:　{　type　:　'category'　,　data　:　data　.　categoryData　}　,　yAxis　:　{　type　:　'value'　}　,　series　:　[　{　data　:　data　.　valueData　,　type　:　'bar'　,　//　是否开启大数据量优化　large　:　true　,　//　数据优化的启动阈值　largeThreshold　:　1000　document　.　getElementById　(　'btnStart'　)　.　addEventListener　(　'click'　,　function　(　)　{　chart　.　setOption　(　option　script　>　　　运行案例　点击　"运行案例"　可查看在线运行效果　示例效果:　在渐进渲染模式下,可以通过　progressive、progressiveChunkMode　调整渲染效果。progressive　用于配置每帧绘制的图形数量,当progressive　值越小时每帧的渲染效率越高,视觉效果越平滑,但总的渲染时长也会相应越长,对比　progressive　=　1000　与progressive　=　5000　的效果:　progressiveChunkMode　用于配置图形的分片方式,可选值:　sequential　按照数据的顺序分片。缺点是渲染过程不自然;　mod　取模分片,即每个片段中的点会遍布于整个数据,从而能够视觉上均匀得渲染。　对比　progressiveChunkMode　=　sequential　与progressiveChunkMode　=　mod　的效果:　5.　动画　柱状图支持动画效果,只需设置　animation　=　true　即可启动动画功能。与动画相关配置包括:　配置名　类型　默认值　说明　animation　boolean　false　是否启动动画效果　animationThreshold　number　2000　关闭动画的阈值,在animation　=　true　的情况下,若数据量超过该值则关闭动画效果　animationDuration　number　|　function　1000　初始动画的时长　animationEasing　string　cubicOut　初始动画的缓动效果　animationDelay　number　|　function　初始动画的延迟　animationDurationUpdate　number　300　数据更新动画时长　animationEasingUpdate　string　cubicOut　数据更新动画的缓动效果　animationDelayUpdate　number　|　function　数据更新动画的延迟　默认配置下,只需设置　animation　=　true　即可启动动画效果,简单示例:　实例演示　预览　复制　　<　html　lang　=　"　zh-CN　"　>　<　head　>　<　meta　charset　=　"　utf-8　"　/>　<　meta　http-equiv　=　"　X-UA-Compatible　"　content　=　"　IE=edge　"　/>　<　meta　name　=　"　viewport　"　content　=　"　width=device-width,initial-scale=1.0　"　/>　<　title　>　Echarts　Example　　　<　body　>　<　button　id　=　"　btnStart　"　type　=　"　button　"　>　开始渲染　　<　div　id　=　"　main　"　style　="　width　:　600　px　;　height　:　400　px　"　>　　<　script　src　=　"　//cdn.bootcss.com/echarts/4.5.0/echarts.common.js　"　>　　<　script　type　=　"　text/javascript　"　>　var　myChart　=　echarts　.　init　(　document　.　getElementById　(　'main'　)　)　;　var　option　=　{　title　:　{　text　:　'动画效果示例'　}　,　xAxis　:　{　type　:　'category'　,　data　:　[　'Mon'　,　'Tue'　,　'Wed'　,　'Thu'　,　'Fri'　,　'Sat'　,　'Sun'yAxis　:　{　type　:　'value'　}　,　series　:　[　{　data　:　[　820　,　932　,　901　,　934　,　1290　,　1330　,　1320　]　,　type　:　'bar'　,　//　启动动画效果　animation　:　true　document　.　getElementById　(　'btnStart'　)　.　addEventListener　(　'click'　,　function　(　)　{　myChart　.　setOption　(　option　script　>　　　运行案例　点击　"运行案例"　可查看在线运行效果　示例效果:　与CSS3　动画类似,下列属性可以微调动画执行的细节:　animationDuration:　初始动画执行周期;　animationEasing:　初始动画的缓动效果,只能使用内置的缓动函数,可选值请参考缓动示例;　animationDelay:　初始动画延迟时间,支持数值或函数类型。　通过设置,可以调整出更加生动的动画效果,例如在上例基础上设置如下属性:　{　animation　:　true　,　animationEasing　:　'elasticOut'　,　animationDuration　:　function　(　index　)　{　return　index　*　300　;　}　,　}　示例效果如下:　细心的读者应该已经注意到,上述配置表中存在两类属性,一是　初始动画　,即图表首次渲染动画;二是　数据更新动画　,即在图表初始化后,通过调用　setOption　或appendData　函数促使数据发生变化时执行的动画效果,相关属性包括:　animationDurationUpdate:数据更新动画执行周期;　animationEasingUpdate:数据更新动画的缓动效果,只能使用内置的缓动函数,可选值请参考缓动示例;　animationDelayUpdate:数据更新动画延迟时间。　例如在上例基础上,动画配置修改为:　{　animation　:　true　,　animationEasingUpdate　:　'elasticOut'　,　animationDurationUpdate　:　function　(　index　)　{　return　index　*　100　;　}　,　}　注意初始化与插入数据时,动画效果的差异:　6.　小结　本节结合实例讲述　Echarts　柱状图的各类功能特性,包括普通柱状图、条形图、堆叠柱状图、极坐标柱状图等场景的应用与功能特性;并进一步地,讨论如何通过渐进渲染方式提升大数据场景的性能优化,以及如何结合动画特性提供更具交互感的柱状图应用。