sgrdbecharts 柱状配置项内容和展示

gfd

      var data=[240, 280, 321, 345, 387, 390, 412, 456];
var sum=0;
var percentdata =[];
for(var i=0; i<data.length;i++){
    sum +=data[i];
};
for(var j=0; j<data.length;j++){
    percentdata.push((((data[j]/sum)*100).toFixed(2)));
};
// console.log(percentdata);
option = {
          color: ['#1c9a4c'],
          grid: {
            left: '8%',
            right: '10%',
            top: '12%',
            bottom: '18%',
            containLabel: true
          },
          yAxis: {
            data: ["用户撞车", "SQL注入检测", "机器人登录",
            "账号盗用", "web高频攻击", "端口扫描", "内网连接…",
            "邮件外发",
            ],
            axisTick: {
              show: false
            },

          },

          xAxis: [{
            axisTick: {
              show: false
            },
            type: 'value',
            // max: 25,
            splitNumber: 5,
            axisLabel: {
              formatter: '{value}%'
            }
          }],
          series: [{
            name: '销量',
            type: 'bar',
            barWidth: '55%',
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: function(param){
                    return data[param.dataIndex];
                },
                textStyle: {
                  color: 'black'
                }
              }
            },
            data: percentdata
          }]
        };