echarts 饼图位置怎么调整

2024-10-13 13:29:33

1、ECharts 图表使用 pie 来实现饼图,饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。饼图更适合表现数据相对于总数的百分比等关系。如果只是表示不同类目数据间的大小,建议使用柱状图,人们对于微小的弧度差别相比于微小的长度差别更不敏感,或者也可以通过配置roseType显示成南丁格尔图,通过半径大小区分数据的大小。

echarts 饼图位置怎么调整

2、series[i]-pie.type | string[ default: 'pie' ]series[i]-pie.name | string系列名称,用于tooltip的显示,legend的图例筛选,在setOption更新数据和配置项时用于指定对应的系列。series[i]-pie.legendHoverLink | boolean[ default: true ]是否启用图例hover 时的联动高亮。series[i]-pie.hoverAnimation | boolean[ default: true ]是否开启 hover 在扇区上的放大动画效果。series[i]-pie.hoverOffset | number[ default: 10 ]

echarts 饼图位置怎么调整

3、高亮扇区的偏移距离。series[i]-pie.selectedMode | boolean, string[ default多唉捋胝: false ]选中模式,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选'single','multiple',分别表示单选还是多选。series[i]-pie.selectedOffset | number[ default: 10 ]选中扇区的偏移距离。series[i]-pie.clockwise | boolean[ default: true ]饼图的扇区是否是顺时针排布。series[i]-pie.startAngle | number[ default: 90 ]起始角度,支持范围[0, 360]。series[i]-pie.minAngle | number[ default: 0 ]

echarts 饼图位置怎么调整

4、最小的扇区角度(0 ~ 360),用于防止某个值过小导致扇区太小影响交互。series[i]-pie.roseType | boolean, string[ default: 熠硒勘唏false ]是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:'radius'扇区圆心角展现数据的百分比,半径展现数据的大小。'area'所有扇区圆心角相同,仅通过半径展现数据大小。series[i]-pie.avoidLabelOverlap | boolean[ default: true ]是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。如果不需要开启该策略,例如圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为false。series[i]-pie.stillShowZeroSum | boolean[ default: true ]是否在数据和为0(一般情况下所有数据为0) 的时候不显示扇区。series[i]-pie.cursor | string[ default: 'pointer' ]鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的cursor。series[i]-pie.label | Object饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等,label选项在 ECharts 2.x 中放置于itemStyle.normal下,在 ECharts 3 中为了让整个配置项结构更扁平合理,label被拿出来跟itemStyle平级,并且跟itemStyle一样拥有normal,emphasis两个状态。series[i]-pie.labelLine | Object标签的视觉引导线样式,在label 位置设置为'outside'的时候会显示视觉引导线。series[i]-pie.itemStyle | Object图形样式,有normal和emphasis两个状态。normal是图形在默认状态下的样式;emphasis是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。series[i]-pie.zlevel | number[ default: 0 ]所有图形的 zlevel 值。zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。zlevel大的 Canvas 会放在zlevel小的 Canvas 的上面。series[i]-pie.z | number[ default: 2 ]组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低,而且不会创建新的 Canvas。

echarts 饼图位置怎么调整

5、需要调整的其实就是label的位置 但是echarts的API 中 定义了 label["position"]属性只有3种: inner/inter , outer , center并不支持自定义图例偏移 选用outer的话 会默认由饼块中间部分引出图例 只能设置labelLine 的length和length2来微调图例与饼图的距离

echarts 饼图位置怎么调整
猜你喜欢