旭日图(Sunburst)实现

旭日图(Sunburst)的基本概念

旭日图是一种多层级的环形结构可视化图表，通过同心圆的分层展示数据层次关系。ECharts中的旭日图模块能够直观呈现父子节点的层级结构和占比情况，适合展示具有明确层级结构的数据集。每个环带代表一个层级，环带的宽度可反映节点数值大小，颜色区分不同分类。

ECharts中旭日图的数据结构

旭日图要求数据采用树形结构组织，每个节点需要包含name和value属性。children字段定义子节点，形成递归结构。value值决定环带宽度，支持绝对值或百分比形式。数据结构示例如下：

const data = {
  name: '根节点',
  children: [
    {
      name: '一级A',
      value: 15,
      children: [
        {name: '二级A-1', value: 8},
        {name: '二级A-2', value: 7}
      ]
    },
    {
      name: '一级B',
      value: 10,
      children: [
        {name: '二级B-1', value: 5},
        {name: '二级B-2', value: 3},
        {name: '二级B-3', value: 2}
      ]
    }
  ]
}

基础旭日图配置

创建基础旭日图需要配置series类型为'sunburst'，并设置data属性。核心配置项包括：

• radius: 控制图表半径，可用百分比或像素值
• label: 设置标签显示策略
• levels: 分层样式配置
• nodeClick: 节点交互行为

完整配置示例：

option = {
  series: {
    type: 'sunburst',
    data: data,
    radius: [0, '90%'],
    label: {
      rotate: 'radial'
    },
    levels: [
      {r0: '0%', r: '30%'},
      {r0: '30%', r: '60%'},
      {r0: '60%', r: '90%'}
    ]
  }
};

交互功能实现

旭日图支持丰富的交互功能，通过配置项和事件监听实现：

1. 高亮联动配置：

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

2. 点击事件处理：

myChart.on('click', function(params) {
  console.log('点击节点:', params.name);
});

3. 视觉映射控制：

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

高级样式定制

通过level配置实现分层样式控制：

levels: [
  {
    r0: '0%',
    r: '25%',
    itemStyle: {
      borderWidth: 2
    },
    label: {
      rotate: 'tangential'
    }
  },
  {
    r0: '25%',
    r: '60%',
    label: {
      align: 'right'
    }
  },
  {
    r0: '60%',
    r: '80%',
    label: {
      position: 'outside',
      padding: 3,
      silent: false
    }
  }
]

动态数据更新

实现旭日图数据动态更新：

function updateData(newData) {
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
}

// 示例数据更新
setInterval(() => {
  const randomData = generateRandomSunburstData();
  updateData(randomData);
}, 3000);

性能优化策略

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

1. 分片加载配置：

series: {
  type: 'sunburst',
  nodeClick: false,
  data: largeData,
  progressive: 1000,
  progressiveThreshold: 3000
}

2. 视觉降级方案：

largeData.children.forEach(item => {
  if(item.children && item.children.length > 50) {
    item.collapsed = true;
  }
});

实际应用案例

电商销售数据分析场景：

const salesData = {
  name: '总销售额',
  value: 10000,
  children: [
    {
      name: '数码',
      value: 4500,
      children: [
        {name: '手机', value: 3000},
        {name: '电脑', value: 1000},
        {name: '配件', value: 500}
      ]
    },
    {
      name: '家居',
      value: 3500,
      children: [
        {name: '家具', value: 2000},
        {name: '厨具', value: 1000},
        {name: '家纺', value: 500}
      ]
    }
  ]
};

与其他图表联动

实现旭日图与饼图的联动：

// 初始化两个图表实例
const sunburstChart = echarts.init(document.getElementById('sunburst'));
const pieChart = echarts.init(document.getElementById('pie'));

// 联动事件
sunburstChart.on('click', function(params) {
  const pieData = params.data.children || [];
  pieChart.setOption({
    series: [{
      data: pieData
    }]
  });
});

响应式设计实现

适应不同屏幕尺寸的方案：

function resizeCharts() {
  const width = window.innerWidth;
  const radius = width < 600 ? ['0%', '70%'] : ['0%', '90%'];
  
  myChart.setOption({
    series: {
      radius: radius,
      label: {
        fontSize: width < 600 ? 10 : 12
      }
    }
  });
}

window.addEventListener('resize', resizeCharts);

自定义节点渲染

通过renderItem实现自定义绘制：

series: {
  type: 'sunburst',
  renderItem: function(params, api) {
    const context = params.context;
    const nodePath = api.value('nodePath');
    
    return {
      type: 'path',
      shape: {
        pathData: generateCustomPath(nodePath)
      },
      style: {
        fill: api.visual('color')
      }
    };
  }
}

动画效果增强

配置进阶动画效果：

series: {
  type: 'sunburst',
  animationType: 'expansion',
  animationDuration: 1000,
  animationEasing: 'elasticOut',
  animationDelay: function(idx) {
    return idx * 100;
  }
}

数据下钻功能

实现层级下钻交互：

let currentRoot = null;

myChart.on('click', function(params) {
  if (params.data.children) {
    currentRoot = params.data;
    myChart.setOption({
      series: {
        data: [currentRoot]
      }
    });
  }
});

// 返回上级按钮
document.getElementById('back').addEventListener('click', function() {
  if (currentRoot && currentRoot.parentNode) {
    currentRoot = currentRoot.parentNode;
    myChart.setOption({
      series: {
        data: [currentRoot]
      }
    });
  }
});

多旭日图组合

并列显示多个旭日图进行比较：

option = {
  grid: [
    {left: '5%', width: '45%', top: '10%', height: '80%'},
    {left: '55%', width: '45%', top: '10%', height: '80%'}
  ],
  series: [
    {
      type: 'sunburst',
      gridIndex: 0,
      data: data1
    },
    {
      type: 'sunburst',
      gridIndex: 1,
      data: data2
    }
  ]
};

辅助线增强可读性

添加连接线增强层级关系：

series: {
  type: 'sunburst',
  highlightPolicy: 'ancestor',
  sort: null,
  levels: [
    {
      r0: '0%',
      r: '35%',
      label: {show: false},
      itemStyle: {borderWidth: 2}
    },
    {
      r0: '35%',
      r: '70%',
      label: {show: true},
      lineStyle: {color: 'rgba(100,100,100,0.5)'}
    }
  ]
}

数据标签处理策略

处理标签重叠的方案：

label: {
  formatter: function(params) {
    return params.name.length > 6 
      ? params.name.substring(0, 6) + '...'
      : params.name;
  },
  rotate: function(angle, label) {
    return angle > 0 && angle < Math.PI ? angle : 0;
  },
  hideOverlap: true
}

颜色映射方案

实现智能颜色分配：

series: {
  type: 'sunburst',
  data: data,
  colorBy: 'data',
  colorMapping: 'value',
  visualMap: {
    type: 'piecewise',
    pieces: [
      {min: 0, max: 10, color: '#ffcccc'},
      {min: 10, max: 20, color: '#ff9999'},
      {min: 20, max: 50, color: '#ff6666'}
    ]
  }
}