当前位置: 代码迷 >> 综合 >> echarts饼状图圆环位置修改样式调整
  详细解决方案

echarts饼状图圆环位置修改样式调整

热度:53   发布时间:2024-01-26 14:09:23.0

作为笔记(echarts篇)pie

图例组件:

legend: {type: 'scroll',//图例数量过多时,可以使用滚动left: 'center',bottom: this.ringData.legendBottom || 0,//设置位置data: this.ringData.name,textStyle: {color: '#fff'//文字颜色},pageIconColor: '#fff',//type=scroll时,设置翻页按钮颜色pageTextStyle: {color: '#23d7cc'//type=scroll时,设置翻页页码颜色}
}

列表:

series: [{type: 'pie',//类型
//设置圆饼大小 string(50%)圆饼 Array(['40%','60%']) 圆环 40%内圆环大小 60% 外圆环大小  radius: this.ringData.radius || ['40%', '60%'],label: {formatter: '{b}\n占比:{d}%'},center: this.ringData.center || ['50%', '55%'],//控制圆位置data: this.ringData.data,//展示数据animationEasing: 'cubicInOut',//动画animationDuration: 2600}
]