ECharts 다축 차트: 다차원 데이터를 표시하는 방법-JS 튜토리얼-php.cn

ECharts 다축 차트: 다차원 데이터를 표시하는 방법

ECharts 다축 차트: 다차원 데이터를 표시하는 방법, 구체적인 코드 예제가 필요합니다

소개:
빅데이터 시대가 도래하면서 복잡한 다차원 데이터를 더 잘 표시해야 합니다. 강력한 시각화 라이브러리인 ECharts는 다양한 차트 유형을 제공하며, 그 중 다축 차트는 다차원 데이터를 표시하는 중요한 도구 중 하나입니다. 이 기사에서는 다축 차트가 무엇인지, EChart를 사용하여 다차원 데이터를 표시하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1. 다축 차트란? 다축 차트는 동일한 차트에 데이터 단위와 크기가 다른 여러 데이터 계열을 표시할 수 있는 차트입니다. 각 데이터 시리즈에 하나씩 여러 축을 사용하면 다양한 차원의 데이터를 보다 직관적으로 비교할 수 있습니다.

2. ECharts 다축 차트 구성 항목

다축 차트를 생성하려면 ECharts의 옵션 개체에 여러 속성을 설정해야 합니다. 설정해야 하는 주요 구성 항목은 다음과 같습니다.

legend 속성: 범례, 즉 차트의 색상 식별을 구성하는 데 사용되며 다양한 데이터 계열을 구별하는 데 사용됩니다.
xAxis 및 yAxis 속성: 여러 축을 구성하는 데 사용됩니다. xAxis는 x축을 구성하고 yAxis는 y축을 구성합니다. 여러 축을 배열 형식으로 구성할 수 있습니다.
series 속성: 데이터 시리즈를 구성하는 데 사용됩니다. 각 데이터 계열은 하나의 축에 해당하며 서로 다른 데이터 유형과 차트 표시 방법을 가질 수 있습니다.

3. 코드 예제

아래에서는 특정 코드 예제를 사용하여 ECharts를 사용하여 다차원 데이터를 표시하는 다축 차트를 만드는 방법을 보여줍니다. 상품화 예시부터 시작해 보겠습니다.

```
    Multi-axis Chart Example  
  
  
```
로그인 후 복사

var chart = echarts.init(document.getElementById('chart')); var option = { tooltip: { trigger: 'axis' }, legend: { data: ['电视销量', '冰箱销量', '洗衣机销量'] }, xAxis: [ { type: 'category', data: ['一月', '二月', '三月', '四月', '五月'] } ], yAxis: [ { type: 'value', name: '销量' }, { type: 'value', name: '销售额' } ], series: [ { name: '电视销量', type: 'bar', data: [120, 200, 150, 80, 70] }, { name: '冰箱销量', type: 'bar', data: [80, 100, 120, 150, 110] }, { name: '洗衣机销量', type: 'line', yAxisIndex: 1, data: [1000, 1500, 2000, 1800, 1600] } ] }; chart.setOption(option);

로그인 후 복사

위 코드에서는 TV 판매, 냉장고 판매, 세탁기판매. 그 중 TV 매출과 냉장고 매출은 막대 차트를 이용하여 표시하고, 세탁기 매출은 라인 차트를 이용하여 표시하고 있습니다. 판매량과 판매량은 서로 다른 y축을 사용하여 표시됩니다.

4. 요약

ECharts는 다차원 데이터를 쉽게 표시할 수 있는 다축 차트 기능을 제공합니다. 적절한 구성 항목을 설정함으로써 아름답고 직관적인 다축 그래프를 만들 수 있습니다. 이 기사의 샘플 코드를 통해 ECharts를 사용하여 다축 차트를 그리고 자신의 프로젝트에 적용할 수 있습니다.

참조 링크:

[ECharts 공식 문서](https://echarts.apache.org/zh/index.html)

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