2026年数据可视化工程师（ECharts）专项考试题及答案

2026年数据可视化工程师（ECharts）专项考试题及答案一、单项选择题（每题2分，共30分）1.在ECharts5.4中，若需让折线图在初始化后自动播放并循环高亮每个数据点，应优先配置下列哪一项？A.animationDurationUpdateB.emphasis.focusC.series-line.showSymbolD.series-line.emphasis.scale答案：B解析：emphasis.focus可配合dispatchAction实现高亮轮播；animationDurationUpdate仅控制过渡时长；showSymbol决定默认是否显示符号；scale仅放大图形，不具备轮播能力。2.当使用EChartsGL绘制三维散点图时，若发现部分点被遮挡，可通过调整下列哪个参数最快速修正视觉深度？A.viewControl.alphaB.grid3D.boxDepthC.series-scatter3D.zLevelD.series-scatter3D.emphasis.depthTest答案：A解析：alpha改变视角俯仰角，可立即暴露被遮挡点；boxDepth仅影响坐标系厚度；zLevel决定层叠顺序但无法穿透遮挡；depthTest为WebGL深度测试开关，关闭会导致前后错乱。3.在自定义主题文件中，若希望全局禁用所有图表的动画，应修改哪一段配置？A.textStyle.animationB.animationDurationC.animationD.stateAnimation答案：C解析：根节点下的animation为全局动画总开关；其余选项作用域或语义不符。4.使用dataset时，若source为二维数组，且第0行包含字段名，下列哪项配置可正确映射维度？A.dataset.dimensions="auto"B.series.encode.x=0C.dataset.sourceHeader=trueD.series.encode.tooltip=1答案：C解析：sourceHeader=true显式声明首行为维度名；dimensions="auto"无法推断名称；encode仅做映射，不声明维度名。5.在富文本标签中，若需让部分文字显示为12px红色且加粗，应使用的标签语法是？A.{fontSize:12,color:'red',fontWeight:'bold'}B.{a|12redbold}C.{red|text}D.{font|text}答案：C解析：ECharts富文本采用管道符定义样式名，如{red|text}，再在rich对象中声明red样式；A为对象写法，不能嵌套在字符串中；B、D语法错误。6.当使用markArea标注周末区间，且数据按天粒度排列，下列哪段代码可正确标注周六、周日？A.markArea.data=[[{xAxis:'Sat'},{xAxis:'Sun'}]]B.markArea.data=[[{value:'2026-04-04'},{value:'2026-04-05'}]]C.markArea.data=[[{xAxis:0},{xAxis:1}]]D.markArea.data=[[{type:'average'},{type:'max'}]]答案：B解析：xAxis需对应类目值或时间字符串；直接写日期字符串最直观；A的'Sat'需与axis.data对应；C的索引方式在类目轴下易错位；D与周末无关。7.若需让toolbox中的自定义按钮仅在柱状图系列出现时显示，应如何配置？A.toolbox.feature.myMagic.show=trueB.toolbox.feature.myMagic.show=(series)=>series.type==='bar'C.在option外监听chart.on('finished')再动态setOptionD.使用graphic组手动绘制按钮答案：C解析：ECharts未提供按钮级条件渲染API；最可靠方案是在finished回调中检测series类型，再setOption更新toolbox；A、B语法不存在；D过于繁琐。8.使用visualMap连续型组件时，若希望颜色从白到蓝渐变，且最小值对应透明，应配置？A.visualMap.inRange.color=['rgba(255,255,255,0)','#0066cc']B.visualMap.outOfRange.color=['transparent','#0066cc']C.visualMap.inRange.colorAlpha=[0,1]D.visualMap.controller.inRange.color=['#fff','#0066cc']答案：A解析：inRange.color支持rgba透明；outOfRange控制范围外；colorAlpha已废弃；controller仅影响拖拽手柄。9.在关系图中，若节点数据量超过5k，交互出现明显卡顿，优先采用哪种优化策略？A.开启series-graph.largeB.降低symbolSizeC.关闭animationThresholdD.使用canvas渲染器替代svg答案：A解析：large模式会切换为简单渲染，牺牲部分特效换性能；symbolSize仅减轻重绘负担；animationThreshold与动画有关；渲染器切换对关系图提升有限。10.使用echarts.registerMap加载GeoJSON后，若发现台湾省区域名称未被识别，最可能原因是？A.未设置nameMapB.未设置namePropertyC.未设置aspectScaleD.未设置scaleLimit答案：B解析：GeoJSON属性字段可能用'NAME_CHN'而非'name'，需通过nameProperty指定；nameMap用于做映射而非读取；其余为投影参数。11.在仪表盘gauge中，若需让指针指向80且刻度标签显示为“优”，应如何配置？A.series-gauge.data=[{value:80,name:'优'}]B.series-gauge.axisLabel.formatter=()=>'优'C.series-gauge.pointer.value=80D.series-gauge.title.offsetCenter=['0','-40%']答案：A解析：data数组元素支持name字段作为标签；axisLabel.formatter会全局覆盖；pointer无value属性；title仅调整位置。12.若需将图表导出为4K分辨率PNG，且背景透明，下列代码正确的是？A.chart.getDataURL({pixelRatio:4,backgroundColor:'transparent'})B.chart.getDataURL({devicePixelRatio:4,backgroundColor:null})C.chart.getDataURL({pixelRatio:2,backgroundColor:'rgba(0,0,0,0)'})D.chart.getDataURL({type:'png',pixelRatio:4,backgroundColor:'none'})答案：A解析：getDataURL参数为pixelRatio与backgroundColor；transparent字符串会被解析为透明；devicePixelRatio非API字段；none无效。13.使用dataset时，若需对第三列做累加求和，并在tooltip中显示，应使用？A.series-line.endLabel.formatterB.tooltip.formatter回调中手动累加C.dataset.transform.type='sort'D.series-line.stack='total'答案：B解析：ECharts未提供内置累加transform；tooltip.formatter可访问全部数据手动计算；stack为堆叠而非累加；sort与求和无关。14.在旭日图sunburst中，若需让最内层半径从0开始，应配置？A.series-sunburst.radius=['0%','30%']B.series-sunburst.center=['50%','50%']C.series-sunburst.levels[0].radius=0D.series-sunburst.innerRadius=0答案：A解析：radius数组控制整体内外半径；levels可逐层覆写，但0层需显式声明；无innerRadius属性。15.使用echarts.connect联动多图时，若需让图A的dataZoom控制图B的x轴，需确保？A.两图xAxis.data数组完全一致B.两图xAxis.type均为'value'C.两图dataZoom.id相同D.两图dataZoom.xAxisIndex对应各自轴索引答案：A解析：connect仅同步组件行为，轴数据必须一致才能对齐；type可不同；id与xAxisIndex无需相同。二、多项选择题（每题3分，共30分）16.以下哪些方式可在ECharts中实现数据实时更新且保持动画连贯？A.使用chart.appendData分批追加B.使用chart.setOption({series:[{data:newData}]},{replaceMerge:['series']})C.使用chart.setOption({series:[{data:newData}]},false,true)D.使用chart.resize()答案：A、B解析：appendData专为流式数据设计；replaceMerge可智能合并；第三参数静默更新会关闭动画；resize仅改变尺寸。17.关于ECharts5状态管理，下列说法正确的是？A.emphasis状态可继承上层样式B.select状态需先开启selectedModeC.blur状态在鼠标移出画布时触发D.使用dispatchAction可主动切换select答案：A、B、D解析：blur在数据项失去高亮时触发，而非移出画布；其余正确。18.在自定义系列custom中，可通过哪些对象获取图表宽高？A.api.getWidth()B.api.getZr().getWidth()C.api.getCoordinateSystems()[0].getRect()D.api.getVisual('size')答案：A、B、C解析：getWidth/getHeight直接返回；ZRender实例亦提供；坐标系矩形含宽高；getVisual仅映射视觉编码。19.使用tooltip.axisPointer.type='cross'时，可联动哪些组件？A.xAxis.axisPointerB.yAxis.axisPointerC.dataZoomD.brush答案：A、B解析：cross由两轴指针合成；与dataZoom、brush无直接联动。20.下列哪些配置可让折线图在数据缺失点自动断线而非置0？A.series-line.connectNulls=falseB.series-line.sampling='lttb'C.将缺失值设为'-'D.将缺失值设为null或undefined答案：A、C、D解析：connectNulls默认false；'-'与null均视为空；sampling为降采样策略，与断线无关。21.在地图散点图中，若需让波纹动画从中心向外扩散，应配置？A.series-effectScatter.rippleEffect.scaleB.series-effectScatter.rippleEffect.periodC.series-effectScatter.rippleEffect.brushType='stroke'D.series-effectScatter.showEffectOn='render'答案：A、B、D解析：scale控制最大缩放；period控制周期；brushType仅影响填充或描边；showEffectOn决定触发时机。22.关于ECharts的渐进渲染progressive，下列说法正确的是？A.默认在数据量超4k时自动开启B.可手动设置progressiveChunkMode='mod'C.开启后tooltip精确度会降低D.对散点图有效，对饼图无效答案：B、C、D解析：阈值由progressive阈值控制，非固定4k；mod为分片模式；渐进渲染会采样，tooltip可能无法精准捕捉；饼图无渐进实现。23.使用dataset时，若需对日期维度做同比偏移，可借助？A.dataset.transform.type='filter'B.dataset.transform.config.dimension=0C.外部预处理后再setOptionD.使用series-line.smooth=true答案：A、B、C解析：transform支持过滤与映射；日期偏移需自定义逻辑；smooth仅曲线化。24.在主题JSON中，可全局定义哪些元素的颜色？A.colorB.backgroundColorC.textStyle.colorD.axisLine.lineStyle.color答案：A、B、C解析：根节点color数组为调色盘；backgroundColor与textStyle.color可全局；axisLine需嵌套。25.使用graphic组绘制水印时，为让水印不响应鼠标事件，应配置？A.graphic.style.fill='rgba(0,0,0,0.05)'B.graphic.z=-100C.graphic.silent=trueD.graphic.invisible=true答案：C解析：silent关闭交互；z仅层级；invisible直接隐藏；透明度不影响事件。三、填空题（每空2分，共20分）26.使用ECharts绘制10万条散点，需开启______模式并设置progressive阈值为______。答案：large；2000解析：large模式简化渲染；阈值可自定义，通常2k起步。27.在自定义tooltip中，若需显示当前数据在全部数据中的百分比，可通过回调参数______获取全部数据。答案：ticket解析：ticket为异步回调占位符，实际应通过chart.getOption().series[0].data获取；官方示例常误写为ticket，正确写法应为params外再读取option，故标准答案填option。28.使用markLine标记工作日均线，若数据为按小时粒度，需将markLine.data的type设为______并配合______维度。答案：average；xAxis解析：type='average'计算均值；xAxis维度指定轴。29.在地图注册时，若GeoJSON属性字段为"NAME_CHN"，需通过______参数指定读取。答案：nameProperty解析：registerMap第三参数为{nameProperty:'NAME_CHN'}。30.使用dataset时，若需将第三列重命名为"销售额"，应在dataset节点添加______配置。答案：dimensions:['日期','品类','销售额']31.在仪表盘指针尾部添加圆形装饰，需使用______组件并设置______属性定位。答案：graphic；position32.使用dataZoom-inside时，若需限制窗口最小范围为30%比例，应配置______。答案：minSpan:3033.在主题中，若需让全局字体为'PingFangSC'，应设置______。答案：textStyle.fontFamily34.使用series-custom绘制贝塞尔曲线，需通过______方法获取ZRender的贝塞尔工具。答案：api.graphic.clipPointsByRect或zrUtil，标准填zrUtil35.使用echarts.init时，若容器为display:none，会导致______错误，解决方法是先______。答案：Can'tgetDOMwidthorheight；临时设置visibility:hidden与绝对定位脱离文档流四、代码补全题（每题10分，共40分）36.实现一个双Y轴混合图：左侧柱状图显示销量，右侧折线图显示增长率，且增长率tooltip显示保留一位小数的百分数。补全缺失部分。```javascriptconstoption={dataset:{source:[['月份','销量','增长率'],['1月',3200,0.123],['2月',2800,-0.056],['3月',3600,0.285]]},xAxis:{type:'category'},yAxis:[{type:'value',name:'销量'},{type:'value',name:'增长率',______(a)______}],series:[{type:'bar',encode:{x:'月份',y:'销量'}},{type:'line',yAxisIndex:1,encode:{x:'月份',y:'增长率'},tooltip:{formatter:(params)=>{returnparams.seriesName+'+':'+______(b)______;}}}]};```答案：(a)axisLabel.formatter=value=>(value100).toFixed(0)+'%'(b)(params.value[2]100).toFixed(1)+'%'37.使用EChartsGL绘制三维曲面，需加载NASA高程数据，补全surface系列配置。```javascriptconstoption={grid3D:{},xAxis3D:{type:'value'},yAxis3D:{type:'value'},zAxis3D:{type:'value'},series:[{type:'surface',wireframe:{show:true},data:______(a)______,shading:'realistic',realisticMaterial:{roughness:______(b)______,metalness:0.1}}]};```答案：(a)data=elevations.map((v,i)=>[i%100,Math.floor(i/100),v])(b)0.838.实现一个带时间轴的地图轮播，每2秒切换一年，GeoJSON已注册，补全dispatchAction部分。```javascriptletcurrent=0;constyears=['2020','2021','2022'];setInterval(()=>{chart.dispatchAction({type:'timelineChange',______(a)______});chart.dispatchAction({type:'mapToggleSelect',______(b)______});current=(current+1)%3;},2000);```答案：(a)currentIndex:current(b)name:years[current]39.使用dataset与transform实现同比计算，补全transform配置。```javascriptconstoption={dataset:[{source:[['年份','月份','销售额'],[2025,1,120],[2026,1,150]]},{type:'filter',config:{______(a)______}}],series:{type:'bar',encode:{x:'月份',y:'销售额'}}};```答案：(a)dimension:'年份',value:2026五、综合设计题（共30分）40.需求：某电商后台需实时监控2026年618活动每秒订单量，要求：1.折线图横轴为时间，精确到秒，滚动窗口5分钟；2.每秒推送1条数据，峰值可达2万/秒，需保证流畅；3.当订单量突增30%时，背景闪红3秒；4.支持框选缩放、导出4KPNG；5.代码需模块化，使用TypeScript+ECharts5，提供完整实现。请写出核心实现（限400行内），并解释性能优化要点。答案：```typescript//dataProvider.tsexportclassDataProvider{privatebuffer:number[]=[];privatelast=0;privateonBurst:()=>void;constructor(privatecb:(data:number[])=>void){this.onBurst=()=>{document.body.classList.add('flash-red');setTimeout(()=>document.body.classList.remove('flash-red'),3000);};setInterval(()=>this.gen(),1000);}privategen(){constv=Math.floor(Math.random()20000);constsurge=this.last&&v/this.last>1.3;this.buffer.push(v);if(this.buffer.length>300)this.buffer.shift();if(surge)this.onBurst();this.last=v;this.cb([...this.buffer]);}}//chart.tsimportasechartsfrom'echarts/core';import{LineChart}from'echarts/charts';import{DataZoomComponent,GridComponent,TooltipComponent}from'echarts/components';import{CanvasRenderer}from'echarts/renderers';echarts.use([LineChart,DataZoomComponent,GridComponent,TooltipComponent,CanvasRenderer]);exportfunctioninitChart(dom:HTMLDivEl