Web数据可视化教程（基于ECharts）教案汇 电子活页3-1 柱状图的主要属性及其设置 -任务3-6 的对应代码

Web数据可视化教程（基于ECharts）Web数据可视化教程（基于ECharts）Web数据可视化教程（基于ECharts）柱状图的主要属性及其设置Web数据可视化教程（基于ECharts）（1）series-bar.type='bar'string类型。（2）series-bar.idstring类型，用于设置组件ID，默认不指定。指定则可用于在option或者API中引用组件。（3）series-bar.namestring类型，用于设置系列名称，用于tooltip的显示，legend的图例筛选，在setOption更新数据和配置项时用于指定对应的系列。（4）series-bar.colorBy='series'string类型，从v5.2.0开始支持，从调色盘option.color中取色的策略，可取值为：①'series'：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；②'data'：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。（5）series-bar.legendHoverLink=trueboolean类型，用于设置是否启用图例hover时的联动高亮。（6）series-bar.coordinateSystem='cartesian2d'string类型，用于设置该系列使用的坐标系，其取值可选项为：①'cartesian2d'使用二维的直角坐标系（也称笛卡尔坐标系），通过xAxisIndex,yAxisIndex指定相应的坐标轴组件。②'polar'使用极坐标系，通过polarIndex指定相应的极坐标组件（7）series-bar.xAxisIndexnumber类型，用于设置使用的x轴的index，在单个图表实例中存在多个x轴的时候有用。（8）series-bar.yAxisIndexnumber类型，用于设置使用的y轴的index，在单个图表实例中存在多个y轴的时候有用。（9）series-bar.polarIndexnumber类型，用于设置使用的极坐标系的index，在单个图表实例中存在多个极坐标系的时候有用。（10）series-bar.roundCapboolean类型，从v4.5.0开始支持，用于设置是否在环形柱条两侧使用圆弧效果。仅对极坐标系柱状图有效。（11）series-bar.realtimeSortboolean类型，用于设置是否开启实时排序，用来实现动态排序图效果。（12）series-bar.showBackgroundboolean类型，从v4.7.0开始支持，用于设置是否显示柱条的背景色。通过backgroundStyle配置背景样式。（13）series-bar.backgroundStyleObject类型，从v4.7.0开始支持，用于设置每一个柱条的背景样式。需要将showBackground设置为true时才有效。◆series-bar.backgroundStyle.color='rgba(180,180,180,0.2)'Color类型，用于设置柱条的颜色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充，具体见option.Color类型。◆series-bar.backgroundStyle.borderColor='#000'Color类型，用于设置柱条的描边颜色。◆series-bar.backgroundStyle.borderWidthnumber类型，用于设置柱条的描边宽度，默认不描边。◆series-bar.backgroundStyle.borderType='solid'string类型，用于设置柱条的描边类型，默认为实线，支持'dashed','dotted'。◆series-bar.backgroundStyle.borderRadiusnumber或Array类型，用于设置圆角半径，单位px，支持传入数组分别指定4个圆角半径。例如：borderRadius:5,//统一设置四个角的圆角大小borderRadius:[5,5,0,0]//（顺时针左上，右上，右下，左下）◆series-bar.backgroundStyle.shadowBlurnumber类型，用于设置图形阴影的模糊大小。该属性配合shadowColor,shadowOffsetX,shadowOffsetY一起设置图形的阴影效果。示例代码如下：{shadowColor：'rgba(0,0,0,0.5)',shadowBlur:10}◆series-bar.backgroundStyle.shadowColorColor类型，用于设置阴影颜色。支持的格式同color。◆series-bar.backgroundStyle.shadowOffsetXnumber类型，用于设置阴影水平方向上的偏移距离。◆series-bar.backgroundStyle.shadowOffsetYnumber类型，用于设置阴影垂直方向上的偏移距离。◆series-bar.backgroundStyle.opacity=1number类型，用于设置图形透明度。支持从0到1的数字，为0时不绘制该图形。◆series-bar.labelObject类型，用于设置图形上的文本标签，可用于说明图形的一些数据信息，例如值，名称等。◆series-bar.label.showboolean类型，用于设置是否显示标签。◆series-bar.label.distance=5number类型，用于设置距离图形元素的距离。◆series-bar.label.rotatenumber类型，用于设置标签旋转。从-90度到90度。正值是逆时针。◆series-bar.label.offsetArray类型，用于设置是否对文字进行偏移。默认不偏移。例如：[30,40]表示文字在横向上偏移30，纵向上偏移40。◆series-bar.label.minMarginnumber类型，从v5.0.0开始支持，用于控制标签之间的最小距离，当启用labelLayout时可能会用到。◆series-bar.label.formatterstring或Function类型。用于设置标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用\n换行。字符串模板模板变量有：①{a}：系列名。②{b}：数据名。③{c}：数据值。④{@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'的维度的值。⑤{@[n]}：数据中维度n的值，如{@[3]}表示维度3的值，从0开始计数。示例代码如下：formatter:'{b}:{@score}'◆回调函数回调函数格式：(params:Object|Array)=>string参数params是formatter需要的单个数据集。格式如下：{componentType:'series',//系列类型seriesType:string,//系列在传入的option.series中的indexseriesIndex:number,//系列名称seriesName:string,//数据名，类目名name:string,//数据在传入的data数组中的indexdataIndex:number,//传入的原始数据项data:Object,//传入的数据值。在多数系列下它和data相同。//在一些系列下是data中的分量（如map、radar中）value:number|Array|Object,//坐标轴encode映射信息，//key为坐标轴（如'x''y''radius''angle'等）//value必然为数组，不会为null/undefined，表示dimensionindex。//其内容如：//{//x:[2]//dimensionindex为2的数据映射到x轴//y:[0]//dimensionindex为0的数据映射到y轴//}encode:Object,//维度名列表dimensionNames:Array<String>,//数据的维度index，如0或1或2…//仅在雷达图中使用。dimensionIndex:number,//数据图形的颜色color：string类型，用于设置}注：encode和dimensionNames的使用方式。例如：如果数据为：dataset:{source:[['苹果',43.3,85.8,93.7],['梨子',83.1,73.4,55.1],['葡萄',86.4,65.2,82.5],['芒果',72.4,53.9,39.1]]}则可这样得到y轴对应的value：params.value[params.encode.y[0]]如果数据为：dataset:{dimensions:['product','7月','8月','9月'],source:[{product:'苹果','7月':43.3,'8月':85.8,'9月':93.7},{product:'梨子','7月':83.1,'8月':73.4,'9月':55.1},{product:'葡萄','7月':86.4,'8月':65.2,'9月':82.5},{product:'芒果','7月':72.4,'8月':53.9,'9月':39.1}]}则可这样得到y轴对应的value：params.value[params.dimensionNames[params.encode.y[0]]]◆series-bar.label.color='#fff'Color类型，用于设置文字的颜色。如果设置为'inherit'，则为视觉映射得到的颜色，如系列色。◆series-bar.label.fontStyle='normal'string类型，用于设置文字字体的风格。其取值可选项为：'normal'、'italic'、'oblique'。◆series-bar.label.fontWeight='normal'string或number类型，用于设置文字字体的粗细。其取值可选项为：'normal'、'bold'、'bolder'、'lighter'、100|200|300|400…◆series-bar.label.fontFamily='sans-serif'string类型，用于设置文字的字体系列。还可以是'serif'、'monospace'、'Arial'、'CourierNew'、'MicrosoftYaHei'…◆series-bar.label.fontSize=12number类型，用于设置文字的字体大小。◆series-bar.label.alignstring类型，用于设置文字水平对齐方式，默认自动。其取值可选项为：'left'、'center'、'right'。rich中如果没有设置align，则会取父层级的align。例如：{align:right,rich:{a:{//没有设置`align`，则`align`为right}}}◆series-bar.label.verticalAlignstring类型，用于设置文字垂直对齐方式，默认自动。其取值可选项为：'top'、'middle'、'bottom'。rich中如果没有设置verticalAlign，则会取父层级的verticalAlign。例如：{verticalAlign:bottom,rich:{a:{//没有设置`verticalAlign`，则`verticalAlign`为bottom}}}◆series-bar.label.lineHeightnumber类型，用于设置行高。rich中如果没有设置lineHeight，则会取父层级的lineHeight。例如：{lineHeight:56,rich:{a:{//没有设置`lineHeight`，则`lineHeight`为56}}}◆series-bar.label.backgroundColor='transparent'string或Object类型，用于设置文字块背景色。可以使用颜色值，例如：'#123234','red','rgba(0,23,11,0.3)'。也可以直接使用图片，例如：backgroundColor：{image:'xxx/xxx.png'//这里可以是图片的URL，//或者图片的dataURI，//或者HTMLImageElement对象，//或者HTMLCanvasElement对象。}当使用图片的时候，可以使用width或height指定高宽，也可以不指定自适应。如果设置为'inherit'，则为视觉映射得到的颜色，如系列色。◆series-bar.label.borderColorColor类型，用于设置文字块边框颜色。如果设置为'inherit'，则为视觉映射得到的颜色，如系列色。◆series-bar.label.borderWidthnumber类型，用于设置文字块边框宽度。◆series-bar.label.borderType='solid'string或number或Array类型，用于设置文字块边框描边类型。其取值可选项为：'solid'、'dashed'、'dotted'。自v5.0.0开始，也可以是number或者number数组，用以指定线条的dasharray，配合borderDashOffset可实现更灵活的虚线效果。例如：{borderType:[5,10],borderDashOffset:5}◆series-bar.label.borderDashOffsetnumber类型，从v5.0.0开始支持。用于设置虚线的偏移量，可搭配borderType指定dasharray实现灵活的虚线效果。◆series-bar.label.borderRadiusnumber或Array类型，用于设置文字块的圆角。◆series-bar.label.paddingnumber或Array类型，用于设置文字块的内边距。例如：padding:[3,4,5,6]：表示[上,右,下,左]的边距。padding:4：表示padding:[4,4,4,4]。padding:[3,4]：表示padding:[3,4,3,4]。注意，文字块的width和height指定的是内容高宽，不包含padding。◆series-bar.label.shadowColor='transparent'Color类型，用于设置文字块的背景阴影颜色。◆series-bar.label.shadowBlurnumber类型，用于设置文字块的背景阴影长度。◆series-bar.label.shadowOffsetXnumber类型，用于设置文字块的背景阴影X偏移。◆series-bar.label.shadowOffsetYnumber类型，用于设置文字块的背景阴影Y偏移。◆series-bar.label.widthnumber类型，用于设置文本显示宽度。◆series-bar.label.heightnumber类型，用于设置文本显示高度。◆series-bar.label.textBorderColorColor类型，用于设置文字本身的描边颜色。如果设置为'inherit'，则为视觉映射得到的颜色，如系列色。◆series-bar.label.textBorderWidthnumber类型，用于设置文字本身的描边宽度。◆series-bar.label.textBorderType='solid'string或number或Array类型，用于设置文字本身的描边类型。其取值可选项为：'solid'、'dashed'、'dotted'。自v5.0.0开始，也可以是number或者number数组，用以指定线条的dasharray，配合textBorderDashOffset可实现更灵活的虚线效果。例如：{textBorderType:[5,10],textBorderDashOffset:5}◆series-bar.label.textBorderDashOffsetnumber类型，从v5.0.0开始支持，用于设置虚线的偏移量，可搭配textBorderType指定dasharray实现灵活的虚线效果。◆series-bar.label.textShadowColor='transparent'Color类型，用于设置文字本身的阴影颜色。◆series-bar.label.textShadowBlurnumber类型，用于设置文字本身的阴影长度。◆series-bar.label.textShadowOffsetXnumber类型，用于设置文字本身的阴影X偏移。◆series-bar.label.textShadowOffsetYnumber类型，用于设置文字本身的阴影Y偏移。◆series-bar.label.overflow='none'string类型，用于设置文字超出宽度是否截断或者换行，配置width时有效。①'truncate'截断，并在末尾显示ellipsis配置的文本，默认为…②'break'换行。③'breakAll'换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行。◆series-bar.label.ellipsis='…'string类型，用于设置在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本。◆series-bar.label.richObject类型。在rich里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。◆series-bar.label.position='inside'string或Array类型，用于设置标签的位置。可以通过内置的语义声明位置：示例代码如下：position:'top'支持：top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight。也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。示例代码如下：//绝对的像素值position:[10,10],//相对的百分比position:['50%','50%']极坐标系柱状图除了上述取值之外，还支持：start/insideStart/middle/insideEnd/end。从v5.2.0开始支持◆series-bar.labelLineObject类型，从v5.0.0开始支持，用于标签的视觉引导线配置。◆series-bar.labelLine.showboolean类型，用于设置是否显示视觉引导线。◆series-bar.labelLine.lineStyleObject（13）series-bar.itemStyleObject类型，用于设置图形样式。◆series-bar.itemStyle.color='auto'Color或Function类型，用于设置柱条的颜色。默认从全局调色盘option.color获取颜色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充，支持使用回调函数。回调函数格式如下：(params:Object)=>Color传入的是数据项seriesIndex,dataIndex,data,value等各个参数。◆series-bar.itemStyle.borderColor='#000'Color类型，用于设置柱条的描边颜色。◆series-bar.itemStyle.borderWidthnumber类型，用于设置柱条的描边宽度，默认不描边。◆series-bar.itemStyle.borderType='solid'string类型，用于设置柱条的描边类型，默认为实线，支持'dashed','dotted'。◆series-bar.itemStyle.borderRadiusnumber或Array类型，用于设置圆角半径，单位px，支持传入数组分别指定4个圆角半径。例如:borderRadius:5,//统一设置四个角的圆角大小borderRadius:[5,5,0,0]//（顺时针左上，右上，右下，左下）◆series-bar.itemStyle.shadowBlurnumber类型，用于设置图形阴影的模糊大小。该属性配合shadowColor,shadowOffsetX,shadowOffsetY一起设置图形的阴影效果。示例代码如下：{shadowColor：'rgba(0,0,0,0.5)',shadowBlur:10}◆series-bar.itemStyle.shadowColorColor类型，用于设置阴影颜色。支持的格式同color。◆series-bar.itemStyle.shadowOffsetXnumber类型，用于设置阴影水平方向上的偏移距离。◆series-bar.itemStyle.shadowOffsetYnumber类型，用于设置阴影垂直方向上的偏移距离。◆series-bar.itemStyle.opacity=1number类型，用于设置图形透明度。支持从0到1的数字，为0时不绘制该图形。◆series-bar.itemStyle.decalObject类型，用于设置图形的贴花图案，在aria.enabled与aria.decal.show都是true的情况下才生效。如果为'none'表示不使用贴花图案。（14）series-bar.labelLayoutObject或Function类型，从v5.0.0开始支持，用于设置标签的统一布局配置。该配置项是在每个系列默认的标签布局基础上，统一调整标签的(x,y)位置，标签对齐等属性以实现想要的标签布局效果。该配置项也可以是一个有如下参数的回调函数//标签对应数据的dataIndexdataIndex:number//标签对应的数据类型，只在关系图中会有node和edge数据类型的区分dataType?:string//标签对应的系列的indexseriesIndex:number//标签显示的文本text:string//默认的标签的包围盒，由系列默认的标签布局决定labelRect:{x:number,y:number,width:number,height:number}//默认的标签水平对齐align:'left'|'center'|'right'//默认的标签垂直对齐verticalAlign:'top'|'middle'|'bottom'//标签所对应的数据图形的包围盒，可用于定位标签位置rect:{x:number,y:number,width:number,height:number}//默认引导线的位置，目前只有饼图(pie)和漏斗图(funnel)有默认标签位置//如果没有该值则为nulllabelLinePoints?:number[][]示例代码如下：代码1：将标签显示在图形右侧10px的位置，并且垂直居中。labelLayout(params){return{x:params.rect.x+10,y:params.rect.y+params.rect.height/2,verticalAlign:'middle',align:'left'}}代码2：根据图形的包围盒尺寸决定文本尺寸。labelLayout(params){return{fontSize:Math.max(params.rect.width/10,5)};}◆series-bar.labelLayout.hideOverlapboolean类型，用于设置是否隐藏重叠的标签。◆series-bar.labelLayout.moveOverlapstring类型，用于设置在标签重叠的时候是否挪动标签位置以防止重叠。目前支持配置为：①'shiftX'水平方向依次位移，在水平方向对齐时使用。②'shiftY'垂直方向依次位移，在垂直方向对齐时使用。◆series-bar.labelLayout.xnumber或string类型，用于设置标签的x位置。支持绝对的像素值或者'20%'这样的相对值。◆series-bar.labelLayout.ynumber或string类型，用于设置标签的y位置。支持绝对的像素值或者'20%'这样的相对值。◆series-bar.labelLayout.dxnumber类型，用于设置标签在x方向上的像素偏移。可以和x一起使用。◆series-bar.labelLayout.dynumber类型，用于设置标签在y方向上的像素偏移。可以和y一起使用◆series-bar.labelLayout.rotatenumber类型，用于设置标签旋转角度。◆series-bar.labelLayout.widthnumber类型，用于设置标签显示的宽度。可以配合overflow使用控制标签显示在固定宽度内◆series-bar.labelLayout.heightnumber类型，用于设置标签显示的高度。◆series-bar.labelLayout.alignstring类型，用于设置标签水平对齐方式。可以设置'left'、'center'、'right'。◆series-bar.labelLayout.verticalAlignstring类型，用于设置标签垂直对齐方式。可以设置'top'、'middle'、'bottom'。◆series-bar.labelLayout.fontSizenumber类型，用于设置Thetextsizeofthelabel.◆series-bar.labelLayout.draggableboolean类型，用于设置标签是否可以允许用户通过拖拽二次调整位置。◆series-bar.labelLayout.labelLinePointsArray类型，用于设置标签引导线三个点的位置。格式为：[[x,y],[x,y],[x,y]]在饼图中常用来微调已经计算好的引导线，其它情况一般不建议设置。（15）series-bar.emphasisObject类型，用于设置高亮的图形样式和标签样式。◆series-bar.emphasis.disabledboolean类型，从v5.3.0开始支持，用于设置是否关闭高亮状态。关闭高亮状态可以在鼠标移到图形上，tooltip触发，或者图例联动的时候不再触发高亮效果。在图形非常多的时候可以关闭以提升交互流畅性。◆series-bar.emphasis.focus='none'string类型，从v5.0.0开始支持。在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：①'none'不淡出其它图形，默认使用该配置。②'self'只聚焦（不淡出）当前高亮的数据的图形。③'series'聚焦当前高亮的数据所在的系列的所有图形。示例代码：下面代码配置了柱状图在高亮一个图形的时候，淡出当前直角坐标系所有其它的系列。emphasis:{focus:'series',blurScope:'coordinateSystem'}◆series-bar.emphasis.blurScope='coordinateSystem'string类型，从v5.0.0开始支持。在开启focus的时候，可以通过blurScope配置淡出的范围。支持如下配置：①'coordinateSystem'淡出范围为坐标系，默认使用该配置。②'series'淡出范围为系列。③'global'淡出范围为全局。◆series-bar.emphasis.labelObject类型，用于设置图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。◆series-bar.emphasis.labelLineObject类型，从v5.0.0开始支持。用于标签的视觉引导线配置。◆series-bar.emphasis.itemStyleObject类型，用于设置图形样式。◆series-bar.blurObject类型，用于设置淡出时的图形样式和标签样式，开启emphasis.focus后有效。◆series-bar.blur.labelObject类型，用于设置图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。◆series-bar.blur.labelLineObject类型，从v5.0.0开始支持，用于标签的视觉引导线配置。◆series-bar.blur.itemStyleObject类型，用于设置图形样式。◆series-bar.selectObject类型，从v5.0.0开始支持，用于设置数据选中时的图形样式和标签样式，开启selectedMode后有效。◆series-bar.select.disabledboolean类型，从v5.3.0开始支持，用于设置是否可以被选中。在开启selectedMode的时候有效，可以用于关闭部分数据。◆series-bar.select.labelObject类型，用于设置图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。◆series-bar.select.labelLineObject类型，从v5.0.0开始支持，用于标签的视觉引导线配置。◆series-bar.select.itemStyleObject类型，用于设置图形样式。（16）series-bar.selectedModeboolean或string类型，从v5.0.0开始支持。用于选中模式的配置，表示是否支持多个选中，默认关闭。支持布尔值和字符串，字符串取值可选项为：'single'、'multiple'、'series'分别表示单选，多选以及选择整个系列。从v5.3.0开始支持'series'。（17）series-bar.stackstring类型，用于设置数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。注：目前stack只支持堆叠于'value'和'log'类型的类目轴上，不支持'time'和'category'类型的类目轴。（18）series-bar.stackStrategy='samesign'string类型，从v5.3.3开始支持，用于设置堆积数值的策略，前提是stack属性已被设置。其值其取值可选项为：①'samesign'：只在要堆叠的值与当前累积的堆叠值具有相同的正负符号时才堆叠。②'all'：堆叠所有的值，不管当前或累积的堆叠值的正负符号是什么。③'positive'：只堆积正值。④'negative'：只堆叠负值。（19）series-bar.samplingstring类型，用于设置柱状图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点。其取值可选项为：①'lttb'：采用Largest-Triangle-Three-Bucket算法，可以最大程度保证采样后线条的趋势，形状和极值。②'average'：取过滤点的平均值。③'min'：取过滤点的最小值。④'max'：取过滤点的最大值。⑤'minmax'：取过滤点绝对值的最大极值(从v5.5.0开始支持)。⑥'sum'：取过滤点的和。（20）series-bar.cursor='pointer'string类型，用于设置鼠标悬浮时在图形元素上时鼠标的样式，同CSS的cursor。（21）series-bar.barWidth=自适应number或string类型，用于设置柱条的宽度，不设时自适应。可以是绝对值例如40或者百分数例如'60%'。百分数基于自动计算出的每一类目的宽度。在同一坐标系上，此属性会被多个'bar'系列共享。此属性应设置于此坐标系中最后一个'bar'系列上才会生效，并且是对此坐标系中所有'bar'系列生效。（22）series-bar.barMaxWidthnumber或string类型，用于设置柱条的最大宽度。比barWidth优先级高。可以是绝对值例如40或者百分数例如'60%'。百分数基于自动计算出的每一类目的宽度。在同一坐标系上，此属性会被多个'bar'系列共享。此属性应设置于此坐标系中最后一个'bar'系列上才会生效，并且是对此坐标系中所有'bar'系列生效。（23）series-bar.barMinWidthnumber或string类型，用于设置柱条的最小宽度。在直角坐标系中，默认值是1。否则默认值是null。比barWidth优先级高。可以是绝对值例如40或者百分数例如'60%'。百分数基于自动计算出的每一类目的宽度。在同一坐标系上，此属性会被多个'bar'系列共享。此属性应设置于此坐标系中最后一个'bar'系列上才会生效，并且是对此坐标系中所有'bar'系列生效。（24）series-bar.barMinHeightnumber类型，用于设置柱条最小高度，可用于防止某数据项的值过小而影响交互。（25）series-bar.barMinAnglenumber类型，用于设置柱条最小角度，可用于防止某数据项的值过小而影响交互。仅对极坐标系柱状图有效。（26）series-bar.barGap=20%string类型，用于设置不同系列的柱间距离，为百分比（如'20%'，表示柱子宽度的20%）。如果想要两个系列的柱子重叠，可以设置barGap为'-100%'。这在用柱子做背景的时候有用。在同一坐标系上，此属性会被多个'bar'系列共享。此属性应设置于此坐标系中最后一个'bar'系列上才会生效，并且是对此坐标系中所有'bar'系列生效。（27）series-bar.barCategoryGapnumber或string类型，用于设置同一系列的柱间距离，默认情况下根据柱状图的系列数量计算得到合适的间距，系列较多时间距会适当调小，可设固定值。在同一坐标系上，此属性会被多个'bar'系列共享。此属性应设置于此坐标系中最后一个'bar'系列上才会生效，并且是对此坐标系中所有'bar'系列生效。（28）series-bar.largeboolean类型，用于设置是否开启大数据量优化，在数据图形特别多而出现卡顿时候可以开启。开启后配合largeThreshold在数据量大于指定阈值的时候对绘制进行优化。缺点是优化后不能自定义设置单个数据项的样式。（29）series-bar.largeThreshold=400number类型，用于设置开启绘制优化的阈值。（30）series-bar.progressive=5000number类型，用于设置渐进式渲染时每一帧绘制图形的数量，设为0时不启用渐进式渲染，支持每个系列单独配置。在图中有数千到几千万图形元素的时候，一下子把图形绘制出来，或者交互重绘的时候可能会造成界面的卡顿甚至假死。ECharts4开始全流程支持渐进渲染（progressiverendering），渲染的时候会把创建好的图形分到数帧中渲染，每一帧渲染只渲染指定数量的图形。该配置项就是用于配置该系列每一帧渲染的图形数，可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。例如在lines图或者平行坐标中线宽大于1的polyline绘制会很慢，这个数字就可以设置小一点，而线宽小于等于1的polyline绘制非常快，该配置项就可以相对调得比较大。（31）series-bar.progressiveThreshold=3000number类型，用于设置启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染。（32）series-bar.progressiveChunkMode=modstring类型，用于设置分片的方式。其取值可选项为：①'sequential'：按照数据的顺序分片，其缺点是渲染过程不自然。②'mod'：取模分片，即每个片段中的点会遍布于整个数据，从而能够视觉上均匀得渲染。（33）series-bar.dimensionsArray类型，用于设置使用dimensions定义series.data或者dataset.source的每个维度的信息。注意：如果使用了dataset，那么可以在dataset.dimensions中定义dimension，或者在dataset.source的第一行/列中给出dimension名称。于是就不用在这里指定dimension。但如果在这里指定了dimensions，那么优先使用这里的。例如：option={dataset:{source:[//有了上面dimensions定义后，下面这五个维度的名称分别为：//'date','open','close','highest','lowest'[12,44,55,66,2],[23,6,16,23,1],…]},series:{type:'xxx',//定义了每个维度的名称。这个名称会被显示到默认的tooltip中。dimensions:['date','open','close','highest','lowest']}}series:{type:'xxx',dimensions:[null,//如果此维度不想给出定义，则使用null即可{type:'ordinal'},//只定义此维度的类型。//'ordinal'表示离散型，一般文本使用这种类型。//如果类型没有被定义，会自动猜测类型。{name:'good',type:'number'},'bad'//等同于{name:'bad'}]}dimensions数组中的每一项其取值可选项为：①string，如'someName'，等同于{name:'someName'}②Object，属性可以有：◎name：string。◎type：string，支持以下类型：☆number，默认，表示普通数据。☆ordinal，对于类目、文本这些string类型的数据，如果需要能在数轴上使用，须是'ordinal'类型。ECharts默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。☆float，即Float64Array。☆int，即Int32Array。☆time，表示时间类型。设置成'time'则能支持自动解析数据成时间戳（timestamp），例如该维度的数据是'2025-05-10'，会自动被解析。时间类型的支持参见data。③displayName:一般用于tooltip中维度名的展示。string如果没有指定，默认使用name来展示。值得一提的是，当定义了dimensions后，默认tooltip中每个维度的显示，会变为『竖排』，从而方便显示每个维度的名称。如果没有定义dimensions，则默认tooltip会横排显示，且只显示数值没有维度名称可显示。（34）series-bar.encodeObject类型，可以定义data的哪个维度被编码成什么。例如：option={dataset:{source:[//每一列称为一个『维度』。//这里分别是维度0、1、2、3、4。[12,44,55,66,2],[23,6,16,23,1],…]},series:{type:'xxx',encode:{x:[3,1,5],//表示维度3、1、5映射到x轴。y:2,//表示维度2映射到y轴。tooltip:[3,2,4]//表示维度3、2、4会在tooltip中显示。}}}当使用dimensions给维度定义名称后，encode中可直接引用名称，例如：series:{type:'xxx',dimensions:['date','open','close','highest','lowest'],encode:{x:'date',y:['open','close','highest','lowest']}}encode声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如'x','y','tooltip'等，冒号右边是数据中的维度名（string格式）或者维度的序号（number格式，从0开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。下面是encode支持的属性设置：//在任何坐标系和系列中，都支持：encode:{//使用“名为product的维度”和“名为score的维度”的值在tooltip中显示tooltip:['product','score']//使用第1个维度和第3个维度的维度名连起来作为系列名。//（有时候名字比较长，这可以避免在重复输入这些名字）seriesName:[1,3],//表示使用第2个维度中的值作为id。//这在使用setOption动态更新数据时有用处，//可以使新老数据用id对应起来，从而能够产生合适的数据更新动画。itemId:2,//指定数据项的名称使用第3个维度在饼图等图表中有用，//可以使这个名字显示在图例（legend）中。itemName:3,//指定数据项的组ID(groupId)。当全局过渡动画功能开启时，//setOption前后拥有相同groupId的数据项会进行动画过渡。itemGroupId:4,//指定数据项对应的子数据组ID(childGroupId)，用于实现多层下钻和聚合。//从v5.5.0开始支持itemChildGroupId:5}//直角坐标系（grid/cartesian）特有的属性：encode:{//把“维度1”、“维度5”、“名为score的维度”映射到X轴：x:[1,5,'score'],//把“维度0”映射到Y轴。y:0}//单轴（singleAxis）特有的属性：encode:{single:3}//极坐标系（polar）特有的属性：encode:{radius:3,angle:2}//地理坐标系（geo）特有的属性：encode:{lng:3,lat:2}//对于一些没有坐标系的图表，例如饼图、漏斗图等，其取值可选项为：encode:{value:3}特殊地，在自定义系列（customseries）中，encode中轴可以不指定或设置为null/undefined，从而使系列免于受这个轴控制，也就是说，轴的范围（extent）不会受此系列数值的影响，轴被dataZoom控制时也不会过滤掉这个系列：varoption={xAxis:{},yAxis:{},dataZoom:[{xAxisIndex:0},{yAxisIndex:0}],series:{type:'custom',renderItem:function(params,api){return{type:'circle',shape:{cx:100,//x位置永远为100cy:api.coord([0,api.value(0)])[1],r:30},style:{fill:'blue'}};},encode:{//这样这个系列就不会被x轴以及x//轴上的dataZoom控制了。x:-1,y:1},data:[…]}};（35）series-bar.seriesLayoutBy='column'string类型，用于设置当使用dataset时，seriesLayoutBy指定了dataset中用行还是列对应到系列上，也就是说，系列“排布”到dataset的行还是列上。其取值可选项为：①'column'：默认值，dataset的列对应于系列，从而dataset中每一列是一个维度（dimension）。②'row'：dataset的行对应于系列，从而dataset中每一行是一个维度（dimension）。（36）series-bar.datasetIndexnumber类型，用于设置如果series.data没有指定，并且dataset存在，那么就会使用dataset。datasetIndex指定本系列使用哪个dataset。（37）series-bar.dataGroupIdstring类型，用于设置该系列所有数据项的组ID，优先级低于groupId。（38）series-bar.dataArray类型，用于设置系列中的数据内容数组。数组项通常为具体的数据项。注意，如果系列没有指定data，并且option有dataset，那么默认使用第1个dataset。如果指定了data，则不会再使用dataset。可以使用series.datasetIndex指定其他的dataset。通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。series:[{data:[//维度X维度Y其他维度…[3.4,4.5,15,43],[4.2,2.3,20,91],[10.8,9.5,30,18],[7.2,8.8,18,57]]}]☆在直角坐标系(grid)中『维度X』和『维度Y』会默认对应于xAxis和yAxis。☆在极坐标系(polar)中『维度X』和『维度Y』会默认对应于radiusAxis和angleAxis。后面的其他维度是可选的，可以在别处被使用，例如：◎在visualMap中可以将一个或多个维度映射到颜色，大小等多个图形属性上。◎在series.symbolSize中可以使用回调函数，基于某个维度得到symbolSize值。◎使用tooltip.formatter或series.label.formatter可以把其他维度的值展示出来。特别地，当只有一个轴为类目轴（axis.type为'category'）的时候，数据可以简化用一个一维数组表示。例如：xAxis:{data:['a','b','m','n']},series:[{//与xAxis.data一一对应。data:[23,44,55,19]//它其实是下面这种形式的简化：//data:[[0,23],[1,44],[2,55],[3,19]]}]◆『值』与轴类型的关系：☆当某维度对应于数值轴（axis.type为'value'或者'log'）的时候：其值可以为number（例如12）。（也可以兼容string形式的number，例如'12'）☆当某维度对应于类目轴（axis.type为'category'）的时候：其值须为类目的『序数』（从0开始）或者类目的『字符串值』。例如：xAxis:{type:'category',data:['星期一','星期二','星期三','星期四']},yAxis:{type:'category',data:['a','b','m','n','p','q']},series:[{data:[//xAxisyAxis[0,0,2],//意思是此点位于xAxis:'星期一',yAxis:'a'。['星期四',2,1],//意思是此点位于xAxis:'星期四',yAxis:'m'。[2,'p',2],//意思是此点位于xAxis:'星期三',yAxis:'p'。[3,3,5]]}]☆当某维度对应于时间轴（type为'time'）的时候，值可以为：◎一个时间戳，如1484141700832，表示UTC时间。◎或者字符串形式的时间描述：

ISO8601的子集，只包含这些形式（这几种格式，除非指明时区，否则均表示本地时间，与moment一致）：△部分年月日时间：'2024-03','2024-03-01','2024-03-0105','2024-03-0105:06'.△使用'T'或空格分割：'2024-03-01T12:22:33.123','2024-03-0112:22:33.123'.△时区设定：'2024-03-01T12:22:33Z','2024-03-01T12:22:33+8000','2024-03-01T12:22:33-05:00'.

其他的时间字符串，包括（均表示本地时间）：'2024','2024-3-1','2024/3/1','2024/03/01','2023/6/122:00','2023/6/122:05:08','2023/6/122:05:08.123'☆或者用户自行初始化的Date实例：◎注意，用户自行初始化Date实例的时候，浏览器的行为有差异，不同字符串的表示也不同。◎例如：在chrome中，newDate('2024-01-01')表示UTC时间的2024年1月1日，而newDate('2024-1-1')和newDate('2024/01/01')表示本地时间的2024年1月1日。在safari中，不支持newDate('2024-1-1')这种表示方法。◎所以，使用newDate(dataString)时，可使用第三方库解析（如moment），或者使用ECharts.time.parse。◆当需要对个别数据进行个性化定义时：数组项可用对象，其中的value像表示具体的数值，如：[12,34,{value:56,//自定义标签样式，仅对该数据项有效label:{},//自定义特殊itemStyle，仅对该数据项有效itemStyle:{}},10]//或[[12,33],[34,313],{value:[56,44],label:{},itemStyle:{}},[10,33]]◆空值：当某数据不存在时（ps：不存在不代表值为0），可以用'-'或者null或者undefined或者NaN表示。例如，无数据在折线图中可表现为该点是断开的，在其它图中可表示为图形不存在。（39）series-bar.clip=trueboolean类型，从v4.4.0开始支持，用于设置是否裁剪超出坐标系部分的图形，具体裁剪效果根据系列决定：①散点图/带有涟漪特效动画的散点（气泡）图：忽略中心点超出坐标系的图形，但是不裁剪单个图形。②柱状图：裁掉完全超出的柱子，但是不会裁剪只超出部分的柱子。③折线图：裁掉所有超出坐标系的折线部分，拐点图形的逻辑按照散点图处理。④路径图：裁掉所有超出坐标系的部分。⑤K线图：忽略整体都超出坐标系的图形，但是不裁剪单个图形。⑥象形柱图：裁掉所有超出坐标系的部分（从v5.5.0开始支持）。⑦自定义系列：裁掉所有超出坐标系的部分。除了象形柱图和自定义系列，其它系列的默认值都为true，及开启裁剪，如果你觉得不想要裁剪的话，可以设置成false关闭。（40）series-bar.markPointObject类型，用于设置图表标注。（41）series-bar.markLineObject类型，用于设置图表标线。（42）series-bar.markAreaObject类型，用于设置图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。（43）series-bar.zlevelnumber类型，用于设置柱状图所有图形的zlevel值。zlevel用于Canvas分层，不同zlevel值的图形会放置在不同的Canvas中，Canvas分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的Canvas会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。zlevel大的Canvas会放在zlevel小的Canvas的上面。（44）series-bar.z=2number类型，用于设置柱状图组件的所有图形的z值。控制图形的前后顺序，z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的Canvas。（45）series-bar.silentboolean类型，用于设置图形是否不响应和触发鼠标事件，默认为false，即响应和触发鼠标事件。（46）series-bar.animation=trueboolean类型，用于设置是否开启动画。（47）series-bar.animationThreshold=2000number类型，用于设置是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。（48）series-bar.animationDuration=1000number或Function类型，用于设置初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果，示例代码如下：animationDuration:function(idx){//越往后的数据时长越大returnidx*100;}（49）series-bar.animationEasing='cubicOut'string类型，用于设置初始动画的缓动效果。（50）series-bar.animationDelaynumber或Function类型，用于设置初始动画的延迟，支持回调函数，可以通过每个数据返回不同的delay时间实现更戏剧的初始动画效果。示例代码如下：animationDelay:function(idx){//越往后的数据延迟越大returnidx*100;}（51）series-bar.animationDurationUpdate=300number或Function类型，用于设置数据更新动画的时长。支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果，示例代码如下：animationDurationUpdate:function(idx){//越往后的数据时长越大returnidx*100;}（52）series-bar.animationEasingUpdate='cubicInOut'string类型，用于设置数据更新动画的缓动效果。（53）series-bar.animationDelayUpdatenumber或Function类型，用于设置数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的delay时间实现更戏剧的更新动画效果。示例代码如下：animationDelayUpdate:function(idx){//越往后的数据延迟越大returnidx*100;}（54）series-bar.universalTransitionobject类型，从v5.2.0开始支持。用于全局过渡动画相关的配置。全局过渡动画（UniversalTransition）提供了任意系列之间进行变形动画的功能。开启该功能后，每次setOption，相同id的系列之间会自动关联进行动画的过渡。通过配置数据项的groupId和childGroupId，还可以实现诸如下钻、聚合等一对多或者多对一的动画。可以直接在系列中配置universalTransition:true开启该功能。也可以提供一个对象进行更多属性的配置。◆series-bar.universalTransition.enabledboolean类型，用于设置是否开启全局过渡动画。◆series-bar.universalTransition.seriesKeystring或Array类型，用于设置seriesKey决定了如何关联需要动画的系列，未配置时会默认取系列的id。通常该配置为一个字符串，配置为相同seriesKey的系列之间会进行动画的过渡。也可以像下面配置为一个数组：seriesKey:['male','female']配置为数组意味着在动画的时候所有数组项指定的系列会合并为当前系列。例如该配置是指id或者seriesKey为'male'和'female'的系列会合并成当前系列。◆series-bar.universalTransition.divideShapestring类型，用于设置divideShape决定在一对多或者多对一的动画中，当前系列的图形如何分裂成多个图形。目前支持以下选项：

'split'通过一定的算法将分割图形成为多个。

'clone'从当前图形克隆得到多个。为了较好的效果，不同的系列会默认有不同的配置，例如散点图这种图形比较小且复杂的默认采用了'clone'，而柱状图这种更加规则的则默认是'split'。你可以根据你自己的场景需求设置为需要的分裂策略。◆series-bar.universalTransition.delayFuncti