Echarts：好玩的timeline

Echarts是一个开源的可视化图表库，支持丰富的图表，官网中还有大量示例可以选择使用、参考。

其中比较有趣的一个特性是可以把数据随时间变化而变化，其效果与一些视频中比较不同国家的国力随时间变化的排名变化的效果相似。

接下来我们就实现一个类似的示例。

要实现上文中提到的效果，需要使用echarts中的一个timeline配置。这个配置可以在多个option中切换、播放。当我们让它根据时间的先后播放这样就能实现我们想想要的效果了。

首先，创建一个容器元素用来显示图表。

<div id="container">div>
1

然后使用这个容器初始化，初始化echarts之前需要引入echarts库文件，在这里不在赘述。

const echartInstance = echarts.init(document.getElementById('container'));
1

接下来配置options，前文中提到timeline可以在多个option间切换，因此，需要配置多个option，根据echarts的规范，配置多个option，需要使用options和baseOption字段分别存储，baseOption作为公用的配置，options中存放的属于子配置。
在baseOption中我们可以看到timeline属性，我们在该属性中进行简单的配置，例如：自动播放（autoPlay），播放的速度（playInterval），以及时间轴上的数据（data）。除了时间轴之外，我们还是用了animationDurationUpdate属性，该属性用于设置动画的持续时间，animationEaseUpdate表示切换时的速度曲线。

由于数据比较多，使用一个函数创建数据。

function createData() {
  let data = [];
  for (let i = 0; i < 7; i++) {
    let date = new Date().getTime() - (24 * 3600 * 1000 * i);
    let dataItem = {
      date,
      category: date,
      data: []
    }
    for(let j = 0; j < 5; j++){
    // 每一个数据项中需要有name和value属性，name作为显示的类目，value作为对应类目的值
      dataItem.data.push({
        name:'商品'+(j+1),
        value:Math.floor(Math.random() * 101)
      });
    }
    data.push(dataItem);
  }
  return data;
}
const rankData = createData();
// timeline的配置需要有baseOption：基础配置，配置整个图标的样式、大小等内容，options：配置每一个时间点的数据、样式、大小等内容
const option = {
	const option = {
    baseOption:{
      animationDurationUpdate:1000 * 1.5,
      animationEaseUpdate:'quinticInOut',
      timeline:{
        show:false,
        axisType:'category',
        orient:'vertical',
        autoPlay:true,
        loop:false,
        playInterval:1000,
        data:rankData.map(item => {
          return item.date;
        })
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#ff54de'
          }
        }
      },
      
      xAxis:[{}],
      yAxis: [{}],
      series: [{
        id:'bar',
        type: 'bar',
        data: [],
        label: {
          show: true,
          position: "right"
        }
      }]
    },
    options:[]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

接下来，开始配置子配置，我们只需要根据得到的数据进行遍历进行配置，每遍历一项就生成一个配置

for(let i = 0; i < rankData.length; i++){
    let data = rankData[i];
    data.data.sort((a,b) => a.value-b.value);
    let xMax = data.data[0];
    let xMaxInterval = 5;
    if(data.data[0].value / xMaxInterval >= 10){
      xMaxInterval = data.data[0].value / 5;
    }
    option.options.push({
      title:{
        text:'商品销售'+ ' ' + data.category
      },
      xAxis:{
        type:'value',
        max:xMax,
        interval:xMaxInterval
      },
      yAxis:{
        type:'category',
        data:data.data.map(item => {
          return item.name;
        })
      },
      series:[{
        id:'bar',
        type:'bar',
        data:data.data.map(item => {
          return item.value;
        })
      }]
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

最后，设置echartInstance的配置

echartsInstance.setOption(option);
1

效果如下