如何解决如何关闭echarts中的自动缩放?
我想显示心电图波形。我用的是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,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);
那么我需要在图表上设置什么才能从远处显示整个事物而不是放大绘制的部分?
解决方法
您没有提供错误所在的部分代码:您应该更正 addData
中的某些内容。
查看固定版本。
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var start_date = new Date(2021,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,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。