Echarts在线免费图表

 
            

var ydata = [100,80,60,40,20]
var xdata = ['classA','classB','classC','classD','classE',]
option = {
    backgroundColor: '#000000',
   //你的代码
   grid: {
          left: "10%",
          right: "10%",
          bottom: "10%",
          top: "10%",
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              inside: true,
              splitNumber: 50,
              boundaryGap: [20, 20],
              textStyle: {
                color: "#ffffff",
                verticalAlign: "bottom",
                align: "left",
                fontSize: "16",
                padding: [0, 0, 6, -6],
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: xdata,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              inside: true,
              verticalAlign: "bottom",
              textStyle: {
                color: "#ffffff",
                fontSize: "14",
                padding: [0, 0, 6, 0],
              },
              formatter: "{value}%",
            },
            data: ydata,
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                // barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: "#3f7fff",
                  },
                  {
                    offset: 1,
                    color: "#3f7fff",
                  },
                ]),
                barBorderRadius: 8,
              },
            },
            barWidth: 8,
            data: ydata,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 8,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              normal: {
                color: "#bcdaff42",
                barBorderRadius: 8,
              },
            },
          },
        ],
};