Comment utiliser la chronologie pour afficher les modifications des données temporelles dans ECharts

ECharts est une bibliothèque de visualisation de données populaire qui aide les utilisateurs à transformer les données en graphiques intuitifs et faciles à comprendre. Pour certains scénarios nécessitant d'afficher des données qui changent au fil du temps, ECharts fournit un composant de chronologie qui peut facilement afficher les modifications des données temporelles. Cet article explique comment utiliser la chronologie pour afficher les modifications des données temporelles dans ECharts et fournit des exemples de code spécifiques.

1. Installer ECharts

Vous devez installer la bibliothèque ECharts avant d'utiliser ECharts. Vous pouvez l'installer via npm :

npm install echarts

Une fois l'installation terminée, présentez-la à la page où vous devez utiliser ECharts :

import echarts from 'echarts'

.
2. Définir les éléments de configuration de base

Pour afficher des graphiques dans ECharts, vous devez d'abord définir les éléments de configuration de base, tels que la taille du graphique, la couleur d'arrière-plan, le titre, etc. Ce qui suit est un élément de configuration de base d'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: [] // 数据系列
}

Il comprend des éléments de configuration de base tels que le titre, la couleur d'arrière-plan, la boîte d'invite et l'axe de coordonnées.

3. Définir la chronologie

Pour utiliser la chronologie dans ECharts, vous devez définir le type sur « temps » sur l'axe des x et ajouter l'attribut de chronologie à l'option. Voici un exemple simple de chronologie :

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

Vous devez définir le type d'axe des x sur « temps », et les données de la chronologie sont ajoutées dans l'attribut de la chronologie.

4. Ajouter une série de données

Pour afficher des données dans ECharts, vous devez ajouter une série de données. Vous pouvez ajouter plusieurs séries de données pour afficher différentes données dans le même graphique. Voici un exemple simple de série de données :

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

Deux séries de données sont ajoutées au code ci-dessus, qui sont des graphiques linéaires nommés "Série 1" et "Série 2". Leurs données se trouvent dans le tableau de l'attribut série. .

5. Remplir les données

Après avoir terminé la configuration de base d'ECharts, vous pouvez commencer à remplir les données. Voici un exemple de remplissage de données :

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)

Dans le code ci-dessus, les données remplies sont stockées dans un tableau, tel que data. Il contient l'heure et la valeur des données correspondantes. Définissez les données de l'axe X de la chronologie sur le champ temporel dans les données et remplissez la série de données dans l'attribut de données de chaque série. Enfin, le graphique est rendu via la méthode echarts.init et la méthode setOption.

Ce qui précède est un exemple de code spécifique pour utiliser la chronologie pour afficher les modifications des données temporelles dans ECharts. J'espère que cela sera utile aux lecteurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!