Echarts在线免费图表

 
            option = {
   title: {
      text: 'Rainfall vs Evaporation',
      subtext: 'Fake Data'
   },
   dataZoom: [{
      type: 'slider',
      show: false,
      startValue: 0,
      endValue: 5,
      height: '15',
      bottom: '3%',
      zoomLock: true,
      brushSelect: false,
   }],
   tooltip: {
      trigger: 'axis'
   },
   legend: {
      data: ['Rainfall', 'Evaporation']
   },
   toolbox: {
      show: true,
      feature: {
         dataView: { show: true, readOnly: false },
         magicType: { show: true, type: ['line', 'bar'] },
         restore: { show: true },
         saveAsImage: { show: true }
      }
   },
   calculable: true,
   xAxis: [
      {
         type: 'category',
         // prettier-ignore
         data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
      }
   ],
   yAxis: [
      {
         type: 'value'
      }
   ],
   series: [
      {
         name: 'Rainfall',
         type: 'bar',
         data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
         ],
         markPoint: {
            data: [
               { type: 'max', name: 'Max' },
               { type: 'min', name: 'Min' }
            ]
         },
         markLine: {
            data: [{ type: 'average', name: 'Avg' }]
         }
      },
      {
         name: 'Evaporation',
         type: 'bar',
         data: [
            2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
         ],
         markPoint: {
            data: [
               { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
               { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
            ]
         },
         markLine: {
            data: [{ type: 'average', name: 'Avg' }]
         }
      }
   ]
};

setInterval(function () {
   // 每次向后滚动一个，最后一个从头开始。
   if (option.dataZoom[0].endValue == option.xAxis[0].data.length) {
      option.dataZoom[0].endValue = 6;
      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);