ECharts는 사용자가 데이터를 직관적이고 이해하기 쉬운 차트로 변환하는 데 도움이 되는 인기 있는 데이터 시각화 라이브러리입니다. 시간이 지남에 따라 변경되는 데이터를 표시해야 하는 일부 시나리오의 경우 ECharts는 시간 데이터의 변경 사항을 쉽게 표시할 수 있는 타임라인 구성 요소를 제공합니다. 이 기사에서는 타임라인을 사용하여 ECharts에서 시간 데이터의 변경 사항을 표시하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
ECharts를 사용하기 전에 ECharts 라이브러리를 설치해야 합니다. npm을 통해 설치할 수 있습니다:
npm install echarts
설치가 완료되면 ECharts를 사용해야 하는 페이지에 소개하세요:
import echarts from 'echarts'
ECharts에 차트를 표시하려면 차트 크기, 배경색, 제목 등 기본 구성 항목을 먼저 설정해야 합니다. 다음은 ECharts 기본 구성 항목입니다.
const option = { title: { text: '时间轴示例' }, backgroundColor: '#ffffff', tooltip: { trigger: 'axis', axisPointer: { animation: false } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: [] // x轴数据 }, yAxis: { type: 'value', axisLine: { show: false }, axisLabel: { formatter: '{value}' }, splitLine: { lineStyle: { type: 'dashed' } } }, series: [] // 数据系列 }
제목, 배경색, 프롬프트 상자, 좌표축 등 기본 구성 항목이 포함되어 있습니다.
ECharts에서 타임라인을 사용하려면 x축에 유형을 '시간'으로 설정하고 옵션에 타임라인 속성을 추가해야 합니다. 간단한 타임라인 예시는 다음과 같습니다.
const option = { title: { text: '时间轴示例' }, backgroundColor: '#ffffff', tooltip: { trigger: 'axis', axisPointer: { animation: false } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'time', // 设置x轴type为time boundaryGap: false, data: [] // x轴数据 }, yAxis: { type: 'value', axisLine: { show: false }, axisLabel: { formatter: '{value}' }, splitLine: { lineStyle: { type: 'dashed' } } }, series: [] // 数据系列 timeline: { data: [] // 时间轴数据 } }
x축 유형을 'time'으로 설정해야 하며, 타임라인 데이터가 타임라인 속성에 추가됩니다.
ECharts에 데이터를 표시하려면 데이터 시리즈를 추가하여 동일한 차트에 다양한 데이터를 표시할 수 있습니다. 다음은 간단한 데이터 계열의 예입니다.
const option = { title: { text: '时间轴示例' }, backgroundColor: '#ffffff', tooltip: { trigger: 'axis', axisPointer: { animation: false } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'time', boundaryGap: false, data: [] // x轴数据 }, yAxis: { type: 'value', axisLine: { show: false }, axisLabel: { formatter: '{value}' }, splitLine: { lineStyle: { type: 'dashed' } } }, series: [ { name: '系列1', type: 'line', data: [] // 系列1数据 }, { name: '系列2', type: 'line', data: [] // 系列2数据 } ], timeline: { data: [] // 时间轴数据 } }
위의 코드에 "Series 1" 및 "Series 2"라는 이름의 꺾은선형 차트인 두 개의 데이터 계열이 추가됩니다. .
ECharts의 기본 구성을 완료한 후 데이터 채우기를 시작할 수 있습니다. 다음은 데이터 채우기의 예입니다.
const data = [ {'time': '2019-01-01', 'value1': 23, 'value2': 56}, {'time': '2019-01-02', 'value1': 34, 'value2': 78}, {'time': '2019-01-03', 'value1': 45, 'value2': 90}, // 更多数据... ] // 填充x轴时间 const xAxisData = data.map((item) => item['time']) // 填充数据系列 const seriesData1 = data.map((item) => item['value1']) const seriesData2 = data.map((item) => item['value2']) // 设置配置项 option.xAxis.data = xAxisData option.series[0].data = seriesData1 option.series[1].data = seriesData2 // 渲染图表 const chart = echarts.init(document.getElementById('chart')) chart.setOption(option)
위 코드에서 채워진 데이터는 데이터와 같은 배열에 저장됩니다. 여기에는 시간과 해당 데이터 값이 포함됩니다. 타임라인의 x축 데이터를 데이터의 시간 필드로 설정하고, 각 시리즈의 데이터 속성에 데이터 시리즈를 입력합니다. 마지막으로 echarts.init 메소드와 setOption 메소드를 통해 차트가 렌더링됩니다.
위는 ECharts에서 시간 데이터의 변화를 표시하기 위해 타임라인을 사용하는 구체적인 예제 코드입니다. 독자들에게 도움이 되기를 바랍니다.
위 내용은 타임라인을 사용하여 ECharts에서 시간 데이터 변경 사항을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!