echarts 饼图内部显示百分比，外部显示文字说明

为了实现产品的要求，饼图中既显示百分比又显示文字的说明（如下图）

查了echarts 文档，并不能通过简单的配置来实现，原因如下：在单个serie的label中，只能设置一个label，位置可以选择在饼图内部inner，或者饼图外部outer，无法实现同时实现内部、外部显示，想到设置两个serie，让两个饼图完全重合即可，一个外标签显示文字说明，另一个显示内标签，实现百分比。

    series: [// 画外部描述的饼图{type: "pie",radius: "65%",center: ["50%", "50%"],data: [{name: "深圳市",value: 22839,},{name: "长沙市",value: 6105,},{name: "重庆市",value: 24313,},{name: "天津市",value: 43766,},{name: "武汉市",value: 56173,},],label: {show: true,position: "outside",color: "#7F8FA4",fontSize: 12,},labelLine: {show: true,},},// 画内部百分比的饼图{type: "pie",data: [{name: "深圳市",value: 22839,},{name: "长沙市",value: 6105,},{name: "重庆市",value: 24313,},{name: "天津市",value: 43766,},{name: "武汉市",value: 56173,},],label: {show: true,position: "inside",formatter: `{d}%`,},},],

echarts 饼图内部显示百分比，外部显示文字说明相关推荐

echarts饼图内部百分比外部显示文字和数值
UI给出了这样一张图,饼图上不仅显示文字和数值,内部也要显示百分比.由于series中的label只能设置成饼图内部或者饼图外部,无法实现内外部兼有.此时可以在series中设置两个相同的配置对象,让 ...
echarts饼图显示百分比和显示内容字体及大小属性设置
源码 let circularGraph= {title: "标题",head: false,tuglie: ["微信","支付宝",&qu ...
echarts 饼图/环形图鼠标经过显示文本标签图例icon
文章目录鼠标经过显示文本标签效果关键部分图例 icon 效果关键部分完整实现鼠标经过显示文本标签效果关键部分 label: { // 饼图图形上的文本标签normal: { // ...
echarts饼图在缩放是label显示省略号的问题
1.在使用echarts最新版本的时候会发现在使用饼状图的时候会自动隐藏显示... 如下: 在添加这个 overflow: 'none', 属性之后显示正常
echarts饼图显示占比(内部和外部显示百分比设置)
1.效果图: 2.代码: series: [{name: '产量',type: 'pie',center: ['22%', '50%'],radius: ['0', '82%'],avoidLabel ...
Echarts饼图,以及显示百分比的文字
这样就可以实现饼图点击某一部分,监听点击事件: 试了其他博友的方式都没用,这个是最简单的方式了. // 处理点击事件并且跳转到相应的百度搜索页面 eCharts.on('click', functio ...
ECharts 饼图数据放在饼图内部显示
1.业务需求将数据显示在饼图内部,格式化百分比显示,鼠标放上去显示具体名称和数值原样式如下 2.业务实现调整代码如下,核心语句已标记注释 option = {title: {text: 'Ref ...
echarts 饼图效果，显示其对应数值及百分比
需求:echarts 饼图效果,显示其对应数值及百分比代码 <Chart1 :ecStyle="ecStyle" :ecOption="optionRight2& ...
解决echarts饼图显示百分比，和显示内容字体及大小,如何给eCharts饼图区域指定颜色
解决echarts饼图显示百分比,和显示内容字体及大小 // 基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document. ...

echarts 饼图内部显示百分比，外部显示文字说明

echarts 饼图内部显示百分比，外部显示文字说明相关推荐

最新文章

热门文章