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'
                }

            },
        }
       
        
    ]
};