javascript - 如何关闭 echarts 的自动放大功能？

Question

我想显示心电图波。我用echarts。但是可视化存在一个小问题。

我的图表：

但我想看到这样的页面： https ://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0150-ecg.html

我的代码在这里：

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'category',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        min: -1,
        max: 1,
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};

setInterval(function () {

    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(addData());
    }

    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);

option && myChart.setOption(option);

那么我需要在图表上设置什么来从远处显示整个事物而不是放大绘制的部分？

Answer 1

您没有提供错误的部分代码：您应该更正addData.

见固定版本。

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

var start_date = new Date(2021, 0, 1);
var data = [];
var option;

function randomData() {
  var date = start_date.setDate(start_date.getDate() + 1)
  return {
    name: date.toString(),
    value: [date, (Math.random() - 0.5) * 2]
  }
}

option = {
  title: {
    text: '动态数据 + 时间坐标轴'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    type: 'time',
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    min: -1,
    max: 1,
    splitLine: {
      show: false
    }
  },
  series: [{
    name: '模拟数据',
    type: 'line',
    showSymbol: false,
    hoverAnimation: false,
    data: data
  }]
};

setInterval(function() {
  if (data.length > 10) {
    data.shift()
  }
  data.push(randomData());

  myChart.setOption({
    series: [{
      data: data
    }]
  });
}, 1000);

myChart.setOption(option);

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