Echarts在线免费图表

 
                
    // x轴数据
    let xData = ['2019','2020', '2021', '2022', '2023']
    // y轴数据
    let yData = [50, 21, 12, 45, 60]
    // 最大值，用于设置背景柱体高度
    let maxData = []
    let temp = yData.sort((a,b)=>{
      return a-b;
    })
    yData.forEach(item=>{
      maxData.push(temp[temp.length-1])
    })

    option = {
      backgroundColor: '#041F4A', 
      xAxis: {
          type: 'category',
          data: xData,
          axisLine: {
            show: true,
            onZero: true,
            symbol: "none",
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          axisTick: {
            show: false
          },
        },
        yAxis: {
          name: '单位：个',
          axisLabel: {
            color: '#c0c3cd',
            fontSize: 14,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed',
            },
          },
        },
      //图表与容器的位置关系
      grid: {
        left: '3%',   // 与容器左侧的距离
        right: '3%', // 与容器右侧的距离
        top: '11%',   // 与容器顶部的距离
        bottom: '12%', // 与容器底部的距离
      },
      series: [
        {
            name: "长度",
            type: "bar",
            barWidth: 16, // 柱体宽度
            //柱体上方显示的文本标签
            label: {
              show: true,
              position: 'top',
              color: '#e5e5e5',
              zlevel: 4,
              z: 10,
            },
            itemStyle: {
              normal: {
                color: (params) => ({
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(21,154,255)', // 柱子最高度% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,58,255,0)', // X轴处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                }),
                shadowBlur: 0,
                shadowColor: "rgba(87,220,222,0.7)",
              },
            },
            data: yData,
        },
        
        {
            name: "背景",
            type: "bar",
            barWidth: 37,
            barGap: "-165%",
            data: maxData,
            itemStyle: {
              normal: {
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
        },
      ]
    };