百度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 scaleData = [{
          'name': 'HTML5',
          'value': 10
        },
        {
          'name': 'CSS3',
          'value': 10
        },
        {
          'name': 'NODE',
          'value': 10
        },
        {
          'name': 'VUE',
          'value': 10
        },
        {
          'name': 'PHP',
          'value': 10
        },
        {
          'name': 'MYSQL',
          'value': 10
        },
        {
          'name': 'CMS',
          'value': 10
        },
        {
          'name': 'SEO',
          'value': 10
        }, {
          'name': 'REACT',
          'value': 10
        }, {
          'name': 'ZBLOG',
          'value': 10
        }, {
          'name': 'GIT',
          'value': 10
        }, {
          'name': '其它',
          'value': 10
        }];
        var rich = {
          white: {
            color: '#fff',
            align: 'center',
            fontWeight: 'bold',
            padding: [3, 0]
          }
        };
        var placeHolderStyle = {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0
          }
        };
        var data = [];
        
        for (var i = 0; i < scaleData.length; i++) {
          data.push({
            value: scaleData[i].value,
            name: scaleData[i].name,
            itemStyle: {
              normal: {
                borderWidth: 4,
                // shadowBlur: 30,
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: '#af6c8b'
                }, {
                  offset: 1,
                  color: '#4b4b84'
                }]),
                // shadowColor: color1[i],
                color: 'rgba(255, 153, 153,0)',
                opacity: 0.75,
              }
            }
          }, {
            value: 2,
            name: '',
            itemStyle: placeHolderStyle
          });
        }
        var seriesObj = [{
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [80, 160],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'inner',
                fontWeight: 'bold',
                formatter: function(params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < scaleData.length; i++) {
                    total += scaleData[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== '') {
                    return params.name + '\n{white|' + '占比' + percent + '%}';
                  } else {
                    return '';
                  }
                },
                rich: rich
              },
              labelLine: {
                show: false,
              }
            }
          },
          data: data
        }];
        option = {
          backgroundColor: '#030c2b',
          tooltip: {
            show: false
          },
          legend: {
            show: false
          },
          toolbox: {
            show: false
          },
          series: seriesObj
        }
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：