Echarts DataZoom 让高度变大

Question

有谁知道如何设置数据缩放滑块的高度？

此页面 https://github.com/apache/echarts/issues/12582 表明这是可能的.. 有一个高度选项似乎只起作用了一半，但如果你增加它，滑块高度会增加到图表区域之外，所以只有一部分是可见的。 IE。也需要能够向上移动滑块。

感谢您的帮助。

Answer 1

使用 dataZoom 选项，例如：

      dataZoom: [{
        type: 'slider',
        height: 70,
        bottom: 20
      }],

（并且不要忘记缩小图表区域）

    const chart = echarts.init(document.getElementById('main'));

    let base = +new Date(1968, 9, 3);
    let oneDay = 24 * 3600 * 1000;
    let date = [];
    let data = [Math.random() * 300];
    for (let i = 1; i < 20000; i++) {
      var now = new Date((base += oneDay));
      date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
      data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    }

    option = {
      title: {
        left: 'center',
        text: 'Data Zoom Lab'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
      },
      height: 200,
      dataZoom: [{
        type: 'slider',
        height: 70,
        start: 30,
        end: 40,
        bottom: 20
      }],
      series: [
        {
          name: 'Fake Data',
          type: 'line',
          symbol: 'none',
          sampling: 'lttb',
          itemStyle: {
            color: 'rgb(255, 70, 131)'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 158, 68)'
              },
              {
                offset: 1,
                color: 'rgb(255, 70, 131)'
              }
            ])
          },
          data: data
        }
      ]
    };

    chart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Echarts DataZoom 让高度变大

Echarts DataZoom make height bigger

echarts