请教echarts X轴 动态数据间距BUG

fhffkjldf 发布于 昨天 16:14
阅读 109
收藏 0

当前制作了一个html静态页面,所有数据为随机数,刷新间隔1秒。

当最前端不是浏览器chrome时,切回浏览器就会发现:

????? ? 浏览器不在最前端时的X轴数据点间距过长,切换回来后又开始正常的。。。无法理解。

望高手解惑。。。附简单代码和截图。

?

?

?

?





?

$(document).ready(function (){
// 基于准备好的dom,初始化echarts实例
var myChart_nh3h2o_consistence = echarts.init(document.getElementById('nh3h2o_consistence'));

// 氨水
var option_nh3h2o_consistence = {
    backgroundColor: '#F3F3F3',
    title: {
        text: '氨水浓度',
        subtext: ''
    },
    grid: {
        left: '1%',
        right: '2%',
        bottom: '1%',
        containLabel: true
    },
    legend: {              //图例组件
        data:['蒸汽压力']     //图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 name
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    xAxis: {             //直角坐标系 grid 中的 x 轴
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }},
    series: [{                //系列列表
        name: '压力',         //系列名称,用于tooltip的显示,legend 的图例筛选
        type: 'line',          //类型
        smooth:true,
        showSymbol: false,
        hoverAnimation: false
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart_nh3h2o_consistence.setOption(option_nh3h2o_consistence);
window.onresize = function () {
    myChart_nh3h2o_consistence.resize();
}
var now = new Date();

//-----------------------------------
//0.6 - 0.8  为 6 8 0.1
function randomData(date,min,max,multiple) {
    const random_data = Math.random();
    return {
        name: date.toString(),
        value: [
            date.getTime(),
            ((random_data*(max-min) + min)*multiple).toFixed(2)
        ]
    }
}
var data_nh3h2o_consistence = [];
window.setInterval(function(){
    var now = new Date();
    //--------------氨水浓度---------------
    if(data_nh3h2o_consistence.length > 288){
        data_nh3h2o_consistence.shift();
    }
    data_nh3h2o_consistence.push(randomData(now,10,12,1));
    myChart_nh3h2o_consistence.setOption({
        series: [{
            data: data_nh3h2o_consistence
        }]
    });
}
},1000);
}

?

加载中
0
fhffkjldf
fhffkjldf

将代码整理一下在 echarts gallery 上运行 , 运行后也有同样的问题?

?

代码如下?

?//-----------------------------------
?function randomData(date) {
? ? ?const random_data = Math.random();
? ? ?return {
? ? ? ? ?name: date.toString(),
? ? ? ? ?value: [
? ? ? ? ? ? ?date.getTime(),
? ? ? ? ? ? ?(random_data * 2 + 10)
? ? ? ? ?]
? ? ?}
?}

?//--------------数据缓存数据---------------
?var now = new Date();
?var data_nh3h2o_consistence = [];


?var option_nh3h2o_consistence = {
? ? ?title: {
? ? ? ? ?text: '氨水浓度'
? ? ?},
? ? ?tooltip: {},
? ? legend: {
? ? ? ? data:['销量']
? ? },
? ? ?xAxis: { //直角坐标系 grid 中的 x 轴
? ? ? ? ?type: 'time',
? ? ? ? ?splitLine: {
? ? ? ? ? ? ?show: false
? ? ? ? ?}
? ? ?},
? ? ? yAxis: {},
? ? ?series: [{ //系列列表
? ? ? ? ?name: '压力', //系列名称,用于tooltip的显示,legend 的图例筛选
? ? ? ? ?type: 'line', //类型
? ? ? ? ?smooth: true
? ? ?}]
?};


?myChart.setOption(option_nh3h2o_consistence);

?setInterval(
? ? ?function() {

? ? ? ? ?now = new Date();

? ? ? ? ?//--------------氨水浓度---------------
? ? ? ? ?if(data_nh3h2o_consistence.length > 50){
? ? ? ? ??data_nh3h2o_consistence.shift();
? ? ? ? ?}
? ? ? ? ?data_nh3h2o_consistence.push(randomData(now));
? ? ? ? ?myChart.setOption({
? ? ? ? ? ? ?series: [{
? ? ? ? ? ? ? ? ?data: data_nh3h2o_consistence
? ? ? ? ? ? ?}]
? ? ? ? ?});
? ? ?}, 1000);

返回顶部
顶部