简体   繁体   English

如何关闭 echarts 的自动放大功能?

[英]How to turn off auto zoom in echarts?

I want to display Ekg waves.我想显示心电图波。 I use echarts.我用echarts。 But there is a small problem with the visualize.但是可视化存在一个小问题。

My chart:我的图表:

在此处输入图像描述

But I want to see like this page: https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0150-ecg.html但我想看到这样的页面: https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0150-ecg.html

My code is here:我的代码在这里:

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);

So what do I need to set on the graph to show the whole thing from a distance instead of zooming in on the drawn part?那么我需要在图表上设置什么来从远处显示整个事物而不是放大绘制的部分?

You not provided part of code where the bug: you should correct something in addData .您没有提供错误的部分代码:您应该更正addData中的某些内容。

See fixed version.见固定版本。

 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM