echarts饼图中间显示文字,echarts饼图大小设置
ECharts饼图中间显示文字可参考如下代码,最简单的方式就是通过title控制:
var scale = 1; var echartData = [{ value: 2154, name: '曲阜师范大学' }, { value: 3854, name: '潍坊学院' }, { value: 3515, name: '青岛职业技术学院' }, { value: 3515, name: '淄博师范高等专科' }, { value: 3854, name: '鲁东大学' }, { value: 2154, name: '山东师范大学' }] option = { legend: { orient : 'vertical', x : 'left', data:['山东师范大学','鲁东大学','曲阜师范大学'/*,'潍坊学院','青岛职业技术学院','淄博师范高等专科'*/] }, //backgroundColor: '#031f2d', tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, title: { text:'总考生数', left:'center', top:'45%', // padding:[24,0], textStyle:{ color:'#031f2d', fontSize:20*scale, align:'center' } }, series: [{ name: '考生数量', type: 'pie', //radius: ['45%', '50%'], radius : ['50%', '70%'], hoverAnimation: true, //color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'], /* labelLine: { normal: { show: false } },*/ itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, }, data: echartData }] };
运行结果如下:
ECharts饼图的大小设置
可以通过设置series.radius属性进行控制。radius表示饼图的半径大小,可以设置成百分比字符串或者数字。当设置为百分比字符串时,相对于容器宽度计算,例如'55%'表示半径为容器宽度的55%;当设置为数字时,则表示饼图半径的像素值。具体操作如下:
option = { // 其他配置项... series: [{ name: '访问来源', type: 'pie', radius: ['50%', '70%'], center: ['50%', '60%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], label: { normal: { show: true, position: 'center', textStyle: { fontSize: '20', fontWeight: 'bold' } }, } }] };
上述代码中的radius属性设置了一个数组,第一个元素表示内径大小,第二个元素表示外径大小,可以根据实际需求进行调整。
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.cn/js/5760.html
原文地址:https://tangjiusheng.cn/js/5760.html