项目场景：

在饼图中间加入圈和文字，且会随着饼图位置改变，三者位置处于相对静止

效果如下：

代码描述

option = {backgroundColor: '#000',tooltip: {trigger: 'item',formatter: '{b} <br/>{c}: ({d}%)',},color: ['#61a0a8', '#d48265', '#23e5fd'],legend: {orient: 'vertical',top: 'center',left: '60%',// formatter:'{b}<br/>{c})',itemGap: 30,textStyle: {color: 'white',fontSize: '20px',// lineHeight: '50px'},icon: 'circle',itemWidth: 8,},series: [{name: 'Access From',type: 'pie',radius: ['60%', '70%'],center: ['30%', '50%'],avoidLabelOverlap: false,label: {normal: {show: true,position: 'center',color:'#fff',// text: '1111'formatter: '{total|2000}\n{active|总面积}', rich: { total:{ fontSize: 35, // fontFamily : "微软雅黑", color:'#23e5fd'                     },active: { // fontFamily : "微软雅黑", fontSize: 16, color:'#fff', lineHeight:30,             },          }             },       },        labelLine: {show: false,},data: [{ value: 300, name: '公共区面积' },{ value: 120, name: '未占用面积' },{ value: 3180, name: '已占用面积' },],},{color: ['#61a0a8'],type: 'pie',// clockWise: false, //顺时加载hoverAnimation: false, //鼠标移入变大center: ['30%', '50%'],radius: ['48%', '50%'],label: {normal: {show: false}},data: [{value: 9,name: '',itemStyle: {                    }}]},],}

解决方案：

圈用一个新的饼图实现
文字：在label中，且可以自定义多种文字属性

补充：：
用的时候label中无法使用nomal
label: {
show: true,
position: ‘center’,
color:’#fff’,
// text: ‘1111’
formatter: ‘{total|2000}\n{active|总面积}’,
rich: {
total:{
fontSize: 35,
// fontFamily : “微软雅黑”,
color:’#23e5fd’
},
active: {
// fontFamily : “微软雅黑”,
fontSize: 16, color:’#fff’,
lineHeight:30,
},
},

echarts 饼图中间画圈＋文字相关推荐

java 后端使用 Graphics2D 制作海报，画echarts图，带工具类，各种细节：如头像切割成圆形，文字换行算法（完美实验success），解决画上文字、图片后不清晰问题
文章目录先看成品前言一.项目目录结构一.海报制作PosterUtil.java工具类 1. 描述 2. 代码二.测试生成海报 1. 描述 2. 直接上代码四.其他测试 1. Test1_C ...
echarts饼图内部百分比外部显示文字和数值
UI给出了这样一张图,饼图上不仅显示文字和数值,内部也要显示百分比.由于series中的label只能设置成饼图内部或者饼图外部,无法实现内外部兼有.此时可以在series中设置两个相同的配置对象,让 ...
echarts饼图提示文字标签重叠怎么处理
echarts饼图提示文字默认如图二(高危123占比都为0) 即便是存在多个item占比都为0 也是不会重叠的如果如图一提示文字重叠了很可能是series里设置了avoidLabelOver ...
echarts饼图指示器文字颜色设置不同
学习记录,平时开发时遇到过的问题 echarts饼图label文字颜色
echart饼图标签重叠_怎么让ECharts饼图的label标签不重叠?
1.怎么让ECharts饼图的label标签不重叠? 使用ECharts饼图,如果有的项目占比很小,饼图所占空间也比较小的时候,会出现label标签重叠.标签被截断的情况(图1). 可以通过设置rad ...
echarts图片上加上自定义文字或其它下载
想要下载echarts的图片,并且想在图片上加上一条条件之类的文字. 1.在echarts的自定义一个方法,下载前设置 graphic 属性,下载后再去掉属性(应该可以行通): 2.获取到你的echa ...
Echarts 饼图视觉引导线隐藏和显示
由于饼图的数据过多,文字比较密集所以决定对数量超过10的数据隐藏其视觉引导线.直接上代码 var arr1=[{value: "10", name: "资金运用" ...
echarts 饼图基本配置
var option = {//饼图不需要配置x和y轴series: [{type: "pie",//指定图表类型为饼图data: pieData,// radius:" ...
Echarts饼图之数据展示
Echarts饼图之数据展示 1.组件简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,C ...

echarts 饼图中间画圈＋文字

项目场景：

代码描述

解决方案：

echarts 饼图中间画圈＋文字相关推荐

最新文章

热门文章

echarts 饼图 中间 画圈 ＋ 文字

项目场景：

代码描述

解决方案：

echarts 饼图 中间 画圈 ＋ 文字相关推荐

最新文章

热门文章

echarts 饼图中间画圈＋文字

echarts 饼图中间画圈＋文字相关推荐