旭日图(Sunburst)实现

旭日图(Sunburst)实现

旭日图是一种用于展示层次结构数据的可视化图表，通过同心圆环的形式呈现父子关系。ECharts提供了强大的旭日图支持，能够直观展示数据的层级和比例关系。

基本结构

ECharts中的旭日图通过series.type: 'sunburst'配置。一个基本的旭日图需要包含层级数据和视觉映射：

option = {
  series: {
    type: 'sunburst',
    data: [
      {
        name: 'A',
        children: [
          {
            name: 'A1',
            value: 10
          },
          {
            name: 'A2',
            value: 20
          }
        ]
      }
    ],
    radius: [0, '90%'],
    label: {
      rotate: 'radial'
    }
  }
};

数据格式

旭日图数据采用树形结构，每个节点可以包含以下属性：

• name: 节点名称
• value: 叶子节点的数值
• children: 子节点数组
• itemStyle: 自定义样式

多层嵌套示例：

data: [
  {
    name: '产品',
    children: [
      {
        name: '电子产品',
        children: [
          { name: '手机', value: 120 },
          { name: '电脑', value: 80 }
        ]
      },
      {
        name: '服装',
        children: [
          { name: '男装', value: 60 },
          { name: '女装', value: 90 }
        ]
      }
    ]
  }
]

视觉映射

ECharts提供多种视觉映射方式增强图表表现力：

1. 颜色映射：

series: {
  type: 'sunburst',
  data: [...],
  levels: [
    {},
    {
      r0: '15%',
      r: '45%',
      itemStyle: {
        color: '#ddd'
      }
    },
    {
      r0: '45%',
      r: '80%',
      itemStyle: {
        color: '#ccc'
      }
    }
  ]
}

2. 数值大小映射：

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  inRange: {
    color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4']
  }
}

交互功能

旭日图支持丰富的交互功能：

1. 点击下钻：

series: {
  type: 'sunburst',
  nodeClick: 'rootToNode', // 点击后显示以该节点为根
  data: [...]
}

2. 高亮联动：

emphasis: {
  focus: 'ancestor',
  itemStyle: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

高级配置

1. 自定义扇形间隙：

series: {
  type: 'sunburst',
  data: [...],
  gap: 3, // 环间间隙
  itemStyle: {
    borderWidth: 2,
    borderColor: '#fff'
  }
}

2. 多级标签配置：

label: {
  show: true,
  formatter: function(params) {
    return params.name + '\n' + params.value;
  },
  levels: [
    { fontSize: 12 },
    { fontSize: 10 },
    { fontSize: 8 }
  ]
}

动态数据更新

旭日图支持动态数据更新：

let currentRoot = chart.getModel().getSeriesByIndex(0).getData().tree.root;
chart.setOption({
  series: {
    data: [currentRoot.children[1]] // 切换到第二个子节点
  }
});

性能优化

处理大数据量时的优化方案：

1. 分块渲染：

series: {
  type: 'sunburst',
  progressive: 1000,
  progressiveThreshold: 3000
}

2. 简化视觉效果：

itemStyle: {
  opacity: 0.8,
  borderWidth: 0
},
label: {
  show: false
}

实际应用案例

电商销售数据分析示例：

option = {
  title: {
    text: '年度销售分析',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  series: [{
    type: 'sunburst',
    data: [{
      name: '2023',
      children: [
        {
          name: 'Q1',
          children: [
            {name: '1月', value: 1560},
            {name: '2月', value: 1890},
            {name: '3月', value: 2100}
          ]
        },
        // 其他季度数据...
      ]
    }],
    radius: [0, '95%'],
    label: {
      rotate: 'tangential'
    },
    levels: [
      {},
      {
        r0: '15%',
        r: '35%',
        itemStyle: {
          color: '#FFD700'
        }
      },
      {
        r0: '35%',
        r: '70%',
        itemStyle: {
          color: '#FFA500'
        }
      },
      {
        r0: '70%',
        r: '95%',
        itemStyle: {
          color: '#FF8C00'
        }
      }
    ]
  }]
};

与其他图表联动

旭日图可与饼图、柱状图等联动：

myChart.on('click', function(params) {
  if (params.seriesType === 'sunburst') {
    // 根据点击节点更新柱状图
    barChart.setOption({
      xAxis: {
        data: params.data.children.map(item => item.name)
      },
      series: {
        data: params.data.children.map(item => item.value)
      }
    });
  }
});

响应式设计

适应不同屏幕尺寸的配置：

window.addEventListener('resize', function() {
  myChart.resize();
  // 动态调整半径
  myChart.setOption({
    series: {
      radius: window.innerWidth < 600 ? [0, '70%'] : [0, '90%']
    }
  });
});

自定义扩展

通过自定义系列扩展旭日图功能：

series: {
  type: 'sunburst',
  renderItem: function(params, api) {
    // 自定义渲染逻辑
    return {
      type: 'path',
      shape: {
        pathData: '...'
      },
      style: api.style()
    };
  }
}