【百度echarts】实现圆环进度条-代码示例

迈不过友情╰ 2022-07-12 06:18 1453阅读 0赞

# 效果图 #

![这里写图片描述][SouthEast]

# 代码 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="js/echarts.js"></script>
        <title>圆环进度条</title>
    </head>
    <body>
    <div id="pie" style="width: 1366px;height:450px;">
    </body>
    <script type="text/javascript"> //柱状图 var asd =document.getElementById('pie'); var pieChart = echarts.init(asd); var labelTop = { //上层样式 normal : { color :'#0099cc', label : { show : true, position : 'center', formatter : '{b}', textStyle: { baseline : 'bottom', fontSize:26 } }, labelLine : { show : false } } }; var labelFromatter = { //环内样式 normal : { //默认样式 label : { //标签 formatter : function (a,b,c){ return 100 - c + '%'}, // labelLine.length：30, //线长，从外边缘起计算，可为负值 textStyle: { //标签文本样式 color:'black', align :'center', baseline : 'top'//垂直对其方式 } } }, }; var labelBottom = { //底层样式 normal : { color: '#99ccff', label : { show : true, position : 'center', fontSize:22 }, labelLine : { show : false } }, emphasis: { //悬浮式样式 color: 'rgba( 0,0,0,0)' } }; var radius = [80,122];// 半径[内半径，外半径] var pieChartOption = { title : { text: 'echarts实现圆环进度条', subtext: '易唐云网智能科技', x:'center', //正标题样式 textStyle: { fontSize:44, fontFamily:'Arial', fontWeight:100, //color:'#1a4eb0', }, //副标题样式 subtextStyle: { fontSize:28, fontFamily:'Arial', color:"#1a4eb0", }, }, animation:false, tooltip : { // 提示框. Can be overwrited by series or data trigger: 'axis', //show: true, //default true showDelay: 0, hideDelay: 50, transitionDuration:0, borderRadius : 8, borderWidth: 2, padding: 10, // [5, 10, 15, 20] }, series : [ { type : 'pie', center : ['50%', '70%'],//圆心坐标（div中的%比例） radius : radius,//半径 x: '0%', // for funnel itemStyle : labelTop,//graphStyleA,//图形样式 // 当查到的数据不存在（并非为0），此属性隐藏 data : [ {name:'达成率', value:79,itemStyle : labelTop}, {name:'79%', value:21, itemStyle : labelBottom} ] } ] }; pieChart.setOption(pieChartOption); </script>
    </html>

[SouthEast]: /images/20220711/5a19b96b43de4d94858971fd6f2b3e71.png