javascript - Echart条形图反转Y轴

标签 javascript graph reverse axis-labels echarts

我正在尝试使用 Echarts 创建条形图。我正在尝试反转 YAxis。我试图显示的数据将较短的时间视为较高的分数,将较高的时间视为较低的分数。目前,图形显示时间越长得分越高。我在尝试反转 YAxis 时遇到问题。任何帮助都会很棒。

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

最佳答案

您可以在 Y 轴上使用 inverse:true

关于javascript - Echart条形图反转Y轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50239007/

相关文章:

javascript - 你能用 JavaScript/jQuery 获取用户每次滚动时的滚动位置吗?

javascript - 如何使用@angular/animations 为 ScrollTop 设置动画?

javascript - 如何提高下面幻灯片动画的速度?

javascript - createElement 方法可以应用于除文档之外的任何节点吗?

javascript - 将邻接列表转换为无向图链接的高性能方法

haskell - 为快速检查生成无偏图的任意实例

使用智能字符串进行恒定时间字符串反转?

c - ARM 逆向工程 ROM 转储

java - 如何更改 Java Swing 中元素的颜色?

c - strrev 函数在函数内部不起作用,但在外部起作用