性能优化配置

性能优化配置

ECharts作为一款强大的数据可视化库，在处理大规模数据或复杂图表时可能会遇到性能瓶颈。合理的配置能显著提升渲染效率和交互体验。

数据层面优化

数据采样是大数据场景下的核心优化手段。当数据点超过万级时，建议启用dataSampling：

series: [{
  type: 'line',
  data: largeDataSet,
  sampling: 'lttb',  // 采用最大三角形三桶算法
  progressive: 1e6,   // 渐进式渲染阈值
  progressiveThreshold: 500
}]

分块加载适用于超大数据集（>10MB）：

function fetchData(page) {
  return fetch(`/api/data?page=${page}&size=10000`).then(res => res.json());
}

let currentPage = 0;
chart.showLoading();
fetchData(currentPage++).then(initData => {
  chart.hideLoading();
  const option = {
    dataset: { source: initData },
    series: [{ type: 'scatter' }]
  };
  chart.setOption(option);
  
  // 滚动加载后续数据
  window.addEventListener('scroll', async () => {
    if (shouldLoadMore()) {
      const moreData = await fetchData(currentPage++);
      chart.appendData({
        seriesIndex: 0,
        data: moreData
      });
    }
  });
});

渲染配置优化

动画策略需要根据数据量动态调整：

animationDuration: dataLength > 1000 ? 0 : 1000,
animationEasing: 'elasticOut',
animationThreshold: 1500  // 超过1500个数据点关闭动画

混合渲染结合Canvas和SVG优势：

const option = {
  renderer: 'canvas',  // 大数据用canvas
  useDirtyRect: true,  // 启用脏矩形渲染
  series: [{
    type: 'pie',
    renderAsImage: true  // 静态图表预渲染为图片
  }]
};

视觉元素精简

视觉映射替代传统图例：

visualMap: {
  type: 'continuous',
  dimension: 2,
  seriesIndex: 0,
  min: 0,
  max: 100,
  inRange: {
    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8']
  },
  calculable: true
}

标签显示策略优化：

label: {
  show: true,
  position: 'top',
  formatter: params => {
    return params.dataIndex % 5 === 0 ? params.value : '';
  },
  fontSize: dataLength > 500 ? 0 : 12
}

交互性能提升

防抖处理高频事件：

let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    chart.resize();
  }, 200);
});

区域选择优化：

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow',
    shadowStyle: {
      color: 'rgba(150,150,150,0.1)'
    }
  },
  confine: true  // 限制在图表区域内
}

内存管理技巧

及时清理无用实例：

// 组件卸载时
beforeUnmount() {
  this.chart.dispose();
  this.chart = null;
  window.removeEventListener('resize', this.handleResize);
}

共享数据集减少内存占用：

const commonSource = [...];
const option = {
  dataset: [{
    id: 'sharedData',
    source: commonSource
  }],
  series: [{
    type: 'line',
    datasetId: 'sharedData'
  },{
    type: 'bar',
    datasetId: 'sharedData'
  }]
};

高级优化技术

WebWorker处理计算密集型任务：

// worker.js
self.onmessage = function(e) {
  const result = heavyCompute(e.data);
  postMessage(result);
};

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(largeData);
worker.onmessage = function(e) {
  chart.setOption({ dataset: { source: e.data } });
};

GPU加速配置：

const option = {
  series: [{
    type: 'heatmap',
    progressive: true,
    itemStyle: {
      opacity: 0.8
    },
    emphasis: {
      itemStyle: {
        opacity: 1
      }
    }
  }],
  graphic: {
    elements: [{
      type: 'image',
      style: {
        image: '/texture.png',
        width: 400,
        height: 400
      },
      blend: 'lighter'  // 启用混合模式
    }]
  }
};

移动端专项优化

手势交互适配：

chart.on('touchstart', {
  throttle: 300,
  throttleType: 'fixRate'
}, e => {
  // 处理触摸事件
});

响应式降级策略：

function getOptimizedOption() {
  const isMobile = window.innerWidth < 768;
  return {
    animation: !isMobile,
    tooltip: {
      show: isMobile ? false : true,
      trigger: isMobile ? 'none' : 'axis'
    },
    series: [{
      type: 'line',
      symbolSize: isMobile ? 2 : 4
    }]
  };
}

服务端渲染方案

预生成静态内容：

const echarts = require('echarts');
const { createCanvas } = require('canvas');

const canvas = createCanvas(800, 600);
const chart = echarts.init(canvas);
chart.setOption(/* ... */);

// 输出为Base64
const imgData = canvas.toDataURL('image/png');
res.send(`<img src="${imgData}">`);

增量渲染协议：

// 服务端
app.get('/chart-update', (req, res) => {
  const lastVersion = req.query.v;
  const deltaData = getDeltaData(lastVersion);
  res.json({
    version: currentVersion,
    data: deltaData
  });
});

// 客户端
function pollUpdates() {
  fetch(`/chart-update?v=${currentVersion}`)
    .then(res => res.json())
    .then(updateChart);
}