前言
項(xiàng)目中前端(angular)開發(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)行了簡化和集成進(jìn)angular中，需求是基于時(shí)間線展示北京、天津、河北、南京四地2000年每個(gè)月的經(jīng)濟(jì)指標(biāo)。最終效果圖：
首先在html中，聲明p
在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ù)來自國家統(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)等分，簡單來說兩個(gè)刻度間距離相等，但實(shí)際使用中可能存在刻度間不是等分的，如1：00到1：10到2：00到3：00，很明顯1：00到1：10只過了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í)間格式)中是沒有2月份的，使用time,要特殊處理如label的formater。最終效果如下，發(fā)現(xiàn)由于2不存在，所以1到3自動(dòng)跨兩個(gè)刻度。
事件timelinechanged
lineChart.on(‘timelinechanged’, function (timeLineIndex) {…});
