タイムラインを使用して ECharts で時間データの変化を表示する方法-jsチュートリアル-php.cn

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

データ系列の追加

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" という名前の折れ線グラフです。それらのデータは連続しており、配列に追加されます。プロパティの。

データの入力

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 サイトの他の関連記事を参照してください。