ECharts 条形图当数据出现负值的时候 坐标轴不从0开始而是从最小值开始怎么操作?

图片描述

如上图所示其中"变流器温度的数据"出现负值;
现在我想让Y坐标从-79开始,意思就是让所有的条形图都在Y坐标轴的右边显示,不要出现左右都有的情况;
这种有实现方式吗?求大佬解惑
下图是要实现的效果图片描述

所有数据都在坐标轴右边显示

阅读 20.3k
2 个回答

这个已经是好几年前的提问了,没想到最近又被挖出来了,看了下访问量还挺多(6.6K)😂,遇到这个问题的还挺多,我记得当时我用了前面的人回答的方法是OK的,但你们都说无效🤔。所以我查了下资料🧐找到了原因,发现其实是Echarts自身的问题:
大于等于4.2.0-rc.1版本的Echarts加了这个配置项之后是这样

4.0.0版本及以下的是OK的

附一下代码,修改注释即可看到区别

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="chart" style="height:500px;width: 800px;"></div>
  <!--修改注释即可看到区别-->
  <!-- <script crossorigin="anonymous" integrity="sha384-D4R8qYT6nA7nYz3VrleqV7/7JJS+n62yPyQ89i7qHnzFOEKJ6Fa6400CTuMrnWvQ"
    src="https://lib.baomitu.com/echarts/4.2.0-rc.1/echarts.min.js"></script> -->
  <script crossorigin="anonymous" integrity="sha384-mYHbpb8SNpRR9uL7PfZoWk1rI3/VXsAkIC5Sy7+Aa7a79JKqZ19qg4OcgvgsCx36"
    src="https://lib.baomitu.com/echarts/4.0.0/echarts.min.js"></script>
  <script>
    const chart = echarts.init(document.querySelector('#chart'))
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine: {
          onZero: false
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [-120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }]
    }
    chart.setOption(option);
  </script>
</body>

</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题