前言

项目中前端(angular)开发中需要使用到基于时间线的UI控件，初步调研两种,可以参考下面链接

https://ng.ant.design/components/slider/zh

https://echarts.apache.org/zh/cheat-sheet.html

https://echarts.apache.org/zh/option.html#timeline

echarts的timeline

本文进行了简化和集成进angular中，需求是基于时间线展示北京、天津、河北、南京四地2000年每个月的经济指标。最终效果图：

首先在html中，声明div

<div id="lineChart" style="width:100%;height:500px"></div>

在ts脚本中

import { Component, OnInit } from '@angular/core';
import { EChartOption } from 'echarts';

import * as echarts from 'echarts';
import { title } from 'process';

@Component({
  selector: 'app-echart-time-demo',
  templateUrl: './echart-time-demo.component.html',
  styleUrls: ['./echart-time-demo.component.css']
})
export class EchartTimeDemoComponent implements OnInit {
  initCharts() {
    const ec = echarts as any;
    let lineChart = ec.init(document.getElementById('lineChart'));

    let lineChartOption = {
      baseOption: {
        timeline: {
          axisType: 'category',//time
          // realtime: true,
          // loop: false,
          autoPlay: true,
          // currentIndex: 2,
          playInterval: 1000,   
          //时间线刻度值      
          data: [
            '2000-01', '2000-02', '2000-03',
            '2000-04', '2000-05', '2000-06',
            '2000-07', '2000-08', '2000-09',
            '2000-10', '2000-11', '2000-12'
          ],
          label: {
            formatter: function (s) {
              return s;
            }
          }
        },

        title: {
          subtext: '数据来自国家统计局'
        },
		
        xAxis: [{
          type: 'category',
          data: ['北京', '天津', '河北', '南京'],
        }],
        yAxis: [{
          type: 'value'
        }],
        //第一组数据展示形态
        series: [{
          type: 'bar'
        }],
      },
      options: [
        {
          title: {
            text: '2000年1月四地经济指标'
          },
          series: [
            { data: [4315, 2150.76, 16018.28, 20000] }
          ]
        }, {
          title: {
            text: '2000年2月四地经济指标'
          },
          series: [{
            data: [5007.21, 2578.03, 6921.29, 20000]
          }]
        },
        {
          title: {
            text: '2000年3月四地经济指标'
          },
          series: [{
            data: [6033.21, 3110.97, 8477.63, 20000]
          }]
        }, {
          title: {
            text: '2000年4月四地经济指标'
          },
          series: [{
            data: [6033.21, 3110.97, 8477.63, 20000]
          }]
        }, {
          title: {
            text: '2000年5月四地经济指标'
          },
          series: [{
            data: [6033.21, 3130.97, 8477.63, 17000]
          }]
        }, {
          title: {
            text: '2000年6月四地经济指标'
          },
          series: [{
            data: [6033.21, 3110.97, 8177.63, 25000]
          }]
        }, {
          title: {
            text: '2000年7月四地经济指标'
          },
          series: [{
            data: [6433.21, 3110.97, 8477.63, 10000]
          }]
        }, {
          title: {
            text: '2000年8月四地经济指标'
          },
          series: [{
            data: [6033.21, 4110.97, 8477.63, 11000]
          }]
        }, {
          title: {
            text: '2000年9月四地经济指标'
          },
          series: [{
            data: [6033.21, 5110.97, 8477.63, 20000]
          }]
        },
      ]
    }
    lineChart.setOption(lineChartOption);
  }

  constructor() { }

  ngOnInit() {
    this.initCharts();
  }
}

从上文的图片中，列表中只展示四个地区的一组数据，未能充分利用，所以考虑再增加一组2000每月四地的消费指标，所以series里增加一个维度

 series: [{
          type: 'bar'
        },{
          type: 'bar'
        }],

而数据里也要增加一组数据

  series: [{
            data: [6033.21, 4110.97, 8477.63, 11000]
          },
          {
            data: [6033.21, 4110.97, 8477.63, 11000]
          }]

如图,柱状图中各地指标多了一组

使用 axisType: 'time'

上文中使用的 axisType: 'category',这样会将时间线上的坐标等分，简单来说两个刻度间距离相等，但实际使用中可能存在刻度间不是等分的，如1：00到1：10到2：00到3：00，很明显1：00到1：10只过了10分钟，直观上这两个刻度距离要小点。所以在echarts中提供了axisType为time的配置。

  let lineChartOption = {
      baseOption: {
        timeline: {
          // axisType: 'category',
          axisType: 'time',
....
          data: [
            '2000-01', '2000-03',
            '2000-04', '2000-05', '2000-06',
            '2000-07', '2000-08', '2000-09',
            '2000-10', '2000-11', '2000-12'
          ],
          label: {
            formatter: function (s) {                  
				 return (new Date(s).getMonth()+1)+'月';
            }
          }

上面的刻度数据(注意是时间格式)中是没有2月份的，使用time,要特殊处理如label的formater。最终效果如下，发现由于2不存在，所以1到3自动跨两个刻度。

事件timelinechanged

lineChart.on('timelinechanged', function (timeLineIndex) {
	...
});