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],
              },
              formatter: (name, index) => {
               let i = xdata.findIndex(v => v == name);
               if (i == 0) {
                  return [`{lg1|${i + 1}} ` + "{title|" + name + "} "];
               } else if (i == 1) {
                  return [`{lg2|${i + 1}} ` + "{title|" + name + "} "];
               } else {
                  return [`{lg|${i + 1}} ` + "{title|" + name + "} "];
               }
              },
              rich: {
               lg1: {
                  backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    colorStops: [{
                        offset: 0, color: 'red' // 开始颜色
                    }, {
                        offset: 1, color: 'blue' // 结束颜色
                    }],
                  },
                  color: '#fff',
                  borderRadius: [32,0,0,32],
                  padding: 5,
                  align: "center",
                  width: 52,
                  height: 32,
                  lineHeight: 52,
                  fontSize: 19,
                  fontFamily: 'Source Han Sans CN-Regular',
               },
               lg2: {
                  backgroundColor: "#dec674",
                  color: '#fff',
                  borderRadius: [32,0,0,32],
                  padding: 5,
                  align: "center",
                  width: 52,
                  height: 32,
                  lineHeight: 52,
                  fontSize: 19,
                  fontFamily: 'Source Han Sans CN-Regular',
               },
               
               lg: {
                  backgroundColor: "rgba(57, 126, 240, 0.1)",
                  color: '#fff',
                  borderRadius: 5,
                  padding: 5,
                  align: "center",
                  width: 32,
                  height: 32,
                  lineHeight: 32,
                  fontSize: 19,
                  fontFamily: 'Source Han Sans CN-Regular',
               },
               title: {
                  color: '#fff',
                  align: "right",
                  fontSize: 18,
                  fontFamily: 'Source Han Sans CN-Regular',
                  padding: [0, 0, 0, -20],
               }
            },
            },
            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, 20, 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,
              },
            },
          },
        ],
};