echarts饼图内部百分比外部显示文字和数值

UI给出了这样一张图，饼图上不仅显示文字和数值，内部也要显示百分比。由于series中的label只能设置成饼图内部或者饼图外部，无法实现内外部兼有。此时可以在series中设置两个相同的配置对象，让两个饼图重合在一起。但一个设为内部，一个设为外部，其余的配置基本不变，代码如下

   let pieEchart = this.$echarts.init(this.$refs.xxpxPie)let title = '集团公司培训\n\n' +this.barTextCenter+'人次'let option = {title:{text:title,textStyle:{color:'#dbbb95',fontSize:45,},left:'40%',top:'43%',},series:[{type: 'pie',radius: ['52%', '92%'],color:['#3dc5d1', '#ee4e40', '#fbb321'],itemStyle: {borderColor: '#201f1d',borderWidth: 9,          },label: {show: true,  //由于默认是外部，所以这里没有写position:'outside'color:'#dbba97',fontSize: '40',formatter: '{b}\n\n{c}人次',padding: [0, -180, 120, -160],  //设置外部文字的位置},labelLine: {show: true,length:48,length2:220,// minTurnAngle:120,  //两条指示线之间的角度// maxSurfaceAngle:45, //指示线与扇形的角度lineStyle:{color:'#adadad',width:2}},data: this.pieData,},{type: 'pie',avoidLabelOverlap: true,  //避免标签重叠radius: ['52%', '92%'],color:['#3dc5d1', '#ee4e40', '#fbb321'],itemStyle: {borderColor: '#201f1d',borderWidth: 9,          },label: {show: true,position: 'inner',  //将百分比显示在饼图内部color:'#fff',fontSize: '37',formatter: '{d}%',fontWeight:'bold',},labelLine: {show: true,length:48,length2:220,lineStyle:{color:'#adadad',width:2}},data: this.pieData,}]}pieEchart.setOption(option)

echarts饼图内部百分比外部显示文字和数值相关推荐

echarts 饼图内部显示百分比，外部显示文字说明
为了实现产品的要求,饼图中既显示百分比又显示文字的说明(如下图) 查了echarts 文档,并不能通过简单的配置来实现,原因如下:在单个serie的label中,只能设置一个label,位置可以选择在 ...
echarts饼图显示占比(内部和外部显示百分比设置)
1.效果图: 2.代码: series: [{name: '产量',type: 'pie',center: ['22%', '50%'],radius: ['0', '82%'],avoidLabel ...
echarts 饼图中间画圈＋文字
项目场景: 在饼图中间加入圈和文字,且会随着饼图位置改变,三者位置处于相对静止效果如下: 代码描述 option = {backgroundColor: '#000',tooltip: {trigg ...
echarts饼图中间默认内容显示与data数据显示切换
记录下,也折腾了两三个小时.... 默认显示如下: 自定义数据显示如下: option设置: that.chart.setOption({tooltip: {show:false,trigger: ' ...
echarts 饼图引导线文本显示不全
可以通过radius属性控制饼图大小来调整. series: [{ name: "行政区", type: "pie", radius: ["4 ...
echarts 饼图标签过多导致显示不全
先看一下缺失效果: 可以看到,紫色和红色的数据是没有显示出来的,这是因为标签过多导致标签重叠了,只要让重叠的标签显示出来就可以了,配置里面加上hideOverlap:false ...series: ...
qpieseries显示百分比_为饼图添加百分比显示效果
FpChart 中的饼图支持百分比的显示提示,不过默认是将饼图的值直接乘以 100% 进行显示,不会自动对所有数据进行百分比计算默认显示效果如下: 为了显示各部分数据所占的百分比,我们可以通过以下代 ...
ECharts 饼图数据放在饼图内部显示
1.业务需求将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值原样式如下 2.业务实现调整代码如下,核心语句已标记注释 option = {title: {text: 'Ref ...
echarts 饼图效果，显示其对应数值及百分比
需求:echarts 饼图效果,显示其对应数值及百分比代码 <Chart1 :ecStyle="ecStyle" :ecOption="optionRight2& ...

echarts饼图内部百分比外部显示文字和数值

echarts饼图内部百分比外部显示文字和数值相关推荐

最新文章

热门文章