ECharts图表大数据量canvas渲染画面卡顿问题

最新推荐文章于 2024-08-22 16:47:43 发布

D·ZerOne

最新推荐文章于 2024-08-22 16:47:43 发布

阅读量440

点赞数 3

文章标签： echarts javascript

本文链接：https://blog.csdn.net/qq_37291367/article/details/137826965

版权

文章讲述了在处理大量数据时，ECharts中的dataZoom功能可能导致图表在拖动时出现卡顿。通过取消系列数据移入高亮和tooltip动画，可以有效解决这个问题。提供了一个示例代码供读者测试。

摘要由CSDN通过智能技术生成

问题

ECharts大数据下，拖动dataZoom图表画面卡顿
在这里插入图片描述

解决

取消每个系列数据移入高亮动画、tooltip动画等。（本人在取消系列数据移入高亮后问题就解决了）
下面代码可以直接在Echarts线上运行测试：

const xData = () => {
  let temp = []
  let data1 = []
  let data2 = []
  let data3 = []
  for(let i = 0; i < 10800; i ++){
    // console.log(i)
    temp.push(i)
    data1.push([i, i + 5000 * Math.random()])
    data2.push([i, 2 * i])
    data3.push([i, 5000 * Math.random()])
  }
  return {
    temp, data1, data2, data3
  }
}
const {temp, data1, data2, data3} = xData()
option = {
  animation: false,
  xAxis: {
    type: 'category',
    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    data: temp,
  },
  yAxis: {
    type: 'value'
  },
  dataZoom: {
    
  },
  tooltip: {
      trigger: 'axis',
      confine: true,
      formatter: function (params) {
      return 'test'
      }
  },
  markLine: {
    data: data1
  },
  series: [
    {
      // data: [820, 932, 901, 934, 1290, 1330, 1320],
      data: data1,
      type: 'line',
      emphasis: {
        disabled: true
      }
      // smooth: true
    },
    {
      // data: [820, 932, 901, 934, 1290, 1330, 1320],
      data: data2,
      type: 'scatter',
      emphasis: {
        disabled: true
      }
      // smooth: true
    },
    {
      // data: [820, 932, 901, 934, 1290, 1330, 1320],
      data: data3,
      type: 'scatter',
      emphasis: {
        disabled: true
      }
      // smooth: true
    },
    // {
    //   // data: [820, 932, 901, 934, 1290, 1330, 1320],
    //   data: data3,
    //   type: 'scatter',
    //   // smooth: true
    // },
  ]
};