echarts环形图两层

**ECharts环形图两层**

在数据可视化中，环形图是非常常见的类型之一。尤其是在展示比例、百分比等方面，环形图能够清晰地表现出数据之间的关系。然而，在实际应用中，我们经常需要展示多个系列的数据，这时候就需要使用两层环形图来进行展示。

在本文中，我们将介绍如何使用ECharts库创建一个两层环形图。我们将从基本概念开始，逐步讲解每一步骤的代码和注释。

### 一、基本概念首先，让我们了解一下什么是两层环形图。两层环形图是一种特殊类型的环形图，它包含两个系列的数据：一个内部系列和一个外部系列。内部系列通常表示为内圈，外部系列则表示为外圈。

### 二、创建两层环形图下面是我们要实现的效果：

![两层环形图]( />
### 三、代码实现下面是我们要使用的ECharts库版本：`echarts@5.2.0`

####1. 引入ECharts库

javascriptimport * as echarts from 'echarts';

javascriptconst container = document.getElementById('chart');
if (!container) {
 console.error('Failed to get chart container!');
 return;
}

javascriptconst myChart = echarts.init(container);

javascriptconst option = {
 // 图表标题 title: {
 text: '两层环形图',
 left: 'center'
 },
 // 提示框组件 tooltip: {},
 // 图表系列 series: [
 {
 name: '内部系列',
 type: 'pie',
 radius: ['40%', '50%'],
 center: ['50%', '55%'],
 data: [
 { value:335, name: '内部数据1' },
 { value:310, name: '内部数据2' }
 ],
 itemStyle: {
 emphasis: {
 shadowBlur:10,
 shadowOffsetX:0,
 shadowOffsetY:0,
 shadowColor: 'rgba(0,0,0,0.5)'
 }
 }
 },
 {
 name: '外部系列',
 type: 'pie',
 radius: ['70%', '80%'],
 center: ['50%', '55%'],
 data: [
 { value:335, name: '外部数据1' },
 { value:310, name: '外部数据2' }
 ],
 itemStyle: {
 emphasis: {
 shadowBlur:10,
 shadowOffsetX:0,
 shadowOffsetY:0,
 shadowColor: 'rgba(0,0,0,0.5)'
 }
 }
 }
 ]
};

javascriptmyChart.setOption(option);