Echarts在线免费图表

 
            let log = console.log
var opt = {
   renderer: 'canvas',
}

var maxLimit = 5

option = {
   timeline: {
      data: ['9月1日', '9月2日', '9月3日', '9月4日', '9月5日', '9月6日', '9月7日', '9月8日', '9月9日', '9月10日'],
      axisType: 'category',
      show: true,
      autoPlay: true,
      playInterval: 1000,
      // replaceMerge: ['series'],
      checkpointStyle: {
         color: '#04a5f1',
         borderColor: 'rgba(4, 165, 261, .5)'
      },
      itemStyle: {
         normal: {
            color: '#04a5f1'
         },
         emphasis: {
            color: '#04a5f1'
         }
      },
      lineStyle: {
         color: '#ddd'
      },
   },
   options: [{
      title: {
         'text': '9月1日',
      },
      tooltip: {
         'trigger': 'axis'
      },
      xAxis: [{
         'type': 'category',
         'axisLabel': {
            'interval': 0
         },
         'data': [
            '市场监管局', ' 卫计委', '环保局', '民宗委', '人保局', '文广局', '规土局', '发改局'
         ]
      }],
      yAxis: [{
         'type': 'value',
         'name': ' ',
      }],
      tooltip: {
         show: false
      },
      series: [{
         'name': '9月1日',
         'type': 'bar',
         'data': [1, 6, 8, 28, 8, 24, 11, 16],
         label: {
            normal: {
               show: true,
               color: '#333',
               position: 'top',
               formatter: '{c}'
            }
         },
      }]
   }, {
      title: {
         'text': '9月2日'
      },
      series: [{
         'data': [2, 43, 64, 134, 188, 43, 109, 12],
         name: '9月2日',
         type: 'bar',
         label: {
            normal: {
               show: true,
               color: '#333',
               position: 'top',
               formatter: '{c}'
            }
         },
      }]
   }, {
      title: {
         'text': '9月3日'
      },
      series: [{
         'data': [3, 32, 111, 176, 73, 59, 181, 9]
      }]
   }, {
      title: {
         'text': '9月4日'
      },
      series: [{
         'data': [4, 37, 64, 55, 56, 41, 70, 17]
      }]
   }, {
      title: {
         'text': '9月5日'
      },
      series: [{
         'data': [5, 6, 5, 28, 8, 24, 11, 16]
      }]
   }, {
      title: {
         'text': '9月6日'
      },
      series: [{
         'data': [6, 34, 64, 134, 188, 43, 109, 12]
      }]
   }, {
      title: {
         'text': '9月7日'
      },
      series: [{
         'data': [7, 6, 34, 28, 8, 24, 11, 16]
      }]
   }, {
      title: {
         'text': '9月8日'
      },
      series: [{
         'data': [8, 37, 64, 55, 56, 41, 70, 17]
      }]
   }, {
      title: {
         'text': '9月9日'
      },
      series: [{
         'data': [9, 40, 64, 134, 188, 43, 109, 12]
      }]
   }, {
      title: {
         'text': '9月10日'
      },
      series: [{
         'data': [10, 6, 10, 28, 8, 24, 11, 16]
      }]
   },]

};
let allSeriesData = [], idx = 0
let options = JSON.parse(JSON.stringify(option.options)) // 所有的 timeline 数据
let optionsCopy = [].concat(options)
let arrNew = [].concat(option.timeline.data)
option.options.forEach((item) => {
   allSeriesData.push(item.series[0].data)
})

setTimeout(() => {
   if (arrNew.length > maxLimit) {
      let arrTmp = [].concat(arrNew).splice(0, maxLimit);
      optionsCopy.splice(maxLimit);
      option.timeline.data = arrTmp;
      myChart.setOption({
         timeline: option.timeline,
         options: optionsCopy
      })

      myChart.off('timelinechanged').on('timelinechanged', (params) => {
         idx = arrNew.indexOf(arrTmp[params.currentIndex])
         if (params.currentIndex == maxLimit - 1) {
            arrTmp.shift();
            arrTmp.push(arrNew[(idx + 1) % arrNew.length]);
            // 修改 timeline 的数据
            option.timeline.data = arrTmp;
            // 柱状图的数据也要改
            for (let i = 0; i < maxLimit; i++) {
               // 只改前 maxLimit 个的数据, 实际显示也只取这几个显示
               option.options[i].series[0].data = allSeriesData[(options.length + idx - maxLimit + i + 2) % options.length]
            }
            option.timeline.currentIndex = maxLimit - 2
            option.timeline.autoPlay = true
            myChart.setOption(option)
         }
      })
   }

}, 1000)