Echarts在线免费图表

 
            option = {
  name:'Time scatter',
  backgroundColor: '#12233D',
  tooltip: {
      trigger: 'axis',
      axisPointer: {
          type: 'cross',
      },
  },
  xAxis: {
    type:'category',
    name: '时间',
    splitLine: false,
    axisTick: false,
    axisLine: {
      symbol: ['none', 'arrow'],
      lineStyle: {
        color: '#5F7494',
      },
    },
    data: 
    ['2022/09/08 00:00:00', 
    '2022/09/08 00:00:01', 
    '2022/09/08 00:00:02', 
    '2022/09/08 00:00:03', 
    '2022/09/08 00:00:04', 
    '2022/09/08 00:00:05',
    '2022/09/08 00:00:06',
    '2022/09/08 00:00:07',
    '2022/09/08 00:00:08',
    '2022/09/08 00:00:09',
    '2022/09/08 00:00:10',
    '2022/09/08 00:00:11',
    '2022/09/08 00:00:12',
    '2022/09/08 00:00:13',
    '2022/09/08 00:00:14',
    '2022/09/08 00:00:15',
    '2022/09/08 00:00:16',
    '2022/09/08 00:00:17',
    '2022/09/08 00:00:18',
    '2022/09/08 00:00:19',
    '2022/09/08 00:00:20',
    '2022/09/08 00:00:21',
    '2022/09/08 00:00:22',
    '2022/09/08 00:00:23',
    '2022/09/08 00:00:24',
    '2022/09/08 00:00:25',
    '2022/09/08 00:00:26',
    '2022/09/08 00:00:27',
    ]
  },
  yAxis: {
    name: '人员',
    splitLine: false,
    axisTick: false,
    axisLine: {
      symbol: ['none', 'arrow'],
      lineStyle: {
        color: '#5F7494',
      },
    },
    data: ['张三','李四','王五']
  },
   dataZoom: [
    {
      type:'inside',
      disabled:true,
    }, 
    {
      type: "slider",
      show: true, // 这里可以手动根据数据量判断是否展示
      height: "6", 
      bottom: "4%",  
      backgroundColor: "#CCCCCC", 
      brushSelect:false,
      handleColor: "#429AE9",
      handleSize: 28,   
      start: 0, 
      end: 100,
      handleStyle:{
        borderCap:'round',
        borderWidth:0
      },
      textStyle: {
        color: '#5F7494',
      },
    }, 
  ],
  series: [
    {
      type: 'scatter',
      itemStyle: {
        color: '#3286B0',
      },
      symbolSize: function (value, params) {
        return 10;
      },
      data: [
        ['2022/09/08 00:00:01', '张三'],
        ['2022/09/08 00:00:02', '张三'],
        ['2022/09/08 00:00:03', '张三'],
        ['2022/09/08 00:00:04', '张三'],
        ['2022/09/08 00:00:04', '李四'],
        ['2022/09/08 00:00:05', '李四'],
        ['2022/09/08 00:00:06', '李四'],
        ['2022/09/08 00:00:07', '李四'],
        ['2022/09/08 00:00:08', '李四'],
        ['2022/09/08 00:00:09', '李四'],
        ['2022/09/08 00:00:10', '李四'],
        ['2022/09/08 00:00:11', '李四'],
        ['2022/09/08 00:00:12', '李四'],
        ['2022/09/08 00:00:13', '李四'],
        ['2022/09/08 00:00:14', '李四'],
        ['2022/09/08 00:00:15', '李四'],
        ['2022/09/08 00:00:16', '李四'],
        ['2022/09/08 00:00:17', '李四'],
        ['2022/09/08 00:00:18', '李四'],
        ['2022/09/08 00:00:19', '李四'],
        ['2022/09/08 00:00:20', '李四'],
        ['2022/09/08 00:00:21', '李四'],
        ['2022/09/08 00:00:22', '李四'],
        ['2022/09/08 00:00:23', '李四'],
        ['2022/09/08 00:00:24', '李四'],
        ['2022/09/08 00:00:25', '李四'],
        ['2022/09/08 00:00:26', '李四'],
        ['2022/09/08 00:00:27', '李四'],
      ],
    },
  ],
};