깔때기형 장미 차트를 사용하여 ECharts에 데이터 비율 및 전환율을 표시하는 방법-JS 튜토리얼-php.cn

깔때기형 장미 차트를 사용하여 ECharts에 데이터 비율 및 전환율을 표시하는 방법

王林

풀어 주다： 2023-12-18 08:10:10

원래의

1393명이 탐색했습니다.

깔때기형 장미 차트를 사용하여 ECharts에 데이터 비율 및 전환율을 표시하는 방법

깔때기 장미 차트를 사용하여 ECharts에서 데이터 비율과 전환율을 표시하는 방법

개요:
깔때기 장미 차트는 일반적으로 사용되는 데이터 시각화 차트로, 데이터 비율과 전환율을 명확하게 표시할 수 있습니다. ECharts에서는 간단한 데이터 처리 및 구성을 통해 깔대기형 장미 차트의 표시 효과를 쉽게 얻을 수 있습니다. 이 기사에서는 ECharts에서 깔때기 장미 차트를 사용하여 데이터 비율 및 전환율을 표시하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1단계: 데이터 준비
먼저 표시할 데이터를 준비해야 합니다. 다음과 같은 데이터가 있다고 가정합니다.

var data = [
  { value: 100, name: '阶段1' },
  { value: 80, name: '阶段2' },
  { value: 60, name: '阶段3' },
  { value: 40, name: '阶段4' },
  { value: 20, name: '阶段5' }
];

로그인 후 복사

여기서 value는 각 단계의 데이터 양을 나타내고 name은 각 단계의 이름을 나타냅니다.

2단계: 차트 구성
다음으로 깔때기형 장미 차트의 스타일과 속성을 구성해야 합니다. 다음은 간단한 구성 예입니다.

var option = {
  series: [
    {
      name: '漏斗玫瑰图',
      type: 'pie',
      radius: ['40%', '55%'],
      center: ['50%', '50%'],
      roseType: 'radius',
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: data
    }
  ]
};

로그인 후 복사

구성의 핵심 사항은 다음과 같습니다.

type은 차트 유형을 원형 차트인 'pie'로 지정합니다.
radius는 여기에서 배열로 표시되는 원형 차트의 내부 및 외부 반경을 설정합니다. ['40%', '55%']는 내부 반경이 40%이고 외부 반경이 55%라는 의미입니다.
center는 여기에서 배열로 표시되는 원형 차트의 중심점 위치를 설정합니다. ['50%', '50%']는 캔버스 중앙을 의미합니다.
roseType은 원형 차트 유형을 깔때기형 장미 차트를 나타내는 '반경'으로 설정합니다.
data는 파이 차트의 데이터 소스를 설정합니다. 위에서 준비한 데이터가 여기에 사용됩니다.

3단계: 차트 그리기
마지막으로 ECharts 인스턴스를 통해 차트를 그려야 합니다. HTML 페이지에서 다음 코드를 포함하는 스크립트 태그를 생성합니다:

var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);

로그인 후 복사

위 코드에서는 document.getElementById('chart') 메소드를 사용하여 HTML 페이지에 차트를 표시하는 데 사용되는 컨테이너 div를 가져오고 전달 ECharts 인스턴스를 생성하려면 echarts.init() 메소드를 제공하십시오. 그런 다음 setOption() 메서드를 호출하여 인스턴스에 대한 구성 항목을 설정합니다.

요약하자면, 위의 세 단계를 통해 깔때기형 장미 차트를 사용하여 ECharts에서 데이터의 비율과 전환율을 표시할 수 있습니다. 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>漏斗玫瑰图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
      var data = [
        { value: 100, name: '阶段1' },
        { value: 80, name: '阶段2' },
        { value: 60, name: '阶段3' },
        { value: 40, name: '阶段4' },
        { value: 20, name: '阶段5' }
      ];

      var option = {
        series: [
          {
            name: '漏斗玫瑰图',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: data
          }
        ]
      };

      var myChart = echarts.init(document.getElementById('chart'));
      myChart.setOption(option);
    </script>
  </body>
</html>

로그인 후 복사

위 코드를 통해 브라우저에서 HTML 페이지를 실행하면 데이터의 비율과 전환율을 보여주는 "Funnel Rose Chart"라는 차트를 볼 수 있습니다.

결론:
이 기사에서는 퍼널 로즈 차트를 사용하여 ECharts에서 데이터 비율과 전환율을 표시하는 방법을 소개합니다. 간단한 데이터 처리 및 구성을 통해 깔때기 장미 차트의 표시 효과를 쉽게 얻을 수 있습니다. 독자들이 이 글을 통해 기본적인 ECharts 활용 기술을 이해하고, 이를 실제 데이터 시각화 프로젝트에 적용하고 확장할 수 있기를 바랍니다.

위 내용은 깔때기형 장미 차트를 사용하여 ECharts에 데이터 비율 및 전환율을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!