Echarts饼图中间添加文字

第一种方式

getAlarmStatus() {var myChart = echarts.init(document.getElementById('alarmStatus'));var option = {tooltip: {trigger: 'item'},// title: {//     left: '32.5%',//     top: '44%',//     subtext: `{a|${this.alarmCount}}\n{b|告警总数}`,//     subtextStyle:{//         fontSize:14,//         color:"#333",//         rich: {//             a: {//                 fontSize:14,//                 fontWeight:700,//                 color:'#305A5F',//                 align: 'center',//                 lineHeight: 20//             },//             b: {//                 fontSize:14,//                 fontWeight:700,//                 color:'rgba(0,0,0,0.65)',//                 align: 'center',//                 lineHeight: 20//             }//         }//     }// },legend: {top: '5%',right: '5%',orient: 'vertical',top: '40%',icon: 'circle',itemWidth: 10,itemHeight: 10,textStyle: {fontSize: '14px'}},series: [{type: 'pie',radius: ['42%', '57%'],center: ['42%','60%'],avoidLabelOverlap: false,label: {show: true,fontSize: '14px',formatter: function(e) {return `${Math.round(e.percent)}%`},//   color: 'auto'position: 'center'},labelLine: {show: true,length: 5},data: [{ value: 1048, name: '未处理',itemStyle:{color: '#5FAEB0'}},{ value: 735, name: '处理中',itemStyle:{color: '#1D79A7'} },{ value: 580, name: '已取消',itemStyle:{color: '#F0CC58'} },{ value: 484, name: '已关闭',itemStyle:{color: '#C5CCDB'} },],},]};myChart.setOption(option);
},

效果：

这种方式有一个不好的地方就是lable没法在圆环外层展示

第二种方式

getAlarmStatus() {var myChart = echarts.init(document.getElementById('alarmStatus'));var option = {tooltip: {trigger: 'item'},title: {left: '32.5%',top: '44%',subtext: `{a|${this.alarmCount}}\n{b|告警总数}`,subtextStyle:{fontSize:14,color:"#333",rich: {a: {fontSize:14,fontWeight:700,color:'#305A5F',align: 'center',lineHeight: 20},b: {fontSize:14,fontWeight:700,color:'rgba(0,0,0,0.65)',align: 'center',lineHeight: 20}}}},legend: {top: '5%',right: '5%',orient: 'vertical',top: '40%',icon: 'circle',itemWidth: 10,itemHeight: 10,textStyle: {fontSize: '14px'}},series: [{type: 'pie',radius: ['42%', '57%'],center: ['42%','60%'],avoidLabelOverlap: false,label: {show: true,fontSize: '14px',formatter: function(e) {return `${Math.round(e.percent)}%`},//   color: 'auto'// position: 'center'},labelLine: {show: true,length: 5},data: [{ value: 1048, name: '未处理',itemStyle:{color: '#5FAEB0'}},{ value: 735, name: '处理中',itemStyle:{color: '#1D79A7'} },{ value: 580, name: '已取消',itemStyle:{color: '#F0CC58'} },{ value: 484, name: '已关闭',itemStyle:{color: '#C5CCDB'} },],},]};myChart.setOption(option);
},

效果：

Echarts饼图中间添加文字相关推荐

echarts饼图扇区添加点击事件
在echarts最后面添加上这段代码就可以了 function eConsole(param) { //alert(option.series[0].data.length); //alert(opt ...
echarts饼图里添加formatter数据的方法
实现效果:实现鼠标移到指定位置的时候出现多个对应的数值效果(截图-图一): formatter的定义官方解释地址:https://echarts.apache.org/zh/option.html ...
echarts饼图 mouseover中间部分文字样式设置，默认显示总和
需求描述需求要求利用echarts的饼图对企业数量进行统计,要求默认饼图中间显示全部企业数量,鼠标移动上去,则显示对应部分的企业数量,并且设置样式. 效果图具体代码 let TrendCha ...
Echarts饼图,以及显示百分比的文字
这样就可以实现饼图点击某一部分,监听点击事件: 试了其他博友的方式都没用,这个是最简单的方式了. // 处理点击事件并且跳转到相应的百度搜索页面 eCharts.on('click', functio ...
echarts饼图提示文字标签重叠怎么处理
echarts饼图提示文字默认如图二(高危123占比都为0) 即便是存在多个item占比都为0 也是不会重叠的如果如图一提示文字重叠了很可能是series里设置了avoidLabelOver ...
echarts饼图指示器文字颜色设置不同
学习记录,平时开发时遇到过的问题 echarts饼图label文字颜色
echart饼图标签重叠_怎么让ECharts饼图的label标签不重叠?
1.怎么让ECharts饼图的label标签不重叠? 使用ECharts饼图,如果有的项目占比很小,饼图所占空间也比较小的时候,会出现label标签重叠.标签被截断的情况(图1). 可以通过设置rad ...
【Echarts】Echarts给title添加背景图片
Echarts给title添加背景图片通过rich自定义样式,在rich中添加背景图片,然后应用到title上 myChart.setOption({title: {show: true,//主标题 ...
echarts饼图pie中间显示总数
echarts饼图pie中间显示总数有这样一种需求,饼图中间显示总数,当鼠标悬浮指定区域时显示对应区域数值网上搜了好多都是通过zlevel来实现的这种效果,但是如果echarts的背景如果不是纯色 ...

Echarts饼图中间添加文字

第一种方式

第二种方式

Echarts饼图中间添加文字相关推荐

最新文章

热门文章