echarts趋势图y轴怎么通过鼠标滚动放大?

2023-06-27 288 0

如图y轴的间隔是200,怎么能通过鼠标滚轮把它滚动到间隔100,相反方向滚动时再滚回至200,翻了好久api也没翻到
image.png

dataZoom - Apache ECharts 里面的 dataZoom-inside 就可以使用鼠标滚轮缩放坐标系。

EDIT

OP 你说没有生效是没有配置对吧? 👉 复现Demo - Apache ECharts

通过yAxisIndex可以设置y轴的滚动

image.png

demo

option = {
  color: ["#3398DB"],
  title: {
    text: "Beijing AQI"
  },
  tooltip: {
    trigger: "axis"
  },
  xAxis: {
    data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-08-27", "2014-08-28"]
  },
  yAxis: {
    splitLine: {
      show: false
    }
  },
  dataZoom: {
    start: 80,
    type: "inside",
    yAxisIndex: 0
  },
  series: {
    name: "Beijing AQI",
    type: "line",
    data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188]
  }
}

缩放前
image.png
缩放后
image.png

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?