ECharts xAxis.type='time'时间轴时卡顿问题

happyhuangjinjin 发布于2019-08-22 17:05 / 617人阅读

摘要：原文首发于我的个人网站卡顿问题出现背景中主要耗能设置为折线图轴数据量控件最开始轴为类目轴，最近根据情况想改为时间轴卡顿主要表现在显示和拖动时。初步分析是为导致，因为切换回后就卡顿问题消失。

原文首发于我的个人网站： https://lonhon.top/

卡顿问题出现背景：

ECharts^4.0.4 + Vue^2.5.9

option中主要耗能设置为：折线图 + Y轴2 + series3 + 数据量1300*3 + dataZoom控件

最开始X轴type为类目轴category，最近根据情况想改为时间轴time

卡顿主要表现在tooltip显示和拖动dataZoom时。

上周在使用的时候发现号称支持千万数据流畅显示的EC居然在1300*3的数据下变得很卡，一点不科学。
初步分析是xAxis.type为time导致，因为切换回category后就卡顿问题消失。

提了issue暂时无果，后来分析了一波找到以下 解决办法 ：

series中设置 showSymbol: false, hoverAnimation: false

option中设置 animation: false, animationDurationUpdate: 0

得出结论是xAxis.type:"time" 结合 series.showSymbol:true 导致图表卡顿。

测试地址： http://echarts.baidu.com/exam...

测试代码(自行更改数据量和最后两行注释)：

function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
            Math.round(value)
        ]
    }
}

var data = [], data1 = [], timeline = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 4000; i++) {
    data.push(randomData());
}

option = {
    title: {
        text: "动态数据 + 时间坐标轴"
    },
    tooltip: {
        trigger: "axis"
    },
    xAxis: {
        type: "time"
    },
    yAxis: [{
        type: "value",
        boundaryGap: [0, "100%"]
    },{
        type: "value",
        boundaryGap: [0, "100%"]
    }],
    series: [{
        name: "模拟数据",
        type: "line",
        data: data,
        // showSymbol: false,
        // hoverAnimation: false
    }],
};

GPU云服务器云服务器轴时卡顿 attr&039&039checked&039&039 given&039&039 php游戏代码&039&039

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94838.html

ECharts xAxis.type=&#039;time&#039;时间轴时卡顿问题

摘要：原文首发于我的个人网站卡顿问题出现背景中主要耗能设置为折线图轴数据量控件最开始轴为类目轴，最近根据情况想改为时间轴卡顿主要表现在显示和拖动时。初步分析是为导致，因为切换回后就卡顿问题消失。原文首发于我的个人网站： https://lonhon.top/ 卡顿问题出现背景： ECharts^4.0.4 + Vue^2.5.9 option中主要耗能设置为：折线图 + Y轴2 + se...

Fundebug 2019-08-02 10:23 评论0 收藏0
echarts图表显示隐藏 Can&#039;t get dom width or height

摘要：项目有一个需求，定时显示隐藏图标，刚开始是图表显示正常。原因可能是读取不到隐藏的高宽。在可视区域变化时重新调整，这时候如果处于隐藏状态，那么在时就读取不到节点的宽高，图表就无法显示。项目有一个需求，定时显示隐藏echarts图标，刚开始dom是display:block;图表显示正常。等到dom隐藏再显示的时候图表还是正常，很好没有bug。可是当我在dom处于display:none...

I_Am 2019-08-26 13:48 评论0 收藏0
关于Echarts的填坑之旅

摘要：正如标题所说，这是的一遍填坑，如果你是一些的配置的话可以阅读的官网配置信息。我想官网中关于的动态数据案例说的也够详细，但是它们的并不是我想要的格式，这时候怎么办，我们可以通过和和达到设置坐标的效果，通过来设置间距。正如标题所说，这是Echarts的一遍填坑，如果你是一些echart的配置的话可以阅读http://echarts.baidu.com/opti...的官网配置信息。今天我...

GT 2019-08-20 16:07 评论0 收藏0