Cara menggunakan garis masa untuk memaparkan perubahan data masa dalam ECharts

ECharts ialah perpustakaan visualisasi data popular yang membantu pengguna mengubah data menjadi carta intuitif dan mudah difahami. Untuk sesetengah senario yang perlu memaparkan data yang berubah dari semasa ke semasa, ECharts menyediakan komponen garis masa yang boleh memaparkan perubahan dalam data masa dengan mudah. Artikel ini akan memperkenalkan cara menggunakan garis masa untuk memaparkan perubahan dalam data masa dalam ECharts dan memberikan contoh kod khusus.

1. Pasang ECharts

Anda perlu memasang perpustakaan ECharts sebelum menggunakan ECharts Anda boleh memasangnya melalui npm:

npm install echarts

Setelah pemasangan selesai, perkenalkan ke halaman yang anda perlu gunakan EChartsreee:

Tetapkan item konfigurasi asas

Untuk memaparkan carta dalam ECharts, anda perlu menetapkan item konfigurasi asas dahulu, seperti saiz carta, warna latar belakang, tajuk, dsb. Berikut ialah item konfigurasi ECharts asas:

import echarts from 'echarts'

Ia termasuk item konfigurasi asas seperti tajuk, warna latar belakang, kotak gesaan dan paksi koordinat.

Tetapkan garis masa

Untuk menggunakan garis masa dalam ECharts, anda perlu menetapkan jenis kepada 'masa' pada paksi-x dan menambah atribut garis masa pada pilihan. Berikut ialah contoh garis masa yang mudah:

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

Anda perlu menetapkan jenis paksi-x kepada 'masa' dan data garis masa ditambah dalam atribut garis masa.

Tambahkan siri data

Untuk memaparkan data dalam ECharts, anda perlu menambah siri data Anda boleh menambah berbilang siri data untuk memaparkan data yang berbeza dalam carta yang sama. Berikut ialah contoh siri data ringkas:

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

Dua siri data ditambahkan pada kod di atas, iaitu carta baris bernama "Siri 1" dan "Siri 2" Data mereka berada dalam tatasusunan atribut siri .

Mengisi data

Selepas melengkapkan konfigurasi asas ECharts, anda boleh mula mengisi data. Berikut ialah contoh pengisian data:

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

Dalam kod di atas, data yang diisi disimpan dalam tatasusunan, seperti data. Ia mengandungi masa dan nilai data yang sepadan. Tetapkan data paksi-x garis masa kepada medan masa dalam data dan isikan siri data ke dalam atribut data setiap siri. Akhir sekali, carta dipaparkan melalui kaedah echarts.init dan kaedah setOption.

Di atas adalah contoh kod khusus untuk menggunakan garis masa untuk memaparkan perubahan dalam data masa dalam ECharts saya harap ia akan membantu pembaca.

Atas ialah kandungan terperinci Cara menggunakan garis masa untuk memaparkan perubahan data masa dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!