Echarts在线免费图表

 
            option = {
  backgroundColor: '#011234',//取消背景删除
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    data: [
      '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60'
    ],
    type: 'category',
    boundaryGap: true,
    itemStyle: {
      borderColor: 'blue',
      color: '#ffffff'
    },
    axisTick: {
      show: false
    },
    boundaryGap: true,
    axisLabel: {
      interval: 0,
      formatter: function (value, index) {
        const step = 5;
        if (index % step === 0) {
          return value;
        } else {
          return '';
        }
      },
      textStyle: {
        show: true,
        color: '#fff',
        fontSize: '12'
      }
    },
    axisLine: {
      symbol: ['none', 'arrow'],
      symbolSize: [10, 15],
      symbolOffset: [0, 0],
      lineStyle: {
        width: 2,
        color: 'rgba(255,255,255,0.6)'
      }
    },
  },
  yAxis: {
    name: '单位人数',
    nameTextStyle: {
      color: '#fff',
      padding: [0, 0, 6, 0]
    },
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.2)'
      }
    },
    axisLine: {
      show: true,
      symbol: ['none', 'arrow'],
      symbolSize: [10, 15],
      symbolOffset: [0, 0],
      lineStyle: {
        width: 2,
        color: 'rgba(255,255,255,0.6)'
      }
    },
    axisLabel: {
      textStyle: {
        show: true,
        color: '#fff',
        fontSize: '12'
      }
    },
  },
  grid: {
    left: '3%',
    top: '8%',
    right: '3%',
    bottom: '5%',
    containLabel: true
  },
  series: [{
    data: [105, 272, 239, 150, 147, 319, 284, 363, 118, 221, 96, 69, 265, 389, 337, 250, 355, 158, 133, 21, 278, 183, 130, 349, 344, 248, 127, 75, 359, 292, 204, 233, 216, 317, 271, 174, 396, 91, 299, 229, 261, 129, 313, 382, 241, 49, 305, 192, 169, 231, 164, 198, 113, 303, 329, 287, 256, 324, 369, 207, 110, 153, 78, 245, 387, 60, 280, 214, 150, 191, 237, 136, 177, 332, 269, 346, 275, 335, 249, 297, 315, 227, 143, 188, 263, 26, 362, 377, 99, 219, 294, 385, 122, 235, 282, 253, 224, 279, 331, 311, 201, 243, 170, 185, 353, 258, 203, 162, 126, 213, 375, 352, 295, 309, 181, 254, 226, 135, 368, 176, 273, 327, 307, 230, 360, 268, 374, 289, 259, 195, 94, 286, 322, 298, 246, 167, 266, 145, 209, 139, 293, 197, 277, 393, 172, 379, 314, 236, 156, 210, 301, 358, 304, 255, 142, 189, 223, 264, 251, 325, 366, 290, 272, 244, 187, 234, 383, 326, 390, 283, 357, 398, 206, 200],
    name: '',
    type: 'line',
    symbol: 'circle',
    smooth: true,
    symbolSize: 0,//不需要点就设置0
    lineStyle: {
      width:2,
      type: 'solid'
    },
    itemStyle: {
      borderWidth: 5,
      borderColor: '#1AC9FF',
      color: '#1AC9FF'
    },
    areaStyle: {
      color: '#F4F65B',
      normal: {
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [{
            offset: 0,
            color: 'rgba(26,201,255,1)'
          },
          {
            offset: 1,
            color: 'rgba(26,201,255,.1)'
          }
          ],
          false
        ),
      }
    }
  }]
}