Echart 条形图反转 Y 轴

Question

我正在尝试使用Echarts创建一个条形图。我想要反转Y轴。我要显示的数据认为较短的时间得分更高，而较长的时间得分更低。目前，图表的显示方式是较长的时间得分更高。我在尝试反转Y轴时遇到了麻烦。如果有帮助，将不胜感激。

<script type="text/javascript">
  var dom = document.getElementById("chartPace");
  var myChart = echarts.init(dom);
  app.title = 'Test';

option = { 
color: ["#000000"],
responsive: true,
maintainAspectRatio: false,

grid : {
      height: '250',
      width: '450'
  },
  title : {
      text: 'test'
  },
  xAxis : [
      {
          type : 'category',
          data : ['Mon','Tue','Wensday','Tue','Wensday'],
          axisTick: {
              alignWithLabel: true
          }, 
      }
  ],
  yAxis : [
      {
          type : 'time',
          reversed:true,
          axisLabel: {
          formatter: function (value) {
            var value = new Date(value);
            var minutes = value.getMinutes();
            if (value.getSeconds().toString().length < 2){
              var seconds =  "0" + value.getSeconds();
            }
            else{
              var seconds = value.getSeconds();
            }
            return minutes +":" + seconds;
            //return value;
          }
        }
      }
  ],
  tooltip:{
    formatter : function (params) {

      var value = new Date(params['data']);
            var minutes = value.getMinutes();
            if (value.getSeconds().toString().length < 2){
              var seconds =  "0" + value.getSeconds();
            }
            else{
              var seconds = value.getSeconds();
            }
              return minutes +":" + seconds;
    }
  },
  series : [
      {
          name:'Avg Pace',
          type:'bar',
          barWidth: '60%',
          data:[new Date(2014, 9, 1, 0, 2,30),
          new Date(2014, 9, 1, 0, 1,05),
          new Date(2014, 9, 1, 0, 2,30),
          new Date(2014, 9, 1, 0, 3,20),
          new Date(2014, 9, 1, 0, 1,25),
          new Date(2014, 9, 1, 0, 0,00)]
      }
  ]
  };

  if (option && typeof option === "object") {
  myChart.setOption(option, true);
  }
  $(window).on('resize', function(){
      if(chart != null && chart != undefined){
          chart.resize();
      }
  });
  </script>

- Brian Chiem

---

你在yAxis中打错了reversed: true，应该是inverse: true。文档链接：https://ecomfe.github.io/echarts-doc/public/en/option.html#yAxis - undefined

有没有一种方法可以反转x轴，但仍然让图从底部向上开始？ - undefined

我猜你需要使用 xAxis.position: 'top'。 - undefined

Answer 1

您可以在Y轴中使用inverse:true。

- Saud Yousaf