ECharts 깔때기형 차트: 데이터 전환율을 표시하는 방법

ECharts 깔때기형 차트: 데이터 전환율을 표시하는 방법, 구체적인 코드 예제가 필요합니다

소개:
데이터 시각화 분야에서 깔때기형 차트는 매우 일반적으로 사용되는 차트 유형으로, 변환 과정을 시각적으로 표시하고 데이터 속도의 변환. 강력한 데이터 시각화 도구인 ECharts는 깔때기형 차트 그리기 기능도 제공합니다. 이번 글에서는 구체적인 코드 예제를 결합하여 ECharts 깔때기형 차트의 그리기 방법과 데이터의 전환율을 표시하는 방법을 자세히 소개하겠습니다.

1. 깔때기형 차트의 기본 구조
   깔때기형 차트는 위에서 아래로 다양한 단계를 나타내며, 각 단계는 일정량의 데이터에 해당합니다. 이 단계는 점차 줄어들어 깔때기 모양을 형성합니다. ECharts에서는 계열의 유형 속성을 통해 깔때기형 차트를 지정할 수 있습니다.
2. 기본 깔대기형 차트 그리기
   먼저 ECharts 라이브러리 파일을 도입하고 차트 인스턴스를 초기화해야 합니다. 다음은 기본 깔때기형 차트를 그리는 코드 예시입니다.

<!--引入ECharts的库文件-->
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>

<!--在HTML中创建一个DOM容器，用于存放图表-->
<div id="funnelChart" style="width: 600px; height: 400px;"></div>

<script>
  //实例化一个图表实例
  let myChart = echarts.init(document.getElementById('funnelChart'));

  //配置图表的基本信息
  let option = {
      title: {
          text: '漏斗图示例',
      },
      series: [{
          type: 'funnel',
          data: [
              {value: 60, name: '浏览量'},
              {value: 40, name: '点击量'},
              {value: 20, name: '购买量'},
              {value: 10, name: '转化率'}
          ]
      }]
  };

  //使用配置项显示图表
  myChart.setOption(option);
</script>

3. 데이터 전환율 표시
   데이터의 전환율을 표시하기 위해 깔때기형 차트의 각 단계에 라벨 라벨을 추가하고 라벨을 맞춤 설정할 수 있습니다. 포맷터 속성을 통해 콘텐츠를 표시합니다. 다음은 데이터 변환율을 보여주는 코드 예시입니다.

let option = {
    title: {
        text: '漏斗图示例',
    },
    series: [{
        type: 'funnel',
        data: [
            {value: 60, name: '浏览量'},
            {value: 40, name: '点击量'},
            {value: 20, name: '购买量'},
            {value: 10, name: '转化率'}
        ],
        label: {
            formatter: '{b}：{c}%'
        }
    }]
};

레이블의 formatter 속성을 '{b}:{c}%'로 설정하면 레이블의 이름(name)과 숫자 값(value)을 변환할 수 있습니다. 각 단계의 라벨에는 데이터와 백분율 기호(%)가 함께 표시됩니다. 예를 들어 '구매금액: 20%'와 같습니다.

요약:
ECharts에서는 간단한 구성을 통해 깔때기형 차트를 그리고 데이터의 전환율을 표시할 수 있습니다. 라벨 라벨의 포맷터 속성을 설정하여 라벨의 표시 내용을 맞춤설정할 수 있습니다. 이 글의 소개를 통해 독자들이 ECharts 깔때기형 차트의 기본 그리기 방법을 이해하고 실무에서 유연하게 사용할 수 있기를 바랍니다.

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