집 >웹 프론트엔드 >JS 튜토리얼 >ECharts 다축 차트: 다차원 데이터를 표시하는 방법

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

WBOY원래의: 2023-12-18 18:39:542009검색

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

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

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

2. ECharts 다축 차트 구성 항목

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

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

3. 코드 예제

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-axis Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>
</body>
</html>

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

echarts html 数据类型对象 apache https

성명：

이전 기사：Highcharts를 사용하여 웹사이트에 아름다운 차트를 삽입하는 방법다음 기사：Highcharts를 사용하여 웹사이트에 아름다운 차트를 삽입하는 방법