ECharts 수구 차트: 데이터 비율 및 목표 달성을 표시하는 방법

ECharts 수구 차트: 데이터 비율 및 목표 달성도 표시 방법

소개:
데이터 시각화 분야에서 수구 차트는 데이터 비율 및 목표 달성도를 시각적으로 표시할 수 있는 일반적으로 사용되는 차트 유형입니다. ECharts는 개발자가 선택할 수 있는 다양한 차트 유형을 제공하는 강력한 데이터 시각화 라이브러리입니다. 이 기사에서는 ECharts를 사용하여 수구 차트를 만들고 데이터 비율과 목표 달성을 표시하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. 수구 다이어그램이란 무엇입니까?
수구 차트는 링의 크기를 사용하여 데이터의 비율을 나타내고, 링 내부에 채워진 원을 추가하여 골의 완료를 나타내는 특별한 도넛 차트입니다. 수구 차트는 일반적으로 백분율 및 진행률과 같은 데이터를 표시하는 데 사용됩니다. 이는 데이터와 목표 간의 격차를 시각적으로 반영합니다.

2. ECharts를 사용하여 수구 차트 만들기

1. ECharts 라이브러리 소개
   먼저 프로젝트에 ECharts 라이브러리를 소개합니다. 소스 코드를 직접 다운로드하거나 CDN을 사용하여 소개할 수 있습니다. 예:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.0/echarts.min.js"></script>

2. 컨테이너 만들기
   HTML로 컨테이너를 만들어 수구 차트를 표시합니다. 예:

   <div id="waterball-chart" style="width: 400px; height: 400px;"></div>

3. JavaScript 코드 작성
   ECharts를 사용하여 JavaScript 코드를 통해 수구 차트를 만들고 관련 구성을 구성합니다. 매개변수. 다음은 샘플 코드입니다.

   // 初始化ECharts实例
   var myChart = echarts.init(document.getElementById('waterball-chart'));
   
   // 指定图表的配置项和数据
   var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6], // 数据占比，范围为[0,1]
        shape: 'circle',
        outline: {
            show: false
        },
        backgroundStyle: {
            color: '#FFA500'
        },
        label: {
            show: true,
            position: ['50%', '50%'],
            formatter: function(value) {
                return Math.round(value * 100) + '%'; // 格式化显示百分比
            },
            fontSize: 32,
            fontWeight: 'bold'
        },
        itemStyle: {
            color: '#FF4500'
        },
        emphasis: {
            itemStyle: {
                color: '#FF0000'
            }
        }
    }]
   };
   
   // 使用刚指定的配置项和数据显示图表
   myChart.setOption(option);

4. 렌더링 차트
   setOption 메소드를 호출하여 수구 차트에 구성 항목을 적용하고 렌더링합니다. 예: setOption方法将配置项应用到水球图中，并渲染出来。例如：

   myChart.setOption(option);

三、代码解析
上述示例代码中，我们通过ECharts的liquidFill类型创建了一个水球图。其中，配置项series用于配置水球图的样式、数据等信息。

• data字段表示数据占比，取值范围为[0,1]，示例中数据占比为0.6，即60%。
• shape字段表示水球图的形状，可以设置为circle（圆形）或rect（长方形）。
• outline字段表示是否显示水球图的轮廓线，这里设置为不显示。
• backgroundStyle字段表示水球图的背景样式，示例中颜色为橙色（#FFA500）。
• label字段表示水球图中显示的文本标签，通过设置show、position、formatter等参数控制标签的显示位置和格式。
• itemStyle字段表示水球图的填充样式，示例中颜色为橙红色（#FF4500）。
• emphasisrrreee

3. 코드 분석

위의 예제 코드에서는 ECharts의 liquidFill 유형을 통해 수구 차트를 생성했습니다. 그 중 구성 항목 시리즈는 수구 차트의 스타일, 데이터 및 기타 정보를 구성하는 데 사용됩니다.

data 필드는 데이터 비율을 나타내며, 값 범위는 [0,1]입니다. 예시에서는 데이터 비율이 0.6, 즉 60%입니다.

shape 필드는 수구 다이어그램의 모양을 나타내며 원(원) 또는 직사각형(직사각형)으로 설정할 수 있습니다.

윤곽선 필드는 여기에서 표시되지 않도록 설정된 수구 도형의 윤곽선을 표시할지 여부를 나타냅니다.
• 배경 스타일 필드는 수구 이미지의 배경 스타일을 나타냅니다. 예시에서 색상은 주황색(#FFA500)입니다.
• 라벨 필드는 표시, 위치 및 와 같은 매개변수를 설정하여 수구 차트에 표시되는 텍스트 레이블을 나타냅니다. formatter 라벨의 표시 위치와 형식을 제어합니다.

🎜itemStyle 필드는 수구 다이어그램의 채우기 스타일을 나타냅니다. 이 예에서 색상은 주황색-빨간색(#FF4500)입니다. 🎜🎜emphasis 필드는 수구 차트의 강조 스타일을 나타냅니다. 예시에서 강조 색상은 빨간색(#FF0000)입니다. 🎜🎜🎜이러한 구성 항목의 값을 수정하여 필요에 따라 수구 차트를 만들고 맞춤 설정할 수 있습니다. 🎜🎜결론: 🎜이 기사에서는 ECharts를 사용하여 수구 차트를 만드는 방법을 자세히 소개하고 데이터 비율과 목표 달성을 보여줍니다. 간단한 코드 예제를 통해 독자들이 ECharts를 사용하여 빠르게 수구 다이어그램을 그리고 실제 필요에 따라 사용자 정의할 수 있기를 바랍니다. ECharts는 개발자가 데이터를 더 잘 표시하고 이해하는 데 도움이 되는 강력하고 사용하기 쉬운 데이터 시각화 라이브러리입니다. ECharts를 사용하여 수구 차트를 만들어 데이터 시각화를 더욱 생생하고 흥미롭게 만들어 보세요! 🎜🎜참조 링크: 🎜🎜🎜ECharts 공식 문서: https://echarts.apache.org/zh/index.html 🎜🎜ECharts 공식 예: https://echarts.apache.org/examples/zh/index.html 🎜🎜

위 내용은 ECharts 수구 차트: 데이터 비율 및 목표 달성을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!