【问题标题】:Echart Bar Graph Reverse YaxisEchart条形图反向Y轴
【发布时间】:2018-10-18 17:22:24
【问题描述】:

我正在尝试使用 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>

【问题讨论】:

标签: javascript graph reverse axis-labels echarts


【解决方案1】:

Y 轴可以使用inverse:true

【讨论】:

  • 救了我的好朋友。谢谢
猜你喜欢
  • 1970-01-01
  • 2018-02-08
  • 1970-01-01
  • 1970-01-01
  • 2019-02-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多