echarts 饼图属性详解

id：组件id，默认不指定 name：系列名称 type：series图表类型，常用值：bar（柱形图）、line（折线图）、pie（饼图）、scatter（散点图） colorBy: series（同一系列颜色相同）、data（同一维度颜色相同） legendHoverLink：鼠标滑过时legend（图标）是否高亮，默认true selectedMode：是否支持多个选中，可选值：true、false（默认）、single、multiple selectedOffset：选中扇区的偏移距离 clockwise：饼图的扇区是否是顺时针排布，默认true startAngle：起始角度，从0到360度，默认90度 minAngle：最小扇区角度，用于防止某个值过小导致扇区太小影响交互 minShowLabelAngle：小于这个角度的扇区，不显示标签（label、labelLine） roseType：是否展示成南丁格尔图，通过半径区分数据大小，可选值： radius：扇区圆心角展现数据的百分比，半径展现数据的大小 area：所有扇区圆心角相同，仅通过半径展现数据大小 avoidLabelOverlap：是否启用防止标签重叠策略，默认true（开启） stillShowZeroSum：是否在数据和为0的时候仍显示扇区，默认true cursor：鼠标悬浮时在图形元素上时鼠标的样式是什么，如：pointer zlevel：图形的zlevel值，用于canvas分层，数值大的展示在上面 z：图形的z值，优先级比zlevel低，用韵canvas分层，数值大的展示在上面 left：组件离容器左侧的距离，可选值：10（像素）、10%、left、cneter、right top：件离容器上侧的距离，可选值：10（像素）、10%、top、middle、bottom right：组件离容器右侧的距离，可选值：10（像素）、10% bottom：组件离容器下侧的距离，可选值：10（像素）、10% width：宽度，默认auto（自适应） height：高度，默认auto（自适应） center：饼图的中心坐标，数组的第一项是横坐标，第二项是纵坐标，如：[400, 300]、['50%', '50%'] radius：饼图的半径，如：10，10%，[0,10]（内半径，外半径） seriesLayoutBy：数据集映射方式，可选值：column（默认）、row datasetIndex：数据集index，如果series.data没有指定，并且dataset存在，那么就会使用dataset dimensions：数据维度 encode：自定义数据映射方式 dataGroupId：数据组id data：series中使用的数据，一般使用dataset中的数据，实现数据与配置分离 silent：图形是否不响应和触发鼠标事件，默认为false

animation：是否开启动画，默认true animationType：初始动画效果，可选值：expansion（沿圆弧展开，默认）、scale（缩放效果） animationTypeUpdate：更新数据时的动画效果，可选值：transition（从起始到终止角度过渡）、scale（数据整体重新沿圆弧展开） animationThreshold：动画阈值，动画数量大于该值会关闭动画，默认2000 animationDuration：动画持续时间，默认1000ms animationEasing：动画缓动效果，如：cubicOut animationDelay：动画初始延时时间 animationDurationUpdate：动画更新时长 animationEasingUpdate：动画更新缓动时长 animationDelayUpdate：动画延时更新时长 //universalTransition：全局过渡动画配置 universalTransition.enabled：是否开启全局延时动画 universalTransition.seriesKey：如何关联需要动画的系列，默认取系列的id universalTransition.divideShape：对多或者多对一的动画中，当前系列的图形如何分裂成多个图形，可选值： split：通过一定的算法将分割图形成为多个（柱状图默认） clone：从当前图形克隆得到多个（散点图默认） universalTransition.delay：一对多或者多对一的动画中每个图形的动画延时

showEmptyCircle：是否在无数据的时候显示一个占位圆，默认true emptyCircleStyle.color：颜色，如：rgb(255,255,255)，rgba(255,255,255,1)，#fff emptyCircleStyle.borderColor：边框颜色 emptyCircleStyle.borderWidth：边框宽度，默认无边框 emptyCircleStyle.borderType：边框线型，可选值：solid（实线，默认）、dashed、dotted emptyCircleStyle.borderDashOffset：虚线偏移量 emptyCircleStyle.borderCap：线段末端的绘制方式，可选值：butt（方形，默认）、round、square（矩形） emptyCircleStyle.borderJoin：连接属性，可选值：bevel（三角形，默认）、round、miter（菱形） emptyCircleStyle.borderMiterLimit：菱形斜接面比例，默认为10，borderJoin为miter时有效 emptyCircleStyle.shadowBlur：阴影模糊大小 emptyCircleStyle.shadowColor：阴影颜色 emptyCircleStyle.shadowOffsetX：阴影水平偏移距离 emptyCircleStyle.shadowOffsetY：阴影垂直偏移距离 emptyCircleStyle.opacity：阴影透明度, 默认1, 支持从0到1的数字, 0表示不显示

label.show：是否显示标签,默认false label.position：文本标签位置，可选值：outside（outer）、inside（inner）、center label.rotate：标签旋转,true（径向排布）、数值（旋转角度，从-90度到90度,正值是逆时针） label.formatter：标签内容格式器，支持字符串模板和回调函数两种形式 模板字符串：formatter: '{b}: {@score}' {a}：系列名 {b}：数据名 {c}：数据值 {@×××}：维度名对应的数据，如{@product}：表示维度名为product的值 {@[n]}：维度n对应的数据，如{@[2]}：表示维度2对应的数据，维度从0开始计数 回调函数：(params: Object|Array) => string label.color：标签颜色，如："#fff" label.fontStyle：字体风格，可选值：normal、italic、oblique label.fontWeight：字体粗细，可选值：normal、bold、bolder、lighter、100|200|300|400... label.fontFamily：字体设置，可选值：sans-serif、serif、monospace、Arial、Courier New、Microsoft YaHei等 label.fontSize：字体大小，如：12 label.width：文本宽度 label.height：文本高度 label.lineHight：行高 label.backgroundColor：标签背景色，如：'#123234', 'red', 'rgba(0,23,11,0.3)' label.borderColor：边框颜色 label.borderWidth：边框宽度 label.borderType：边框类型，可选值：solid、dashed、dotted、5、[5, 10] label.borderDashOffset：虚线偏移量 label.borderRadius：文字块的圆角，默认为0 label.padding：文字块的内边距，如：[3, 4, 5, 6]（上、右、下、左）、3,4、3（[3,3,3,3]） label.shadowColor：阴影颜色 label.shadowBlur：阴影长度 label.shadowOffsetX：阴影水平偏移 label.shadowOffsetY：阴影垂直偏移 label.textBorderColor：文本边框颜色 label.textBorderWidth：文本边框宽度 label.textBorderType：文本边框类型，可选值：solid、dashed、dotted、5、[5,10]等 label.textBorderDashOffset：文字虚线偏移量 label.textShadowColor：文字阴影颜色 label.textShadowBlur：文字阴影大小 label.textShadowOffsetX：阴影水平偏移 label.textShadowOffsetY：阴影垂直偏移 label.overflow：文本超出长度后，是否截断或者换行 none：不截断或者换行，默认 truncate：截断 break：单词间换行 breanAll：除单词间换行，单词内也换行 label.ellipsis：文本超出长度，截断（truncate）后显示的文本，如:... label.lineOverflow：文本超过高度是否截断，配置label.height生效 none：不截断 truncate：截断 label.rich：自定义富文本样式 alignTo：标签的对齐方式，position值为'outer'时有效，可选值： none：label line的长度为固定值 labelLine：label line的末端对齐 edge：文字对齐 edgeDistance：文边距离，仅当label.position为'outer'并且label.alignTo为'edge'时有效，如：20% bleedMargin：文本长度，超出长度被裁剪为"..." distanceToLabelLine:文字与 label line之间的距离,如：5

labelLine.show：是否显示视觉引导线 labelLine.showAbove：是否显示在图形上方 labelLine.length：视觉引导线第一段的长度 labelLine.length2：视觉引导项第二段的长度 labelLine.smooth：是否平滑视觉引导线，默认false labelLine.minTurnAngle：视觉引导线的最小转角，0-180度 labelLine.maxSurfaceAngle：引导线与扇区法线的最大夹角，0-180度 labelLine.lineStyle.color：颜色，如：rgb(255,255,255)，rgba(255,255,255,1)，#fff labelLine.lineStyle.width：宽度 labelLine.lineStyle.type：线型，如：solid、dashed、dotted、[5,10]等 labelLine.lineStyle.dashOffset：虚线偏移量 labelLine.lineStyle.cap：线段末端绘制方式，可选值：butt（方形，默认）、round、square（矩形） labelLine.lineStyle.join：连接属性，可选值：bevel（三角形，默认）、round、miter（菱形） labelLine.lineStyle.miterLimit：菱形斜接面比例，默认为10，负数、0、Infinity、NaN均会被忽略 labelLine.lineStyle.shadowBlur：阴影模糊大小 labelLine.lineStyle.shadowColor：阴影颜色 labelLine.lineStyle.shadowOffsetX：阴影水平偏移 labelLine.lineStyle.shadowOffsetY：阴影垂直偏移 labelLine.lineStyle.opacity：透明度，默认为1，数值为从0到1的数字（0不显示）

labelLayout.hideOverlap：是否隐藏重叠的标签 labelLayout.moveOverlap：在标签重叠的时候是否挪动标签位置以防止重叠 labelLayout.x：标签的水平位置，如：2（像素值）、20% labelLayout.y：标签的垂直位置，如：2（像素值）、20% labelLayout.dx：标签在 x 方向上的像素偏移，可以和x一起使用 labelLayout.dy：标签在 y 方向上的像素偏移，可以和y一起使用 labelLayout.rotate：标签旋转角度 labelLayout.width：标签宽度 labelLayout.height：标签高度 labelLayout.align：标签水平对其方式，可选值：left、center、right labelLayout.verticalAlign：标签垂直对齐方式，可选值：top、middle、bottom labelLayout.fontSize：标签字体大小 labelLayout.draggable：标签是否可以拖拽 labelLayout.labelLinePoints：标签引导线三个点的位置，格式为：[[x, y], [x, y], [x, y]]

itemStyle.color：颜色，默认为series.color，可设置：rgb(255,255,255)，rgba(255,255,255,1)，#fff itemStyle.borderColor：边框颜色 itemStyle.borderWidth：边框宽度，默认无宽度 itemStyle.borderType：边框线型，可选值：solid（默认）、dashed、dotted itemStyle.borderDashOffset：虚线偏移量 itemStyle.borderCap：线段末端的绘制方式，可选值：butt（方形，默认）、round、square（矩形） itemStyle.borderJoin：末端连接方式，可选值：bevel（三角形连接）、round、miter（菱形） itemStyle.borderMiterLimit：斜截面限制比列，borderJoin为miter时有效 itemStyle.shadowBlur：阴影模糊大小 itemStyle.shadowColor：阴影颜色 itemStyle.shadowOffsetX：阴影水平偏移 itemStyle.shadowOffsetY：阴影垂直偏移 itemStyle.opacity：柱条透明度，默认为1，0表示不显示 itemStyle.borderRadius：饼图扇形区块的内外圆角半径，如：10、10%、[10,20]、[10%,20%] itemStyle.decal：图形贴花图案，在aria.enabled、aria.decal.show都是true时生效，如果为none表示不使用贴花图案 itemStyle.decal.symbol：贴花图案，如：rect、circle、image: //url、path://等 itemStyle.decal.symbolSize：图案占比大小，从0到1 itemStyle.decal.symbolKeepAspect：是否保持图案长宽比，默认为true itemStyle.decal.color：贴花图案颜色 itemStyle.decal.backgroundColor：贴花图案背景色 itemStyle.decal.dashArrayX：贴花图案横向模式 itemStyle.decal.dashArrayY：贴花图案纵向模式 itemStyle.decal.rotation：图案旋转角度（弧度值），从-Math.PI到Math.PI itemStyle.decal.maxTileWidth：生成的图案在未重复之前的宽度上限，通常不需要设置 itemStyle.decal.maxTileHeight：生成的图案在未重复之前的高度上限，通常不需要设置

emphasis.scale：是否开启高亮后扇区的放大效果，默认true emphasis.scaleSize：高亮后扇区的放大尺寸，默认10 emphasis.focus：高亮图形时，是否淡出其它数据的图形已达到聚焦的效果，可选值： none：不淡出其他图形，默认 self：只聚焦（不淡出）当前高亮的数据的图形 series：聚焦当前高亮的数据所在的系列的所有图形 emphasis.blurScope：配置淡出范围，可选值： coordinateSystem：淡出范围为坐标系，默认 series：淡出范围为系列 global：淡出范围为全局 emphasis.label：文本标签高亮配置，属性同label emphasis.labelLine：标签视觉引导线高亮配置，属性同labelLine emphasis.itemStyle：图形高亮配置，属性同itemStyle

blur.label：标签淡出配置，属性同label blur.labelLine：标签视觉引导线淡出配置，属性同labelLine blur.itemStyle：图形淡出配置，属性同itemStyle

markPoint.symbol：标记的图形，可选值：circle、rect、round、pin、image://url、path://等 markPoint.symbolSize：标记的大小，默认50 markPoint.symbolRotate：标记的旋转角度，正值表示逆时针 markPoint.symbolKeepAspect：如果symbol是path://的形式，是否在缩放时保持该图形的长宽比 markPoint.symbolOffset：标记偏移，如[0,0] markPoint.silent：图形是否不响应和触发鼠标事件，默认为 false markPoint.data：标注的数据数组 markPoint.label：标注的文本，属性同label markPoint.itemStyle：标注的样式，属性同itemStyle markPoint.emphasis：标注的高亮样式，内含label、itemStyle markPoint.blur：标注的淡出样式，内含label、itemStyle //标注的动画属性 markPoint.animation：是否开启动画，默认true markPoint.animationThreshold：动画阈值，动画数量大于该值会关闭动画，默认2000 markPoint.animationDuration：动画持续时间，默认1000ms markPoint.animationEasing：动画缓动效果，如：cubicOut markPoint.animationDelay：动画初始延时时间 markPoint.animationDurationUpdate：动画更新时长 markPoint.animationEasingUpdate：动画更新缓动时长 markPoint.animationDelayUpdate：动画延时更新时长

markLine.symbol：标线两端的标记类型，可选值：circle、rect、round、pin、image://url、path://等 markLine.symbolSize：标线两端的标记大小，默认50 markLine.silent：图形是否不响应和触发鼠标事件，默认为 false markLine.precision：标线数值的精度，默认为2 markLine.data：标线的数据数组 markLine.label：标注的文本，属性同label markLine.lineStyle：标注的样式，属性同lineStyle markLine.emphasis：标注的高亮样式，内含label、lineStyle markLine.blur：标注的淡出样式，内含label、lineStyle //标注线的动画属性 markLine.animation：是否开启动画，默认true markLine.animationThreshold：动画阈值，动画数量大于该值会关闭动画，默认2000 markLine.animationDuration：动画持续时间，默认1000ms markLine.animationEasing：动画缓动效果，如：cubicOut markLine.animationDelay：动画初始延时时间 markLine.animationDurationUpdate：动画更新时长 markLine.animationEasingUpdate：动画更新缓动时长 markLine.animationDelayUpdate：动画延时更新时长

markArea.silent：图形是否不响应和触发鼠标事件，默认为 false markArea.data：标注的数据数组 markArea.label：标注区域的文本，属性同label markArea.itemStyle：标注区域的样式，属性同itemStyle markArea.emphasis：标注区域的高亮样式，内含label、itemStyle markArea.blur：标注区域的淡出样式，内含label、itemStyle //标注区域的动画属性 markArea.animation：是否开启动画，默认true markArea.animationThreshold：动画阈值，动画数量大于该值会关闭动画，默认2000 markArea.animationDuration：动画持续时间，默认1000ms markArea.animationEasing：动画缓动效果，如：cubicOut markArea.animationDelay：动画初始延时时间 markArea.animationDurationUpdate：动画更新时长 markArea.animationEasingUpdate：动画更新缓动时长 markArea.animationDelayUpdate：动画延时更新时长

tooltip.position：提示框位置，如：[10, 10]（左侧10px、上侧10px）、[10%,10%] tooltip.formatter：提示框内容格式化器 tooltip.backgroundColor：提示框背景色 tooltip.borderColor：提示框边框颜色 tooltip.borderWidth：提示框边框宽度 tooltip.padding：提示框内边距 padding: 5 // 设置内边距为 5 padding: [5, 10] // 设置上下的内边距为 5，左右的内边距为 10 padding: [ // 分别设置四个方向的内边距 5, // 上 10, // 右 5, // 下 10, // 左 ] tooltip.textStyle：提示框文本样式 tooltip.textStyle.color：文字颜色 tooltip.textStyle.fontStyle：字体设置，可选值：normal、italic、oblique tooltip.textStyle.fontWeight：字体粗细，可选值：normal、bold、bolder、lighter、100|200| 300|400... tooltip.textStyle.fontFamily：字体，可选值：serif、sans-serif、monospace、Arial、Courier New、NewMicrosoft YaHei等 tooltip.textStyle.fontSize：字体大小 tooltip.textStyle.lineHeight：行高 tooltip.textStyle.width：文本宽度 tooltip.textStyle.height：文本高度 tooltip.textStyle.textBorderColor：边框颜色 tooltip.textStyle.textBorderWidth：边框宽度 tooltip.textStyle.textBorderType：边框线性，可选值：solid、dashed、dotted、[5,10] tooltip.textStyle.textBorderDashOffset：虚线偏移量 tooltip.textStyle.textShadowColor：字体阴影颜色 tooltip.textStyle.textShadowBlur：字体阴影长度 tooltip.textStyle.textShadowOffsetX：字体水平偏移 tooltip.textStyle.textShadowOffsetY：字体垂直偏移 tooltip.textStyle.overflow：文本超出宽度是否阶段或者换行，可选值： none：不截断或者换行 truncate：截断 break：单词间换行 breakAll：单词间、单词内换行 tooltip.textStyle.ellipsis：overflow为truncate时，文末显示文本 tooltip.textStyle.lineOverflow：文本超过高度后是否截断，可选值：none、truncate tooltip.extraCssText：额外附加到浮层的css样式，如：box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

原文：https://blog.csdn.net/weixin_43931625/article/details/121068654