echarts柱状图上下颠倒

 

 

 

放上options配置

//财务格式
function formatNum(strNum) {
    if (strNum.length <= 3) {
        return strNum;
    }
    if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
        return strNum;
    }
    var a = RegExp.$1,
        b = RegExp.$2,
        c = RegExp.$3;
    var re = new RegExp();
    re.compile("(\\d)(\\d{3})(,|$)");
    while (re.test(b)) {
        b = b.replace(re, "$1,$2$3");
    }
    return a + "" + b + "" + c;
}
//数据
var legendData = [];
var xAxisData = ["烟丝颜色", "嗅香品质", "嗅香浓淡程度", "抽吸感受的总体满意程度", 
"烟灰质量", "烟嘴颜色牢固性", "口腔和喉部的刺激程度", "香气品质", "口腔充足程度",
"1烟气顺化程度", "抽吸顺畅程度", "余味舒适程度","甜度","烟支抽吸中的挺度",
"烟支软硬程度","烟支滤嘴长短","烟支滤嘴设计(科技感)","就一个很长的公司名字",
"钢印颜色醒目程度","总体满意程度"];
var yAxisData = xAxisData;
var seriesName1 = "特征消费者的敏感指标分布";
var seriesData1 = ["8","10","10","6","10","10","10","10","10","10",
"10","10","10","10","60","20","5","2","10","10","1"];

var option = {
    tooltip: { //提示框组件
        trigger: \'axis\',
        formatter:function(params){  
          var relVal = params[0].name;  
          for (var i = 0, l = params.length; i < l; i++) { 
                  relVal +=  \' : \' + formatNum(params[i].value)+"单"; 
          }  
          return relVal;
        },
        axisPointer: {
            type: \'shadow\',
            label: {
                backgroundColor: \'#6a7985\'
            }
        },
        textStyle: {
            color: \'#fff\',
            fontStyle: \'normal\',
            fontFamily: \'微软雅黑\',
            fontSize: 12,
        }
    },
    grid: {
        left: \'1%\',
        right: \'4%\',
        bottom: \'6%\',
        top:80,
        padding:\'0 0 10 0\',
        containLabel: true,
    },
    xAxis: [
        {   
            type: \'category\',
            boundaryGap: true,//坐标轴两边留白
            data: xAxisData,
            position:\'top\',
            axisLabel: { //坐标轴刻度标签的相关设置。
                interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                margin:15,
                textStyle: {
                //     color: \'#4c647c\',
                    fontStyle: \'normal\',
                    fontFamily: \'微软雅黑\',
                    fontSize: 12,
                },
                rotate:50,
            },
            axisTick:{//坐标轴刻度相关设置。
                show: false,
            },
            axisLine:{//坐标轴轴线相关设置
                lineStyle:{
                //     color:\'#4c647c\',
                    opacity:0.2
                }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
                show: false,
            }
        }
    ],
    yAxis: [
        {   
            show:false,
            inverse: true,
            type: \'value\',
            splitNumber: 5,
            axisLabel: {
                textStyle: {
                    color: \'#4c647c\',
                    fontStyle: \'normal\',
                    fontFamily: \'微软雅黑\',
                    fontSize: 12,
                }
            },
            axisLine:{
                show: false
            },
            axisTick:{
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: [\'#000\'],
                    opacity:0.06
                }
            }
        }
    ],
    series : [
        {
            name:seriesName1,
            type:\'bar\',
            data:seriesData1,
            barWidth: 10,
            barGap:0,//柱间距离
            label: {//图形上的文本标签
                normal: {
                  show: true,
                  position: \'bottom\',
                  formatter: function(p) {
                        return formatNum(p.value) + "单";
                    },
                  textStyle: {
                      color: \'#FBAD79\',
                      fontStyle: \'normal\',
                      fontFamily: \'微软雅黑\',
                      fontSize: 12,   
                  },
                },
            },
            itemStyle: {//图形样式
                normal: {
                    barBorderRadius: 20,
                    color:\'#FBAD79\'
                }

            },
        }
       
        
    ]
};

View Code