ECharts 시작 가이드: ECharts 사용 방법, 특정 코드 예제가 필요합니다.
ECharts는 JavaScript 기반 데이터 시각화 라이브러리입니다. ECharts를 사용하면 사용자가 꺾은선형 차트, 열 등 다양한 차트를 쉽게 표시할 수 있습니다. . 그래프, 파이 차트 등 이 기사에서는 ECharts 사용 방법을 소개하고 자세한 코드 예제를 제공합니다.
ECharts를 사용하려면 먼저 ECharts를 설치해야 합니다. ECharts 공식 웹사이트(https://echarts.apache.org/zh/index.html)에서 ECharts를 다운로드하거나 npm을 사용하여 설치할 수 있습니다. npm을 사용하기로 선택한 경우 다음 명령을 사용하여 설치할 수 있습니다.
npm install echarts --save
새 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>
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 차트에 적용합니다.
선형 차트 외에도 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);
ECharts로 차트를 만드는 것은 기본적인 JavaScript 지식이 있는 한 비교적 간단한 작업입니다. . 이 기사에서는 ECharts를 시작하는 데 도움이 되는 소개 튜토리얼을 제공합니다. 더 많은 정보와 코드 예제가 필요하면 ECharts 공식 웹사이트 https://echarts.apache.org/zh/index.html을 방문하세요.
위 내용은 ECharts 시작 가이드: ECharts 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!