Echarts在线免费图表

 
            option = {
  backgroundColor:'#000',
  legend: {
    itemHeight: 14,
    itemWidth: 14,
    icon: 'rect',
    top: '15',
    right: '15',
    textStyle: {
      color: '#fff'
    }
  },
  color: [
    '#FFCD07',
    '#4AFFFC',
    '#9aff83'
  ],
  grid: {
    x: 170,
    y: 50,
    x2: 20,
    y2: 50
  },
  xAxis: {
    axisLine: {
      lineStyle: {
        color: '#44A0B7'
      }
    },
    axisLabel: {
      show: false,
      textStyle: {
        color: '#fff'
      }
    },
    show: true,
    type: 'value',
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  yAxis: {
    data: ['No.112312311', 'No.112312312', 'No.112312313', 'No.112312314', 'No.112312315', 'No.112312316', 'No.112312317', 'No.112312318', 'No.112312319', 'No.112312320'],
    axisLine: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#fff'
      }
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: '准备发货数',
      type: 'bar',
      stack: 'all',
      barWidth: 10,
      data: [5, 3, 8, 9, 3, 7, 7, 1, 3, 2],
      itemStyle: {
        emphasis: {
          barBorderRadius: [0, 20, 20, 0]
        },
        normal: {
          // barBorderRadius: [0, 20, 20, 0],
          barBorderRadius: [30, 30, 30, 30],
          // 柱状图上显示数字
          label: {
            show: true, // 开启显示
            position: 'insideRight', // 在上方显示
            offset: [0, -10], //  5以上用水平垂直
            textStyle: {
              // 数值样式
              fontSize: 12,
              color: '#fff',
              fontWeight: 500,
              padding: [0, 0, 0, 0] // 5以上版本无效
            }
          }
        }
      }
    },
    {
      name: '正在送发货数',
      type: 'bar',
      stack: 'all',
      barWidth: 10,
      data: [3, 4, 5, 2, 1, 10, 6, 1, 1, 1],
      itemStyle: {
        emphasis: {
          barBorderRadius: [0, 20, 20, 0]
        },
        normal: {
          // barBorderRadius: [0, 20, 20, 0],
          barBorderRadius: [30, 30, 30, 30],
          // 柱状图上显示数字
          label: {
            show: true, // 开启显示
            position: 'insideRight', // 在上方显示
            offset: [0, -10], //  5以上用水平垂直
            textStyle: {
              // 数值样式
              fontSize: 12,
              color: '#fff',
              fontWeight: 500,
              padding: [0, 0, 0, 0] // 5以上版本无效
            }
          }
        }
      }
    },
    {
      name: '一周内已发货数',
      type: 'bar',
      stack: 'all',
      barWidth: 10,
      data: [9, 10, 7, 5, 8, 1, 8, 1, 6, 7],
      itemStyle: {
        emphasis: {
          barBorderRadius: [0, 20, 20, 0]
        },
        normal: {
          // barBorderRadius: [0, 20, 20, 0],
          barBorderRadius: [30, 30, 30, 30],
          // 柱状图上显示数字
          label: {
            show: true, // 开启显示
            position: 'insideRight', // 在上方显示
            offset: [0, -10], //  5以上用水平垂直
            textStyle: {
              // 数值样式
              fontSize: 12,
              color: '#fff',
              fontWeight: 500,
              padding: [0, 0, 0, 0] // 5以上版本无效
            }
          }
        }
      }
    }
  ],
  dataZoom: [
    {
      yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
      show: false, // 是否显示滑动条，不影响使用
      type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      startValue: 0, // 从头开始。
      endValue: 3 // 展示到第几个。
    }
  ]
}

setInterval(() => {
  if (option.dataZoom[0].endValue >= 9) { // 需要9设置成实际的数据长度
    option.dataZoom[0].endValue = 3
    option.dataZoom[0].startValue = 0
  } else {
    option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
    option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
  }
  myChart.setOption(option)
}, 2000)