Echarts数据可视化

Echarts数据可视化：入门、实战与进阶

第4章 Echarts可视化图

4.11 旭日图

旭日图是饼图的进化版，它不仅可以体现各项所占比例，还能体现各项的层级关系。

举个例子

var data = [
  {
    name: 'A',
    children: [
      {
        name: 'A1', //当前节点名称
        value: 15, //当前节点数值大小
        children: [
          {
            //子节点信息
            name: 'A11',
            value: 2
          },
          {
            name: 'A13',
            value: 5,
            children: [
              {
                name: 'A131',
                value: 2
              }
            ]
          },
          {
            name: 'A12',
            value: 4
          }
        ]
      },
      {
        name: 'A2',
        value: 10,
        children: [
          {
            name: 'A21',
            value: 5
          },
          {
            name: 'A22',
            value: 1
          }
        ]
      }
    ]
  },
  {
    name: 'B',
    children: [
      {
        name: 'B1',
        children: [
          {
            name: 'B11',
            value: 1
          },
          {
            name: 'B12',
            value: 2
          }
        ]
      }
    ]
  }
];

option = {
  series: {
    type: 'sunburst', //旭日图
    data: data,
    radius: [0, '90%'], //半径内部和外部占比
    label: {
      rotate: 'radial'
    }
  }
};

渲染结果

简单解释一下这个图，同一环是一个层级，从内到外不断发散，A和B作为顶层，A1和A2是A的子层，以此类推。

通过旭日图可以看到每个层级各项的占比大小，当我们点击旭日图的某个部分时，可以进行上卷和下钻操作。

data 是可视化需要的数据，数据是层级结构的，每层都可以有children 子层，旭日图的series 中type 参数设置为 sunburst。