도넛 차트를 사용하여 ECharts에 데이터 비율을 표시하는 방법

도넛 차트를 사용하여 ECharts에서 데이터 비율을 표시하려면 특정 코드 예제가 필요합니다.

ECharts는 데이터를 쉽게 표시하고 추세를 분석할 수 있는 JavaScript 기반 시각적 차트 라이브러리입니다. 그중 도넛형 차트는 데이터 비율 관계를 표시하는 데 자주 사용되는 일반적인 차트 유형입니다. 이 기사에서는 ECharts에서 도넛 차트를 사용하여 데이터 비율을 표시하고 구체적인 코드 예제를 제공하는 방법을 소개합니다.

먼저 ECharts 환경을 준비해야 합니다. ECharts JavaScript 코드는 CDN(콘텐츠 배포 네트워크)을 통해 도입하거나 ECharts 소스 코드를 다운로드하여 프로젝트에 도입할 수 있습니다. 편의상 CDN을 통해 ECharts를 도입할 수 있으며, 구체적인 코드는 다음과 같습니다.

<script src="https://cdn.jsdelivr.net/npm/echarts@4.10.0/dist/echarts.min.js"></script>

다음으로 도넛 차트를 배치할 컨테이너를 생성해야 합니다. HTML <div> 태그를 통해 컨테이너를 만들고 고유 ID를 컨테이너 식별자로 설정할 수 있습니다. 코드 예시는 다음과 같습니다. <code><div>标签来创建一个容器，并设置一个唯一的ID，作为容器的标识。代码示例如下：<pre class='brush:php;toolbar:false;'>&lt;div id=&quot;chart-container&quot; style=&quot;width: 600px; height: 400px;&quot;&gt;&lt;/div&gt;</pre><p>然后，我们可以使用JavaScript来动态生成环形图。首先，创建一个Echarts实例，并指定容器的ID作为参数。代码示例如下：</p><pre class='brush:php;toolbar:false;'>var myChart = echarts.init(document.getElementById('chart-container'));</pre><p>接着，我们需要定义环形图的数据，以及图表的配置项。具体代码如下：</p><pre class='brush:javascript;toolbar:false;'>// 定义数据 var data = [ { value: 335, name: '数据1' }, { value: 310, name: '数据2' }, { value: 234, name: '数据3' }, { value: 135, name: '数据4' }, { value: 1548, name: '数据5' } ]; // 定义配置项 var option = { tooltip: { trigger: 'item', formatter: '{a} &lt;br/&gt;{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, series: [ { name: '数据占比', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: data } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);</pre><p>以上代码中，我们首先定义了需要展示的数据，每个数据对象包括<code>value和name两个属性，value代表数据的数值，name代表数据的名称。

然后，我们定义了图表的配置项。其中，tooltip用于设置提示框的样式和内容，legend用于设置图例的样式和位置。最后，我们使用series来定义系列，即图表的数据以及展示方式。此处使用的是pie类型的系列，代表环形图，通过radius设置内外半径的大小，label和labelLine用于设置文本标签和连接线的样式。

最后一行代码使用setOption方法将配置项和数据应用到图表中，图表将会自动更新并显示在容器中。

通过以上步骤，我们可以成功地在ECharts中使用环形图展示数据占比。在实际应用中，可以根据具体需求对代码进行修改和扩展，以满足更多的展示需求。

总结起来，使用ECharts中的环形图展示数据占比，需要准备好ECharts环境，在HTML中创建一个容器，使用JavaScript代码动态生成环形图。定义好数据和配置项，并通过setOptionrrreee

그런 다음 JavaScript를 사용하여 도넛 차트를 동적으로 생성할 수 있습니다. 먼저 Echarts 인스턴스를 생성하고 컨테이너 ID를 매개변수로 지정합니다. 코드 예시는 다음과 같습니다. 🎜rrreee🎜다음으로 도넛 차트의 데이터와 차트의 구성 항목을 정의해야 합니다. 구체적인 코드는 다음과 같습니다. 🎜rrreee🎜위 코드에서는 먼저 표시해야 하는 데이터를 정의합니다. 각 데이터 개체에는 value 및 name이라는 두 가지 속성이 포함되어 있습니다. , 값은 데이터의 숫자 값을 나타내고, 이름은 데이터 이름을 나타냅니다. 🎜🎜그런 다음 차트의 구성 항목을 정의합니다. 그 중 tooltip은 프롬프트 상자의 스타일과 내용을 설정하는 데 사용되고, legend는 범례의 스타일과 위치를 설정하는 데 사용됩니다. 마지막으로 series를 사용하여 계열, 즉 차트의 데이터와 표시 방법을 정의합니다. 여기서 사용되는 것은 도넛형 차트를 나타내는 일련의 pie입니다. 내부 및 외부 반경의 크기는 radius, label을 통해 설정됩니다. code> 및 <code>labelLine은 텍스트 레이블과 연결선의 스타일을 설정하는 데 사용됩니다. 🎜🎜코드의 마지막 줄은 <code>setOption 메서드를 사용하여 구성 항목과 데이터를 차트에 적용하고, 차트가 자동으로 업데이트되어 컨테이너에 표시됩니다. 🎜🎜위 단계를 통해 도넛 차트를 사용하여 ECharts에 데이터 비율을 표시할 수 있습니다. 실제 애플리케이션에서는 더 많은 디스플레이 요구 사항을 충족하기 위해 특정 요구 사항에 따라 코드를 수정하고 확장할 수 있습니다. 🎜🎜요약하자면, ECharts의 도넛 차트를 사용하여 데이터 비율을 표시하려면 ECharts 환경을 준비하고 HTML로 컨테이너를 생성한 다음 JavaScript 코드를 사용하여 도넛 차트를 동적으로 생성해야 합니다. setOption 메소드를 통해 데이터 및 구성 항목을 정의하고 차트에 적용합니다. 위는 도넛 차트를 사용하여 ECharts에 데이터 비율을 표시하는 구체적인 단계와 코드 예제입니다. 🎜