The Sunburst chart implements this.

Sunburst Chart Implementation

A sunburst chart is a visualization tool used to display hierarchical data, presenting parent-child relationships through concentric rings. ECharts provides robust support for sunburst charts, enabling intuitive visualization of data hierarchy and proportional relationships.

Basic Structure

In ECharts, a sunburst chart is configured via series.type: 'sunburst'. A basic sunburst chart requires hierarchical data and visual mapping:

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

Data Format

Sunburst chart data adopts a tree structure, where each node can include the following attributes:

• name: Node name
• value: Numerical value for leaf nodes
• children: Array of child nodes
• itemStyle: Custom styling

Example of multi-level nesting:

data: [
  {
    name: 'Products',
    children: [
      {
        name: 'Electronics',
        children: [
          { name: 'Phones', value: 120 },
          { name: 'Computers', value: 80 }
        ]
      },
      {
        name: 'Apparel',
        children: [
          { name: 'Men\'s Clothing', value: 60 },
          { name: 'Women\'s Clothing', value: 90 }
        ]
      }
    ]
  }
]

Visual Mapping

ECharts offers multiple visual mapping methods to enhance chart presentation:

1. Color mapping:

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

2. Value-based size mapping:

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

Interactive Features

Sunburst charts support rich interactive functionalities:

1. Click-to-drill-down:

series: {
  type: 'sunburst',
  nodeClick: 'rootToNode', // Click to display the node as the root
  data: [...]
}

2. Highlight linkage:

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

Advanced Configuration

1. Custom sector gaps:

series: {
  type: 'sunburst',
  data: [...],
  gap: 3, // Gap between rings
  itemStyle: {
    borderWidth: 2,
    borderColor: '#fff'
  }
}

2. Multi-level label configuration:

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

Dynamic Data Updates

Sunburst charts support dynamic data updates:

let currentRoot = chart.getModel().getSeriesByIndex(0).getData().tree.root;
chart.setOption({
  series: {
    data: [currentRoot.children[1]] // Switch to the second child node
  }
});

Performance Optimization

Optimization strategies for handling large datasets:

1. Chunked rendering:

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

2. Simplified visual effects:

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

Practical Application Example

E-commerce sales data analysis example:

option = {
  title: {
    text: 'Annual Sales Analysis',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  series: [{
    type: 'sunburst',
    data: [{
      name: '2023',
      children: [
        {
          name: 'Q1',
          children: [
            {name: 'January', value: 1560},
            {name: 'February', value: 1890},
            {name: 'March', value: 2100}
          ]
        },
        // Other quarterly data...
      ]
    }],
    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'
        }
      }
    ]
  }]
};

Integration with Other Charts

Sunburst charts can be linked with pie charts, bar charts, etc.:

myChart.on('click', function(params) {
  if (params.seriesType === 'sunburst') {
    // Update bar chart based on clicked node
    barChart.setOption({
      xAxis: {
        data: params.data.children.map(item => item.name)
      },
      series: {
        data: params.data.children.map(item => item.value)
      }
    });
  }
});

Responsive Design

Configuration for adapting to different screen sizes:

window.addEventListener('resize', function() {
  myChart.resize();
  // Dynamically adjust radius
  myChart.setOption({
    series: {
      radius: window.innerWidth < 600 ? [0, '70%'] : [0, '90%']
    }
  });
});

Custom Extensions

Extending sunburst chart functionality via custom series:

series: {
  type: 'sunburst',
  renderItem: function(params, api) {
    // Custom rendering logic
    return {
      type: 'path',
      shape: {
        pathData: '...'
      },
      style: api.style()
    };
  }
}