ECharts 원형 차트: 데이터 비율을 표시하는 방법

데이터 시각화가 널리 적용되면서 뛰어난 시각화 라이브러리인 ECharts도 점점 더 주목을 받고 있습니다. 그 중 원형 차트는 데이터의 비율을 표시하는 데 널리 사용됩니다. 이 기사에서는 ECharts 원형 차트를 사용하여 데이터 비율을 표시하고 특정 코드 예제를 제공하는 방법을 소개합니다.

1. ECharts 파이 차트의 기본 개념

먼저 파이 차트의 기본 개념을 이해해야 합니다. 파이 차트는 데이터의 비율을 나타내는 데 자주 사용됩니다. 특정 값을 각도 크기로 변환한 후 섹터 영역의 크기로 표시합니다. 각 섹터의 크기는 수치에 비례합니다.

2. ECharts 원형 차트 구현 방법

ECharts를 사용하여 원형 차트를 그리려면 먼저 ECharts 라이브러리를 소개하고 원형 차트를 표시하기 위해 지정된 크기의 div 태그를 만들어야 합니다. 구체적인 코드는 다음과 같습니다.

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>

그 중 스타일 태그는 파이 차트가 위치한 div 태그의 크기를 지정하는 데 사용됩니다. 스크립트 태그는 ECharts 라이브러리의 최소 버전을 소개합니다.

그런 다음 JavaScript 코드를 통해 원형 차트를 구현해야 합니다. 구체적인 코드는 다음과 같습니다.

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

var option = {
  title: {
    text: '饼图示例',
    left: 'center'
  },
  tooltip: {},
  legend: {
    data:['数据1', '数据2', '数据3']
  },
  series: [
    {
      name:'数据占比',
      type:'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data:[
        {value:335, name:'数据1'},
        {value:310, name:'数据2'},
        {value:234, name:'数据3'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

myChart.setOption(option);

위 코드에서는 먼저 echarts.init() 메서드를 사용하여 ECharts 인스턴스를 초기화합니다. 그런 다음 원형 차트에 필요한 다양한 속성과 데이터를 정의하는 JavaScript 개체 옵션을 정의합니다. 마지막으로 setOption() 메소드를 사용하여 이 옵션 객체를 ECharts 인스턴스에 적용하여 원형 차트를 생성합니다.

특히 옵션 개체에는 다음 속성이 포함됩니다.

1. title: 원형 차트의 제목을 설정하는 데 사용됩니다.
2. tooltip: 마우스가 떠 있을 때 프롬프트 정보를 설정하는 데 사용됩니다. 차트의 각 섹터 영역에 대한 원형 레이블
3. 시리즈: 반경, 데이터, 스타일 등을 포함하여 원형 차트의 특정 데이터 시리즈를 설정하는 데 사용됩니다.
3. ECharts 원형 차트의 스타일 설정

ECharts 원형 차트는 기본 데이터 표시 외에도 다양한 스타일 설정 옵션을 제공하며 해당 속성을 수정하여 다양한 스타일의 원형 차트를 구현할 수 있습니다.

내부 및 외부 반경

섹터 영역의 크기를 제어하는 ​​반경 속성을 설정하여 원형 차트의 내부 및 외부 반경을 조정하세요. 다음 코드:

series: [
  {
    type: 'pie',
    radius: ['50%', '70%'],
    data: [
      {value: 335, name: '数据1'},
      {value: 310, name: '数据2'},
      {value: 234, name: '数据3'},
      {value: 135, name: '数据4'},
      {value: 1548, name: '数据5'}
    ]
  }
]

위 코드에서 radius 속성에는 배열이 포함되어 있으며, 배열의 두 값은 각각 내부 반경과 외부 반경의 백분율을 나타냅니다. 이 예에서는 내부 반경이 50%이고 외부 반경이 70%입니다.

범례 위치

범례 속성에서 x, y 및 방향 속성을 설정하여 범례의 위치와 방향을 조정하세요. 다음 코드는

legend: {
  x: 'left',
  y: 'center',
  orient: 'vertical',
  data: ['数据1', '数据2', '数据3', '数据4', '数据5']
}

위 코드에서 x 속성은 범례의 가로 위치를 왼쪽으로 설정하고, y 속성은 범례의 세로 위치를 가운데로 설정하며, orient 속성은 범례의 방향을 설정합니다. 수직 방향으로.

그림자 효과

itemStyle 속성에 강조 속성을 설정하면 부채꼴 영역에 그림자 및 기타 효과를 추가하여 원형 차트의 시각적 효과를 높일 수 있습니다. 다음 코드는

itemStyle: {
  emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

위 코드에서 ShadowBlur는 그림자의 흐림 정도를 나타내고,shadowOffsetX 및 ShadowOffsetY는 그림자의 가로 및 세로 오프셋을 나타내며,shadowColor는 그림자의 색상을 나타냅니다.

4. ECharts 원형 차트의 예

아래에서는 위에서 언급한 기본 데이터와 스타일 설정이 포함된 특정 ECharts 원형 차트 예를 제공합니다. 코드는 다음과 같습니다.

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>
<script>
  var myChart = echarts.init(document.getElementById('myChart'));
  var option = {
    title: {
      text: '饼图示例',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top: 20,
      data:['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data:[
          {value:335, name:'数据1'},
          {value:310, name:'数据2'},
          {value:234, name:'数据3'},
          {value:135, name:'数据4'},
          {value:1548, name:'数据5'}
        ]
      }
    ]
  };
  myChart.setOption(option);
</script>

이 파이 차트에는 다음 기능이 포함되어 있습니다.

범례를 추가하고 범례 위치를 왼쪽 상단으로 조정합니다.

1. 마우스를 가리키면 팝업 창을 추가하고 표시합니다.
2. 마우스를 가리키면 그림자 효과가 추가되고 하이라이트 효과가 설정됩니다.
3. 위 내용은 ECharts 파이 차트의 기본 구현과 몇 가지 스타일 설정 예제에 대한 소개입니다. 독자들이 이 글을 통해 ECharts 파이 차트에 대해 어느 정도 이해하고 실제 개발에 올바르게 적용할 수 있기를 바랍니다.

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