百度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">
        option = {
          backgroundColor:'#030c2b',
          series: [
            {
              type: "sunburst",
              name: "开发语言",
              radius: ["80%", "50%"],
              z: 2,
              data: [
                {
                  name: "前端",
                  value: 500,
                  children: [
                    {
                      name: "vue",
                      value: 200,
                      children: [
                        {
                          name: "vue3",
                          value: 100,
                        },
                      ],
                    },
                  ],
                },
                {
                  name: "后端",
                  value: 500,
                  children: [
                    {
                      value: 500,
                      name: "数据库",
                      children: [{ name: "mysql", value: 400 }],
                    },
                  ],
                },
                {
                  name: "产品经理",
                  value: 500,
                  children: [
                    {
                      value: 400,
                      name: "思维导图",
                      children: [
                        {
                          name: "图一",
                          value: 200,
                        },
                      ],
                    },
                  ],
                },
              ],
              itemStyle: {
                borderWidth: 0,
                borderColor: "#030c2b",
              },
              label: {
                show: false,
                formatter: " {b} \n\n {c}",
              },
              levels: [
                {},
                {
                  r0: "0",
                  r: "40%",
                  label: {
                    show: true,
                    rotate: 0,
                    fontSize: 16,
                    color: "#f1f1f1",
                  },
                  itemStyle: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#81C2FF",
                        },
                        {
                          offset: 1,
                          color: "#3090EA",
                        },
                      ],
                      global: false,
                    },
                    borderWidth: 5,
                    borderColor: "#030c2b",
                  },
                },
                {
                  r0: "52%",
                  r: "58%",
                  itemStyle: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#81C2FF", 
                        },
                        {
                          offset: 1,
                          color: "#3090EA", 
                        },
                      ],
                      global: false,
                    },
                  },
                },
                {
                  r0: "60%",
                  r: "70%",
                  itemStyle: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#81C2FF", 
                        },
                        {
                          offset: 1,
                          color: "#3090EA", 
                        },
                      ],
                      global: false, 
                    },
                  },
                },
              ],
            },
            {
              silent: true,
              type: "sunburst",
              z: 1,
              data: [
                {
                  name: "vue",
                  value: 500,
                  children: [
                    {
                      value: 500,
                      name: "",
                      children: [
                        {
                          value: 500,
                        },
                      ],
                    },
                  ],
                },
                {
                  name: "数据库",
                  value: 500,
                  children: [
                    {
                      value: 500,
                      name: "",
                      children: [
                        {
                          value: 500,
                        },
                      ],
                    },
                  ],
                },
                {
                  name: "思维导图",
                  value: 500,
                  children: [
                    {
                      value: 500,
                      name: "",
                      children: [
                        {
                          value: 500,
                        },
                      ],
                    },
                  ],
                },
              ],
              itemStyle: {
                borderWidth: 5,
                borderColor: "#030c2b",
              },
              label: {
                show: false,
              },
              levels: [
                {},
                {
                  itemStyle: {
                    color: "transparent",
                  },
                },
                { r0: "52%", r: "59%", itemStyle: { color: "#33486C" } },
                {
                  r0: "59%",
                  r: "71%",
                  itemStyle: {
                    color: "#33486C",
                  },
                },
              ],
            },
            {
              name: "",
              silent: true,
              type: "gauge",
              radius: "68%",
              center: ["50%", "50%"],
              z: 3,
              startAngle: 0,
              endAngle: 359.9,
              splitNumber: 24,
              hoverAnimation: true,
              axisTick: {
                show: false,
              },
              splitLine: {
                length: "26%",
                lineStyle: {
                  width: 3,
                  color: "#030c2b"
                },
              },
              axisLabel: {
                show: false,
              },
              pointer: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  opacity: 0,
                },
              },
              detail: {
                show: false,
              },
              data: [
                {
                  value: 0,
                  name: "",
                },
              ],
            },
          ],
        }
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：