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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          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)樣式。


          主站蜘蛛池模板: 人成精品视频三区二区一区 | 国产在线步兵一区二区三区| 色婷婷亚洲一区二区三区| 丰满岳乱妇一区二区三区| 91成人爽a毛片一区二区| 肥臀熟女一区二区三区| 亚洲国产一区二区三区 | 精品理论片一区二区三区| 亚洲综合无码一区二区三区| 亚洲国产一区二区三区| 亚洲日本一区二区三区在线不卡 | 亚洲色精品aⅴ一区区三区| 一区二区三区在线视频播放| 国产一区二区三区播放| 国产精品日韩欧美一区二区三区 | 无码乱码av天堂一区二区| 无码人妻品一区二区三区精99 | 国产在线观看一区二区三区 | 国产成人欧美一区二区三区| 一本大道在线无码一区| 国产乱码精品一区二区三区中 | 人妻少妇一区二区三区| 国产日韩一区二区三区在线观看 | 国产成人午夜精品一区二区三区| 亚洲av乱码一区二区三区按摩| 国产精品电影一区| 精品国产亚洲第一区二区三区| 鲁丝丝国产一区二区| 国产产一区二区三区久久毛片国语| 国产精品亚洲专一区二区三区| 国产aⅴ一区二区三区| 一区二区三区精品视频| 国产91一区二区在线播放不卡| 中文无码AV一区二区三区| 亚洲一区免费观看| 无码人妻精品一区二区三区蜜桃| 国产视频一区二区| 99国产精品一区二区| 色窝窝无码一区二区三区成人网站| 亚洲国产一区在线观看| 视频一区视频二区在线观看|