echarts旭日图

日常记录+干货+欢迎指导 

data处理

var data = [
    {
        "name": "",
        "itemStyle": {
            "color": "#a515ff"
        },
        "children": [
            {
                "name": "规定对处方药",
                "value": 1,
                "itemStyle": {
                    "color": "#a515ff"
                }
            },
            ...
        ]
    },
    {
        "name": "",
        "itemStyle": {
            "color": "#c76eff"
        },
        "children": [
            {
                "name": "云南省生物医药产业施工图",
                "value": 1,
                "itemStyle": {
                    "color": "#c76eff"
                }
            },
           ...
        ]
    },
    {
        "name": "",
        "itemStyle": {
            "color": "#e3b8ff"
        },
        "children": [
            {
                "name": "云南省生物医药产业施工图",
                "value": 1,
                "itemStyle": {
                    "color": "#e3b8ff"
                }
            },
            ...
        ]
    }
]

option处理

title: {
      text: '处方药与非处\n方药分类管理办法',
      textStyle: {
        fontSize: 20,
        align: 'center',
        lineHeight: 36,
        fontWeight: 700
      },
      subtextStyle: {
        align: 'center'
      },
      x: 'center',
      y: 'center'
    },
    series: {
      type: 'sunburst',

      data: data,
      radius: [0, '95%'],
      sort: null,
      nodeClick: false, // 是否可点击展示单独

      emphasis: {
        focus: 'ancestor'
      },

      levels: [
        {},
        {
          r0: '30%',
          r: '38%',
          itemStyle: {
            borderWidth: 2
          },
          label: {
            rotate: 'tangential'
          }
        },
        {
          r0: '40%',
          r: '42%',
          label: {
            align: 'left',
            color: '#333',
            padding: 8
          },
          itemStyle: {
            borderWidth: 4
          }
        }
      ]
    }

注意喽：nodeClick点击节点后的行为，可取值

false：节点点击无反应。
'rootToNode'：点击节点后以该节点为根结点。
'link'：如果节点数据中有 link 点击节点后会进行超链接跳转。

如图：