Echarts在线免费图表

 
            option = {
  dataZoom: [{
    type: 'inside', //1平移 缩放
    throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
    minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
    start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
    end: 10, //数据窗口范围的结束百分比。范围是：0 ~ 100。
    zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
  }],
  // dataZoom: [
  //       {
  //           type: 'slider', // 滑动条型 dataZoom 组件
  //           show: true, // 显示 dataZoom 组件
  //           start: 0, // 起始位置为0（即最左侧）
  //           end: 100, // 结束位置为100（即最右侧）
  //           handleSize: '100%', // 滑块大小
  //           filterMode: 'empty', // 拖拽时只统计空白处的数值
  //           xAxisIndex: 0, // x轴为第一个轴
  //       }
  //   ],
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    splitLine: { show: true, lineStyle: { type: 'dashed' } },
    axisTick: { show: false },
    axisLabel: { show: false }
  },
  yAxis: {
    type: 'value',
    splitLine: { show: true, lineStyle: { type: 'dashed' } },
    axisTick: { show: false },
    axisLabel: { show: false }
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: '#68CEFF'
            },
            {
              offset: 0.3,
              color: '#68CEFF'
            },
            {
              offset: 1,
              color: 'transparent'
            }
          ],
          false
        )
      }
    }
  ],
  tooltip: {
    // 设置提升效果
    trigger: 'axis',
    backgroundColor: '#68CEFF'
  }
};