タイムラインを使用して ECharts で時間データの変化を表示する方法

ECharts は、ユーザーがデータを直観的で理解しやすいグラフに変換するのに役立つ人気のデータ視覚化ライブラリです。時間の経過とともに変化するデータを表示する必要がある一部のシナリオのために、ECharts は時間データの変化を簡単に表示できるタイムライン コンポーネントを提供します。この記事では、タイムラインを使用して ECharts の時間データの変化を表示する方法と、具体的なコード例を紹介します。

1. ECharts のインストール

ECharts を使用する前に、ECharts ライブラリをインストールする必要があります。npm を通じてインストールできます:

npm install echarts

インストール後ページで紹介されている ECharts を使用する必要があります:

import echarts from 'echarts'

2. 基本構成項目の設定

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: [] // 数据系列
}

これには、タイトル、背景色、プロンプト ボックス、座標軸などの基本的な構成項目が含まれています。

3. タイムラインの設定

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 軸のタイプを「時間」に設定する必要があり、タイムライン データは timeline 属性に追加されます。

4. データ系列の追加

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: [] // 时间轴数据
  }
}

2 つのデータ系列が上記のコードに追加されます。これらは "シリーズ 1" と "シリーズ 2" という名前の折れ線グラフです。それらのデータは連続しており、配列に追加されます。プロパティの。

5. データの入力

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)

上記のコードでは、埋められたデータは data などの配列に格納されます。これには、時間と対応するデータ値が含まれます。データ内の時間フィールドにタイムラインのx軸データを設定し、各系列のdata属性にデータ系列を記入します。最後に、チャートは echarts.init メソッドと setOption メソッドを通じてレンダリングされます。

上記は、タイムラインを使用して ECharts の時間データの変化を表示するための具体的なコード例です。読者の参考になれば幸いです。

以上がタイムラインを使用して ECharts で時間データの変化を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。