Echarts在线免费图表

 
            option = {
   backgroundColor: "#03213D",
   textStyle: {
      color: 'rgba(255,255,255,0.78)',
   },
   grid: {
      top: '70px',
      right: '30px',
      bottom: '35px',
      left: '40px',
   },
   tooltip: {
      trigger: 'axis',
      padding: [0, 15, 0, 15],
      backgroundColor: '#021D1F',
      borderColor: '#006871',
      width: 55,
      position: 'top',
      axisPointer: {
         type: 'line',
         lineStyle: {
            type: 'dotted',
            width: 0.5,
            color: 'rgba(255,255,255,0.78)',
            cap: 'none',
         },
      },
      textStyle: {
         color: 'rgba(255,255,255,0.78)',
         fontSize: 15,
      },
   },
   legend: {
      right: 0,
      top: '5',
      icon: 'rect',
      itemWidth: 15,
      itemHeight: 4,
      textStyle: {
         color: 'rgba(255,255,255,0.7)'
      },
   },
   dataZoom: [{
      type: 'inside', //1平移 缩放
      throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
      minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
      start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
      end: 10, //数据窗口范围的结束百分比。范围是：0 ~ 100。
      zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
   }],
   xAxis: {
      type: 'category',
      data: ["12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00"],
      axisPointer: {
         show: true,
      },
      axisTick: {
         show: false,
         alignWithLabel: true,
      },
      axisLine: {
         lineStyle: {
            color: 'rgba(255,255,255,0.25)',
         }
      },
      axisLabel: {
         fontFamily: 'DIN Alternate-Bold, DIN Alternate',
         interval: 0,
      },
   },
   yAxis: {
      type: 'value',
      splitLine: {
         show: false
      },
      axisTick: {
         show: false,
      },
      axisLine: {
         show: false, //隐藏X轴轴线
         lineStyle: {
            color: "#163a5f",
            width: 1,
         },
      },
      axisLabel: {
         show: false,
         textStyle: {
            color: "#BDD8FB",
            fontSize: 12,
         },
      },
   },
   series: [
      {
         name: '雨量',
         type: 'line',
         data: ["23", "24", "27", "23", "22", "20", "18", "18", "17", "18", "19", "23", "24", "27", "23", "22", "20", "18", "18", "17", "18", "19"],
         symbol: 'circle',
         symbolSize: 6,
         itemStyle: {
            normal: {
               color: '#200202',
               borderColor: '#00E4F7',
               borderWidth: 1,
               lineStyle: {
                  color: '#00E4F7'
               }
            },
            emphasis: {
               color: '#00E4F7',
               borderColor: '#00E4F7',
               borderWidth: 2,
            }
         },
         label: {
            show: true,
            position: "top",
            distance: 0,
            color: "#1ACDDC",
            formatter: "{c}",
         },
         areaStyle: {
            origin: 'start',
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
               {
                  offset: 0,
                  color: 'rgba(0,228,247,0.1)'
               },
               {
                  offset: 1,
                  color: 'rgba(0,228,247,0.5)'
               },
            ]),
         },
      },
   ],
};
option.timeTicket = setInterval(function() {
    // 获取当前数据的索引
  var currentIndex = option.series[0].data.length - 1;
  // 将当前数据移动到数组末尾
  option.series[0].data.push(option.series[0].data.shift());
  option.xAxis.data.push(option.xAxis.data.shift());
  // 更新图表
  myChart.setOption(option);
}, 1000);