EChart中時間線控件實踐

言

項目中前端(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

果圖

各位觀眾老爺大家好

今天給大家帶來的是

《企業網站必備jQuery全屏時間軸特效源碼》

十分適用于企業網站對于公司歷程的介紹模塊

代碼過長需要文檔版源碼來我的前端群581549454，已上傳到群文件

廢話不多說上源碼

CSS源碼：

@charset "utf-8";

.dsk-not-supported,.dsk-supported {

background:#cebe29;

background:-moz-linear-gradient(-45deg,#cebe29 0,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);

background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,#cebe29),color-stop(33%,#9b1f50),color-stop(71%,#2989d8),color-stop(91%,#89b4ff));

background:-webkit-linear-gradient(-45deg,#cebe29 0,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);

background:-o-linear-gradient(-45deg,#cebe29 0,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);

background:-ms-linear-gradient(-45deg,#cebe29 0,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);

background:linear-gradient(135deg,#cebe29 0,#9b1f50 33%,#2989d8 71%,#89b4ff 91%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cebe29',endColorstr='#89b4ff',GradientType=1);

-webkit-background-size:100% 100%;

-moz-background-size:100% 100%;

background-size:100% 100%

}

們前面提到過，轉換（transitions）實際上就是一種特殊的CSS動畫（見《前端設計必須掌握：定義CSS樣式之間的切換》）：

只有兩個狀態：起始狀態和終止狀態
動畫不會出現循環
中間狀態只能由時變函數（transition-timing-function）來控制

實際動畫需求要復雜得多，比如我們可能會需要：

自動播放的動畫（不會有交互狀態）
控制中間狀態
創建循環動畫
在同一個HTML元素上應用不同的動畫
在動畫過程中控制不同的元素屬性
給不同的屬性應用不同的時變函數

這個時候就需要使用CSS3動畫（animation）特性，而且提供了更多的功能。CSS3動畫就像一部迷你電影，里面有演員（HTML元素）、劇本（keyframes）以及動作片段（CSS規則）。

animation 屬性

和 transition 屬性一樣，animation 是一組動畫屬性的速寫：

name: 動畫名稱
duration: 動畫持續時間
timing-function: 時變函數，用來計算中間狀態
delay: 延時，在一定時候后啟動動畫
iteration-count: 動畫重復的次數
direction: 動畫的運行方向，可以是反過來的
fill-mode: 動畫填充模式，用來確定動畫開始之前和結束之后的樣式

例：按鈕彈跳動畫

CSS代碼如下：

效果圖如下：

首先我們選定“演員”為一個加載按鈕（html元素），然后設定其表演劇本（keyframes）為彈跳，然后添加一些動作指令（CSS規則）來創建一個CSS3動畫：

name: bouncing （動畫名稱必須和keyframes名稱一致）
duration: 0.5s （持續0.5秒）
timing-function: cubic-bezier(0.1,0.25,0.1,1)
delay: 0s （沒有延遲）
iteration-count: infinite （無限循環）
direction: alternate （交替往返）
fill-mode: both（填充模式同時應用backwards和forwards規則，后面會詳細說明）

@keyframes

在“電影開拍”之前，我們得創建“劇本”（@keyframes，即關鍵幀），用來規定動畫中間的每一個表演步驟。@keyframes通過percentages（百分比格式的時間坐標）來定義：

0% 動畫的第一幀（可選）。
50% 動畫的中間時間節點。
100% 動畫的最后一幀。

我們也可以分別使用關鍵詞 from 和 to 來代替 0% 和 100%。

你可以定義任意多的keyframes，比如 33%, 4% 乃至 29.86%。每個 keyframe 都是一個 CSS規則，定義這個時間節點下元素的某個或某些屬性。

@keyframes 具體語法定義如下：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname: 必需。定義動畫的名稱。
keyframes-selector: 必需。百分比格式的時間坐標。合法的值：0-100% | from（與 0% 相同）| to（與 100% 相同）。
css-styles: 必需。一個或多個合法的 CSS規則（樣式定義）。

CSS代碼：

效果圖如下：

上面的例子把起點 0% 和終點 100% 設置成一樣的狀態，并且是 infinite 播放，這樣可以確保動畫的兩次播放之間的無縫銜接。

另外如果若干時間節點具有相同的樣式，可以合并在一起簡寫，比如：

如果在@keyframes中0%和100%時間點所設置的屬性有默認值，那么有些情況下可以忽略不寫。

動畫名稱（animation-name）

動畫名稱（animation-name）會至少出現兩次：

一次是“編寫劇本” @keframes 時。
一次是“演員入戲”時，即設置HTML元素的 animation-name 屬性值為“劇本”的名稱（或者在 animation 速寫中）。

和CSS class名稱一樣，animation 的名稱只能包含：

字母 (a-z)
數字 (0-9)
下劃線 underscore (_)
中劃線 dash (-)

不能以數字或者兩個中劃線開始。

動畫持續時間（animation-duration）

和 transition durations 一樣，animation durations 可以設置為秒 1s 或毫秒 200ms。

默認值為 0s，即不會有動畫出現。

動畫時變函數（animation-timing-function）

和 transition timing functions 一樣，animation timing functions 可以使用一些預定義的關鍵詞比如 linear, ease-out, 或者使用cubic bezier函數來自定義。

缺省值是 ease。

我們可以通過設置線性時變函數以及自定義的@keyframes來模擬復雜的貝塞爾曲線。Bounce.js 就是這樣一個在線高級動畫生成工具，支持導出CSS樣式代碼。

動畫延時（animation-delay）

和 transition delays 一樣，animation delays 可以設置為秒 1s 或毫秒 200ms。

默認值為 0s，即不會有延遲。

這個屬性在觸發多個時間交替的動畫序列時很有用。

動畫循環次數（animation-iteration-count）

默認情況下，動畫只運行一次（即默認值為 1），你可以設置3種類型的數值：

整數如 2 或 3
小數如 0.5，意味著只運行動畫的一半
關鍵詞 infinite 無限重復

動畫方向（animation-direction）

animation-direction 定義瀏覽器對@keyframes的讀取順序。

normal: 正常方向，從 0% 開始，到 100% 結束，然后再從 0% 開始。
reverse: 相反方向，從 100% 開始，到 0% 結束，然后再從 100% 開始。
alternate: 交替方向，從 0% 開始，到 100% ，再到 0%。
alternate-reverse: 反向交替方向，從 100% 開始，到 0%，再到 100%。

通過下面的循環動畫，對比小方塊的運動軌跡，可以比較直觀的感受這幾個方向取值之間的差別：

動畫填充模式（animation-fill-mode）

animation-fill-mode 用來確定動畫開始之前和結束之后的狀態。這樣才是一個完整的動畫過程。

通過 keyframes 我們定義了動畫不同階段下的CSS規則，這有可能會和已經定義的樣式沖突。

填充模式屬性允許我們告訴瀏覽器是否動畫樣式在動畫之外也生效。

讓我們想象這樣一個按鈕：

默認是紅色
在動畫開始時被設置為綠色
在動畫結束時被設置為藍色

效果圖：

我們可以簡單的理解為：forwards就是動畫樣式作用區間向時間軸正方向（->）延伸，backwards則向負方向（<-）延伸，而both就是雙向（<- ->）延伸。從而影響到相鄰區間的默認樣式。

在線咨詢

上一篇：基于Goaccess生成日志的HTML頁面搭建日志實時分析系統
下一篇：Annotorious.js 入門教程：圖片注釋工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商