項(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
本文進(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è)刻度。
果圖
各位觀眾老爺大家好
今天給大家?guī)?lái)的是
《企業(yè)網(wǎng)站必備jQuery全屏?xí)r間軸特效源碼》
十分適用于企業(yè)網(wǎng)站對(duì)于公司歷程的介紹模塊
廢話不多說(shuō)上源碼
@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ī)則)。
和 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ō)明)
在“電影開(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)會(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)始。
和 transition durations 一樣,animation durations 可以設(shè)置為 秒 1s 或 毫秒 200ms。
默認(rèn)值為 0s,即不會(huì)有動(dòng)畫(huà)出現(xiàn)。
和 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樣式代碼。
和 transition delays 一樣,animation delays 可以設(shè)置為 秒 1s 或 毫秒 200ms。
默認(rèn)值為 0s,即不會(huì)有延遲。
這個(gè)屬性在觸發(fā)多個(gè)時(shí)間交替的動(dòng)畫(huà)序列時(shí)很有用。
默認(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ù)
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è)方向取值之間的差別:
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)樣式。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。