EChart中時(shí)間線控件實(shí)踐

言

項(xiàng)目中前端(angular)開(kāi)發(fā)中需要使用到基于時(shí)間線的UI控件，初步調(diào)研兩種,可以參考下面鏈接

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

本文進(jìn)行了簡(jiǎn)化和集成進(jìn)angular中，需求是基于時(shí)間線展示北京、天津、河北、南京四地2000年每個(gè)月的經(jīng)濟(jì)指標(biāo)。最終效果圖：

首先在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,   
          //時(shí)間線刻度值      
          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: '數(shù)據(jù)來(lái)自國(guó)家統(tǒng)計(jì)局'
        },
		
        xAxis: [{
          type: 'category',
          data: ['北京', '天津', '河北', '南京'],
        }],
        yAxis: [{
          type: 'value'
        }],
        //第一組數(shù)據(jù)展示形態(tài)
        series: [{
          type: 'bar'
        }],
      },
      options: [
        {
          title: {
            text: '2000年1月四地經(jīng)濟(jì)指標(biāo)'
          },
          series: [
            { data: [4315, 2150.76, 16018.28, 20000] }
          ]
        }, {
          title: {
            text: '2000年2月四地經(jīng)濟(jì)指標(biāo)'
          },
          series: [{
            data: [5007.21, 2578.03, 6921.29, 20000]
          }]
        },
        {
          title: {
            text: '2000年3月四地經(jīng)濟(jì)指標(biāo)'
          },
          series: [{
            data: [6033.21, 3110.97, 8477.63, 20000]
          }]
        }, {
          title: {
            text: '2000年4月四地經(jīng)濟(jì)指標(biāo)'
          },
          series: [{
            data: [6033.21, 3110.97, 8477.63, 20000]
          }]
        }, {
          title: {
            text: '2000年5月四地經(jīng)濟(jì)指標(biāo)'
          },
          series: [{
            data: [6033.21, 3130.97, 8477.63, 17000]
          }]
        }, {
          title: {
            text: '2000年6月四地經(jīng)濟(jì)指標(biāo)'
          },
          series: [{
            data: [6033.21, 3110.97, 8177.63, 25000]
          }]
        }, {
          title: {
            text: '2000年7月四地經(jīng)濟(jì)指標(biāo)'
          },
          series: [{
            data: [6433.21, 3110.97, 8477.63, 10000]
          }]
        }, {
          title: {
            text: '2000年8月四地經(jīng)濟(jì)指標(biāo)'
          },
          series: [{
            data: [6033.21, 4110.97, 8477.63, 11000]
          }]
        }, {
          title: {
            text: '2000年9月四地經(jīng)濟(jì)指標(biāo)'
          },
          series: [{
            data: [6033.21, 5110.97, 8477.63, 20000]
          }]
        },
      ]
    }
    lineChart.setOption(lineChartOption);
  }

  constructor() { }

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

從上文的圖片中，列表中只展示四個(gè)地區(qū)的一組數(shù)據(jù)，未能充分利用，所以考慮再增加一組2000每月四地的消費(fèi)指標(biāo)，所以series里增加一個(gè)維度

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

而數(shù)據(jù)里也要增加一組數(shù)據(jù)

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

如圖,柱狀圖中各地指標(biāo)多了一組

使用 axisType: 'time'

上文中使用的 axisType: 'category',這樣會(huì)將時(shí)間線上的坐標(biāo)等分，簡(jiǎn)單來(lái)說(shuō)兩個(gè)刻度間距離相等，但實(shí)際使用中可能存在刻度間不是等分的，如1：00到1：10到2：00到3：00，很明顯1：00到1：10只過(guò)了10分鐘，直觀上這兩個(gè)刻度距離要小點(diǎn)。所以在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)+'月';
            }
          }

上面的刻度數(shù)據(jù)(注意是時(shí)間格式)中是沒(méi)有2月份的，使用time,要特殊處理如label的formater。最終效果如下，發(fā)現(xiàn)由于2不存在，所以1到3自動(dòng)跨兩個(gè)刻度。

事件timelinechanged

果圖

各位觀眾老爺大家好

今天給大家?guī)?lái)的是

《企業(yè)網(wǎng)站必備jQuery全屏?xí)r間軸特效源碼》

十分適用于企業(yè)網(wǎng)站對(duì)于公司歷程的介紹模塊

代碼過(guò)長(zhǎng)需要文檔版源碼來(lái)我的前端群581549454，已上傳到群文件

廢話不多說(shuō)上源碼

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%

}

們前面提到過(guò)，轉(zhuǎn)換（transitions）實(shí)際上就是一種特殊的CSS動(dòng)畫(huà)（見(jiàn)《前端設(shè)計(jì)必須掌握：定義CSS樣式之間的切換》）：

只有兩個(gè)狀態(tài)：起始狀態(tài)和終止?fàn)顟B(tài)
動(dòng)畫(huà)不會(huì)出現(xiàn)循環(huán)
中間狀態(tài)只能由時(shí)變函數(shù)（transition-timing-function）來(lái)控制

實(shí)際動(dòng)畫(huà)需求要復(fù)雜得多，比如我們可能會(huì)需要：

自動(dòng)播放的動(dòng)畫(huà)（不會(huì)有交互狀態(tài)）
控制中間狀態(tài)
創(chuàng)建循環(huán)動(dòng)畫(huà)
在同一個(gè)HTML元素上應(yīng)用不同的動(dòng)畫(huà)
在動(dòng)畫(huà)過(guò)程中控制不同的元素屬性
給不同的屬性應(yīng)用不同的時(shí)變函數(shù)

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

animation 屬性

和 transition 屬性一樣，animation 是一組動(dòng)畫(huà)屬性的速寫(xiě)：

name: 動(dòng)畫(huà)名稱
duration: 動(dòng)畫(huà)持續(xù)時(shí)間
timing-function: 時(shí)變函數(shù)，用來(lái)計(jì)算中間狀態(tài)
delay: 延時(shí)，在一定時(shí)候后啟動(dòng)動(dòng)畫(huà)
iteration-count: 動(dòng)畫(huà)重復(fù)的次數(shù)
direction: 動(dòng)畫(huà)的運(yùn)行方向，可以是反過(guò)來(lái)的
fill-mode: 動(dòng)畫(huà)填充模式，用來(lái)確定動(dòng)畫(huà)開(kāi)始之前和結(jié)束之后的樣式

例：按鈕彈跳動(dòng)畫(huà)

CSS代碼如下：

效果圖如下：

首先我們選定“演員”為一個(gè)加載按鈕（html元素），然后設(shè)定其表演劇本（keyframes）為彈跳，然后添加一些動(dòng)作指令（CSS規(guī)則）來(lái)創(chuàng)建一個(gè)CSS3動(dòng)畫(huà)：

name: bouncing （動(dòng)畫(huà)名稱必須和keyframes名稱一致）
duration: 0.5s （持續(xù)0.5秒）
timing-function: cubic-bezier(0.1,0.25,0.1,1)
delay: 0s （沒(méi)有延遲）
iteration-count: infinite （無(wú)限循環(huán)）
direction: alternate （交替往返）
fill-mode: both（填充模式同時(shí)應(yīng)用backwards和forwards規(guī)則，后面會(huì)詳細(xì)說(shuō)明）

@keyframes

在“電影開(kāi)拍”之前，我們得創(chuàng)建“劇本”（@keyframes，即關(guān)鍵幀），用來(lái)規(guī)定動(dòng)畫(huà)中間的每一個(gè)表演步驟。@keyframes通過(guò)percentages（百分比格式的時(shí)間坐標(biāo)）來(lái)定義：

0% 動(dòng)畫(huà)的第一幀（可選）。
50% 動(dòng)畫(huà)的中間時(shí)間節(jié)點(diǎn)。
100% 動(dòng)畫(huà)的最后一幀。

我們也可以分別使用關(guān)鍵詞 from 和 to 來(lái)代替 0% 和 100%。

你可以定義任意多的keyframes，比如 33%, 4% 乃至 29.86%。每個(gè) keyframe 都是一個(gè) CSS規(guī)則，定義這個(gè)時(shí)間節(jié)點(diǎn)下元素的某個(gè)或某些屬性。

@keyframes 具體語(yǔ)法定義如下：

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

animationname: 必需。定義動(dòng)畫(huà)的名稱。
keyframes-selector: 必需。百分比格式的時(shí)間坐標(biāo)。合法的值：0-100% | from（與 0% 相同）| to（與 100% 相同）。
css-styles: 必需。一個(gè)或多個(gè)合法的 CSS規(guī)則（樣式定義）。

CSS代碼：

效果圖如下：

上面的例子把起點(diǎn) 0% 和終點(diǎn) 100% 設(shè)置成一樣的狀態(tài)，并且是 infinite 播放，這樣可以確保動(dòng)畫(huà)的兩次播放之間的無(wú)縫銜接。

另外如果若干時(shí)間節(jié)點(diǎn)具有相同的樣式，可以合并在一起簡(jiǎn)寫(xiě)，比如：

如果在@keyframes中0%和100%時(shí)間點(diǎn)所設(shè)置的屬性有默認(rèn)值，那么有些情況下可以忽略不寫(xiě)。

動(dòng)畫(huà)名稱（animation-name）

動(dòng)畫(huà)名稱（animation-name）會(huì)至少出現(xiàn)兩次：

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

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

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

不能以數(shù)字或者兩個(gè)中劃線開(kāi)始。

動(dòng)畫(huà)持續(xù)時(shí)間（animation-duration）

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

默認(rèn)值為 0s，即不會(huì)有動(dòng)畫(huà)出現(xiàn)。

動(dòng)畫(huà)時(shí)變函數(shù)（animation-timing-function）

和 transition timing functions 一樣，animation timing functions 可以使用一些預(yù)定義的關(guān)鍵詞比如 linear, ease-out, 或者使用cubic bezier函數(shù)來(lái)自定義。

缺省值是 ease。

我們可以通過(guò)設(shè)置線性時(shí)變函數(shù)以及自定義的@keyframes來(lái)模擬復(fù)雜的貝塞爾曲線。Bounce.js 就是這樣一個(gè)在線高級(jí)動(dòng)畫(huà)生成工具，支持導(dǎo)出CSS樣式代碼。

動(dòng)畫(huà)延時(shí)（animation-delay）

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

默認(rèn)值為 0s，即不會(huì)有延遲。

這個(gè)屬性在觸發(fā)多個(gè)時(shí)間交替的動(dòng)畫(huà)序列時(shí)很有用。

動(dòng)畫(huà)循環(huán)次數(shù)（animation-iteration-count）

默認(rèn)情況下，動(dòng)畫(huà)只運(yùn)行一次（即默認(rèn)值為 1），你可以設(shè)置3種類型的數(shù)值：

整數(shù) 如 2 或 3
小數(shù) 如 0.5，意味著只運(yùn)行動(dòng)畫(huà)的一半
關(guān)鍵詞 infinite 無(wú)限重復(fù)

動(dòng)畫(huà)方向（animation-direction）

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

normal: 正常方向，從 0% 開(kāi)始，到 100% 結(jié)束，然后再?gòu)?0% 開(kāi)始。
reverse: 相反方向，從 100% 開(kāi)始，到 0% 結(jié)束，然后再?gòu)?100% 開(kāi)始。
alternate: 交替方向，從 0% 開(kāi)始，到 100% ，再到 0%。
alternate-reverse: 反向交替方向，從 100% 開(kāi)始，到 0%，再到 100%。

通過(guò)下面的循環(huán)動(dòng)畫(huà)，對(duì)比小方塊的運(yùn)動(dòng)軌跡，可以比較直觀的感受這幾個(gè)方向取值之間的差別：

動(dòng)畫(huà)填充模式（animation-fill-mode）

animation-fill-mode 用來(lái)確定動(dòng)畫(huà)開(kāi)始之前和結(jié)束之后的狀態(tài)。這樣才是一個(gè)完整的動(dòng)畫(huà)過(guò)程。

通過(guò) keyframes 我們定義了動(dòng)畫(huà)不同階段下的CSS規(guī)則，這有可能會(huì)和已經(jīng)定義的樣式?jīng)_突。

填充模式屬性允許我們告訴瀏覽器是否動(dòng)畫(huà)樣式在動(dòng)畫(huà)之外也生效。

讓我們想象這樣一個(gè)按鈕：

默認(rèn)是紅色
在動(dòng)畫(huà)開(kāi)始時(shí)被設(shè)置為綠色
在動(dòng)畫(huà)結(jié)束時(shí)被設(shè)置為藍(lán)色

效果圖：

我們可以簡(jiǎn)單的理解為：forwards就是動(dòng)畫(huà)樣式作用區(qū)間向時(shí)間軸正方向（->）延伸，backwards則向負(fù)方向（<-）延伸，而both就是雙向（<- ->）延伸。從而影響到相鄰區(qū)間的默認(rèn)樣式。

在線咨詢

上一篇：基于Goaccess生成日志的HTML頁(yè)面搭建日志實(shí)時(shí)分析系統(tǒng)
下一篇：Annotorious.js 入門(mén)教程：圖片注釋工具

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商