百度Echarts饼图系列之多个百分比环形图-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:450px;"></div>
    <script type="text/javascript">
        var data = [
          {
            name: 'HTML5',
            value: 80
          },{
            name: 'CSS3',
            value: 39
          },{
            name: 'VUE',
            value: 35
          },{
            name: 'NODE',
            value: 30
          }]
          
          var titleArr= [], seriesArr=[];
          colors=[['#389af4', '#dfeaff'],['#ff8c37', '#ffdcc3'],['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0']]
          data.forEach(function(item, index){
            titleArr.push(
              {
                text:item.name,
                left: index * 25 + 12 +'%',
                top: '75%',
                textAlign: 'center',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: '16',
                  color: colors[index][0],
                  textAlign: 'center',
                },
              }    
            );
            seriesArr.push(
              {
                name: item.name,
                type: 'pie',
                clockWise: false,
                radius: [60, 70],
                itemStyle:  {
                  normal: {
                    color: colors[index][0],
                    shadowColor: colors[index][0],
                    shadowBlur: 0,
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                  }
                },
                hoverAnimation: false,
                center: [index * 25 + 12 +'%', '50%'],
                data: [{
                  value: item.value,
                  label: {
                    normal: {
                      formatter: function(params){
                        return params.value+'%';
                      },
                      position: 'center',
                      show: true,
                      textStyle: {
                        fontSize: '20',
                        fontWeight: 'bold',
                        color: colors[index][0]
                      }
                    }
                  },
                }, {
                  value: 100-item.value,
                  name: 'invisible',
                  itemStyle: {
                    normal: {
                      color: colors[index][1]
                    },
                    emphasis: {
                      color: colors[index][1]
                    }
                  }
                }]
              }  
            )
          });
           
          
        option = {
          backgroundColor: "#fff",
          title:titleArr,
          series: seriesArr
        }
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：