ECharts 시작 가이드: ECharts 사용 방법

ECharts 시작 가이드: ECharts 사용 방법, 특정 코드 예제가 필요합니다.

ECharts는 JavaScript 기반 데이터 시각화 라이브러리입니다. ECharts를 사용하면 사용자가 꺾은선형 차트, 열 등 다양한 차트를 쉽게 표시할 수 있습니다. . 그래프, 파이 차트 등 이 기사에서는 ECharts 사용 방법을 소개하고 자세한 코드 예제를 제공합니다.

1. ECharts 설치

ECharts를 사용하려면 먼저 ECharts를 설치해야 합니다. ECharts 공식 웹사이트(https://echarts.apache.org/zh/index.html)에서 ECharts를 다운로드하거나 npm을 사용하여 설치할 수 있습니다. npm을 사용하기로 선택한 경우 다음 명령을 사용하여 설치할 수 있습니다.

npm install echarts --save

2. 새 ECharts 페이지 만들기

새 ECharts 페이지를 만들기 전에 ECharts를 호스팅할 HTML 페이지가 필요합니다. HTML에는 ECharts의 JavaScript 파일을 포함해야 합니다. 다음을 통해 가져올 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

ECharts의 JavaScript 파일을 가져온 후에는 첫 번째 ECharts 인스턴스 생성을 시작할 수 있습니다. 차트를 페이지에 렌더링할 수 있도록 이 작업을 수행하기 전에 페이지에 div 요소를 추가하는 것이 좋습니다. 다음과 같이 HTML에 div 요소를 추가할 수 있습니다.

<div id="chart" style="width: 600px;height:400px;"></div>

3. 첫 번째 ECharts 차트 만들기

HTML에서 ECharts에 필요한 기본 요소를 만든 후 다음으로 ECharts 차트를 구현하기 위한 코드를 작성해야 합니다. 다음은 매우 간단한 선 차트의 예입니다.

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 3. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

여기에서는 먼저 ECharts의 init函数来初始化了一个新的ECharts实例，并将这个实例保存到一个变量myChart中。我们引入了一些配置项和数据，其中包括一个标题、一个提示框、一个图例、一个x轴、一个y轴和一个数据系列。在这个例子中，我们使用了一个折线图的数据系列。最后，我们通过调用setOption 메서드를 사용하여 이러한 구성 항목을 ECharts 차트에 적용합니다.

4. 다른 유형의 차트 만들기

선형 차트 외에도 ECharts는 막대형 차트, 원형 차트, 분산형 차트, 방사형 차트 등과 같은 다양한 유형의 차트도 지원합니다. 다음은 막대 차트 및 원형 차트의 샘플 코드입니다.

막대 차트:

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 3. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

원형 차트:

// 1. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 2. 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例',
        subtext: '饼图示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

// 3. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

5. 요약

ECharts로 차트를 만드는 것은 기본적인 JavaScript 지식이 있는 한 비교적 간단한 작업입니다. . 이 기사에서는 ECharts를 시작하는 데 도움이 되는 소개 튜토리얼을 제공합니다. 더 많은 정보와 코드 예제가 필요하면 ECharts 공식 웹사이트 https://echarts.apache.org/zh/index.html을 방문하세요.

위 내용은 ECharts 시작 가이드: ECharts 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!