百度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 = [{
          value: 50,
          itemStyle: {
            color: '#b37119'
          },
          children: [{
            value: 5,
            itemStyle: {
              color: '#f1c067'
            },
            children: [{
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              },
              children: [{
                name: '1',
                value: 2.5,
                itemStyle: {
                  borderWidth: 1,
                  color: '#e5e0dc'
                },
                children: [{
                  name: '2',
                  value: 2.5,
                  itemStyle: {
                    borderWidth: 1,
                    color: '#e5e0dc'
                  }
                }, {
                  name: '3',
                  value: 2.5,
                  itemStyle: {
                    borderWidth: 1,
                    color: '#faf3ed'
                  }
                }]
              }, {
                name: '4',
                value: 2.5,
                itemStyle: {
                  borderWidth: 1,
                  color: '#faf3ed'
                }
              }]
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }]
          }, {
            value: 5,
            itemStyle: {
              color: '#f1c067'
            },
            children: [{
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              },
              children: [{
                name: '5',
                value: 2.5,
                itemStyle: {
                  borderWidth: 1,
                  color: '#e5e0dc'
                },
                children: [{
                  name: '6',
                  value: 2.5,
                  itemStyle: {
                    borderWidth: 1,
                    color: '#e5e0dc'
                  }
                }, {
                  name: '7',
                  value: 2.5,
                  itemStyle: {
                    borderWidth: 1,
                    color: '#faf3ed'
                  }
                }]
              }, {
                name: '8',
                value: 2.5,
                itemStyle: {
                  borderWidth: 1,
                  color: '#faf3ed'
                }
              }]
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }]
          }, {
            value: 5,
            itemStyle: {
              opacity: 0
            }
          }, {
            value: 5,
            itemStyle: {
              opacity: 0
            }
          }, {
            value: 5,
            itemStyle: {
              opacity: 0
            }
          }, {
            value: 5,
            itemStyle: {
              opacity: 0
            }
          }, {
            value: 5,
            itemStyle: {
              opacity: 0
            }
          }, {
            value: 5,
            itemStyle: {
              opacity: 0
            }
          }, {
            value: 5,
            itemStyle: {
              color: '#f1c067'
            },
            children: [{
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              },
              children: [{
                name: '9',
                value: 2.5,
                itemStyle: {
                  borderWidth: 1,
                  color: '#e5e0dc'
                },
                children: [{
                  name: '10',
                  value: 2.5,
                  itemStyle: {
                    borderWidth: 1,
                    color: '#e5e0dc'
                  }
                }, {
                  name: '11',
                  value: 2.5,
                  itemStyle: {
                    borderWidth: 1,
                    color: '#faf3ed'
                  }
                }]
              }, {
                name: '12',
                value: 2.5,
                itemStyle: {
                  borderWidth: 1,
                  color: '#faf3ed'
                }
              }]
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }]
          }, {
            value: 5,
            itemStyle: {
              color: '#f1c067'
            },
            children: [{
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              },
              children: [{
                name: '13',
                value: 2.5,
                itemStyle: {
                  borderWidth: 1,
                  color: '#e5e0dc'
                },
                children: [{
                  name: '14',
                  value: 2.5,
                  itemStyle: {
                    borderWidth: 1,
                    color: '#e5e0dc'
                  }
                }, {
                  name: '15',
                  value: 2.5,
                  itemStyle: {
                    borderWidth: 1,
                    color: '#faf3ed'
                  }
                }]
              }, {
                name: '16',
                value: 2.5,
                itemStyle: {
                  borderWidth: 1,
                  color: '#faf3ed'
                }
              }]
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }, {
              value: 1,
              itemStyle: {
                borderWidth: 3,
                color: '#f1c067'
              }
            }]
          }]
        }];
        
        option = {
          backgroundColor: "#030c2b",
          series: {
            silent: true,
            type: 'sunburst',
            data: data,
            radius: [0, '10%'],
            center: ['50%', '75%'],
            sort: null,
            emphasis: {
              focus: 'ancestor'
            },
            label: {
              rotate: 'tangential',
              fontSize: 20,
              color: '#000',
              fontFamily: 'serif',
              fontStyle: 'oblique'
            },
            levels: [{}, {
              r0: 5,
              r: '5%'
            }, {
              r0: '5%',
              r: '20%',
            }, {
              r0: '20%',
              r: '40%',
            }, {
              r0: '40%',
              r: '70%'
            }, {
              r0: '70%',
              r: '100%'
            }]
          }
        }
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：