How to use timeline to display time data changes in ECharts

ECharts is a popular data visualization library that helps users transform data into intuitive, easy-to-understand charts. For some scenarios that need to display data that changes over time, ECharts provides a timeline component that can easily display changes in time data. This article will introduce how to use the timeline to display changes in time data in ECharts, and provide specific code examples.

1. Install ECharts

Before using ECharts, you need to install the ECharts library. You can install it through npm:

npm install echarts

After the installation is completed, you need to use ECharts Introduced in the page:

import echarts from 'echarts'

2. Set basic configuration items

To display charts in ECharts, you need to set basic configuration items first, such as chart size, background color, title, etc. . The following is a basic ECharts configuration item:

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

It includes basic configuration items such as title, background color, prompt box, and coordinate axis.

3. Set the timeline

To use the timeline in ECharts, you need to set the type to 'time' on the x-axis and add the timeline attribute to the option. The following is a simple timeline example:

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

You need to set the x-axis type to 'time', and the timeline data is added in the timeline attribute.

4. Add data series

To display data in ECharts, you need to add a data series. You can add multiple data series to display different data in the same chart. The following is a simple data series example:

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

Two data series are added to the above code, which are line charts named "Series 1" and "Series 2". Their data are in series Added to the array of properties.

5. Filling data

After completing the basic configuration of ECharts, you can start filling data. The following is an example of filling data:

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)

In the above code, the filled data is stored in an array, such as data. It contains the time and corresponding data value. Set the x-axis data of the timeline to the time field in the data, and fill in the data series into the data attribute of each series. Finally, the chart is rendered through the echarts.init method and setOption method.

The above is the specific example code for using the timeline to display changes in time data in ECharts. I hope it will be helpful to readers.

The above is the detailed content of How to use timeline to display time data changes in ECharts. For more information, please follow other related articles on the PHP Chinese website!