Echarts在线免费图表

 
            let color = ['rgb(39,93,254)', 'rgb(39,115,254)', 'rgb(1,155,255)', 'rgb(23,167,244)', 'rgb(125,235,255)']; let barPercent = ['-1', '2', '-5', '10', '30'];
      let barName = ['人名', '人名1', '人名2', '人名3', "人名4"];
      let barData = [25, 19, 15, 12, 10];
      var maxNum = 0;
   
      for (var i = 0; i < barData.length; i++) {
        if (barData[i] > maxNum) {
          maxNum = barData[i];
        }
      }

      let option = {
        grid: {
          left: '10%',
          right: '18%',
          bottom: '6%',
          top: '12%',
          containLabel: false,
        },
        backgroundColor: '#0e1c47',
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [{
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 14,
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: barName
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: false,
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: 12
            },
            formatter: function (value) {
              return value + ' %';
            },
          },
          data: barData
        }],
        series: [
          {
            name: '攻击次数',
            type: 'bar',
            zlevel: 1,
               label: {
              show: true,
              fontSize: 14,
              position: "right",
              offset: [-80, -30],
            }, // 柱子上方的数值
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: (params) => {
                  return color[params.dataIndex]
                }
              },
            },
            barWidth: 10,
            data: barData
          },
          {
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            data: barData.map(function (item) {
              return {
                realValue: item,
                value: maxNum,
              };
            }),
            label: {
              show: true,
              position: 'right',
              distance: 70,
              align: "right",
              formatter: function (params) {
                return params.data.realValue + ' 个';
              },
              color: '#fff',
              fontSize: 15,
            },
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0)',
              }
            },
          },
        ],
      }