时间轴可缩放的折线图和柱状图

动画演示

核心代码

核心是利用escharts的datazoom属性

dataZoom: [
      {
        type: 'inside',
        start: 0,  //时间条从0%的位置开始
        end: 10,   //时间条从10%的位置结束
      },
      {
        height: '5%',
        width: '63%',
        top: '32%',
        right: '20%',
        start: 0,
        end: 10,
        textStyle: {
          fontSize: 11,
        },
      },
    ],