Echarts在线免费图表

 
            let data = [20, 15, 12, 5, 26];
        let className = ["正常登机", "登机结束", "已关舱门", "READY", "放行推出"];
        var option;
        option = {
           backgroundColor: '#000',
          grid: {
            left: 50,
            right: 50,
            bottom: 50,
            top: 50,
            containLabel: true
          },
          xAxis: [
            {
              show: true,
              type: "category",
              data: className,
              axisTick: {
                show: false
              },
            //   x轴名称
              axisLabel: {
                show: true,
                textStyle: {
                  color: "rgba(194, 194, 194, 1)",
                  fontSize: 12
                }
              },
            //   横轴的线
              axisLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255,255,255,0.3)",
                  type: "solid"
                }
              }
            },
            {
              // x轴最顶部侧的文字
              axisTick: "none",
              axisLine: "none",
              type: "category",
              axisLabel: {
                margin: 10,
                textStyle: {
                  color: "#fff",
                  fontSize: "16"
                }
              },
              data: data
            }
          ],
          yAxis: [
            {
              type: "value",
              axisLabel: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255,255,255,0.1)",
                  type: "solid"
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: "值",
              type: "bar",
              zlevel: 1,
              showBackground: true,
              label: {
                show: false
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(30, 110, 201, 0.15)"
                    },
                    {
                      offset: 1,
                      color: "rgba(30, 110, 201, 1)"
                    }
                  ])
                }
              },
              barWidth: 20,//柱宽
              data: data
            },
            // 顶部白条
            {
              type: "scatter",
              symbol: "react",
              symbolSize: [20, 4],//白条宽高
              z: 12,//层级
              itemStyle: {
                color: "#fff"//颜色
              },
              data: data//白条数据
            }
          ]
        };