타임라인을 사용하여 ECharts에서 시간 데이터 변경 사항을 표시하는 방법-JS 튜토리얼-php.cn

타임라인을 사용하여 ECharts에서 시간 데이터 변경 사항을 표시하는 방법

WBOY

풀어 주다： 2023-12-17 09:38:45

원래의

1269명이 탐색했습니다.

타임라인을 사용하여 ECharts에서 시간 데이터 변경 사항을 표시하는 방법

ECharts는 사용자가 데이터를 직관적이고 이해하기 쉬운 차트로 변환하는 데 도움이 되는 인기 있는 데이터 시각화 라이브러리입니다. 시간이 지남에 따라 변경되는 데이터를 표시해야 하는 일부 시나리오의 경우 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!