Echarts在线免费图表

 
            const x = ['2022/09', '2022/10', '2022/11', '2022/12', '2023/01', '2023/02']
const y1 = [4000, 4000, 4000, 4000, 4000, 4000]
const y2 = [2331, 3212, 3511, 2531, 2632, 3022]
option = {
  backgroundColor: 'rgba(0,0,0, .6)',
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    top: '10%',
    left: '10%',
    right: '10%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: { // 坐标轴轴线相关设置。数学上的x轴
      show: false
    },
    axisLabel: { // 坐标轴刻度标签的相关设置
      textStyle: {
        color: '#CEDDF2',
        fontSize: 10
      },
      formatter: function (data) {
        return data
      }
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    data: x
  }],
  yAxis: [{
    splitLine: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#CEDDF2',
        verticalAlign: 'top', // 看这里
        align: 'left', // 看这里
        // 调整文字上右下左
        padding: [0, 0, 0, -55]// 看这里
      }
    },
    axisTick: {
      show: false
    }

  }],
  series: [
    {
      name: '柱图',
      type: 'bar',
      barWidth: '60%',
      data: y1,
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,0.1)'
        }
      },
      tooltip: {
        show: false
      },
      legend: {
        show: false
      }
    },
    {
      name: '申请数量',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 1
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(255,188,10, 0.3)'
          }, {
            offset: 0.8,
            color: 'rgba(255,188,10, 0.3)'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
        }
      },
      itemStyle: {
        normal: {
          color: 'rgb(255,188,10)',
          borderColor: 'rgba(255,188,10,0.27)',
          borderWidth: 12

        }
      },
      data: y2
    }]
}