调试工具与技巧

调试工具与技巧

ECharts作为一款强大的数据可视化库，调试过程中会遇到各种问题。从配置项错误到性能瓶颈，掌握正确的调试方法能极大提升开发效率。

浏览器开发者工具

Chrome DevTools是最基础的调试工具。Elements面板可以检查DOM结构，查看ECharts生成的Canvas或SVG元素。Console面板直接输出ECharts实例：

// 获取ECharts实例
const chartInstance = echarts.getInstanceByDom(document.getElementById('main'));
console.log(chartInstance);

Sources面板调试源码时，建议开启Pause on caught exceptions功能。Network面板监控数据请求，特别在使用dataset时：

option = {
  dataset: {
    source: 'https://data.example.com/api'
  }
};

ECharts自带调试功能

echartsInstance.getOption()方法获取当前配置，对比初始配置快速定位问题：

const initialOption = { /*...*/ };
const chart = echarts.init(dom);
chart.setOption(initialOption);

// 修改后获取实际配置
console.log(chart.getOption());

开启调试模式显示渲染耗时：

chart.setOption({
  tooltip: {
    show: true
  },
  animationThreshold: 0,
  progressiveThreshold: 0
});

数据验证技巧

大数据量场景下，使用dataset配合transform验证数据：

option = {
  dataset: [{
    source: rawData
  }, {
    transform: {
      type: 'filter',
      config: { dimension: 1, gt: 100 }
    }
  }],
  series: {
    type: 'bar',
    datasetIndex: 1
  }
};

性能问题排查

渲染卡顿时，通过echartsInstance.getZr().painter.getType()判断渲染引擎：

const rendererType = chart.getZr().painter.getType();
console.log(`当前使用${rendererType}渲染器`);

大数据量优化示例：

option = {
  series: [{
    type: 'scatter',
    progressive: 400,
    progressiveThreshold: 800
  }]
};

常见错误处理

图形不显示时检查控制台警告，如：

Warning: Invalid data display in series 0

典型的数据格式问题修复：

// 错误格式
const wrongData = [{name: 'A'}, {value: 20}];

// 正确格式
const correctData = [
  {name: 'A', value: 10},
  {name: 'B', value: 20}
];

事件调试方法

监听事件验证交互逻辑：

chart.on('click', (params) => {
  console.log('点击参数:', params);
  // 输出包含seriesIndex/dataIndex等信息
});

chart.on('legendselectchanged', (params) => {
  console.log('图例选择变化:', params.selected);
});

主题调试技巧

自定义主题时实时预览：

// 动态加载主题
fetch('theme.json').then(response => response.json()).then(theme => {
  echarts.registerTheme('custom', theme);
  chart.dispose();
  chart = echarts.init(dom, 'custom');
  chart.setOption(option);
});

跨端调试方案

微信小程序调试需使用vConsole：

// app.js
import VConsole from 'vconsole';
new VConsole();

H5与小程序差异检查：

// 环境判断
const isMP = typeof wx !== 'undefined' && wx.createSelectorQuery;
console.log(`运行环境: ${isMP ? '小程序' : 'H5'}`);

服务端渲染调试

Node端使用node-canvas时捕获错误：

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

try {
  const canvas = createCanvas(800, 600);
  const chart = echarts.init(canvas);
} catch (err) {
  console.error('Canvas初始化失败:', err.stack);
}

版本兼容性检查

不同版本API差异验证：

console.log('当前ECharts版本:', echarts.version);

// v5+专有API检查
if (typeof echarts.use === 'function') {
  echarts.use([require('echarts/extension/bmap')]);
}

可视化调试工具

使用echarts-inspector扩展：

// 安装后调用
__ECHARTS_INSPECTOR__.enable();

输出配置差异：

const diff = (oldOpt, newOpt) => {
  return Object.keys(newOpt).filter(key => 
    JSON.stringify(oldOpt[key]) !== JSON.stringify(newOpt[key])
  );
};
console.log('配置变更项:', diff(prevOption, currentOption));

移动端调试方案

真机调试使用eruda：

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

触控事件捕获：

chart.getZr().on('touchstart', (e) => {
  console.log('触控坐标:', e.touches[0].pageX, e.touches[0].pageY);
});

错误边界处理

组件化框架中的错误捕获：

// React示例
class ErrorBoundary extends React.Component {
  componentDidCatch(error) {
    console.error('ECharts错误:', error);
    this.chart.dispose();
  }
}

内存泄漏检测

长时间运行的仪表盘需检查内存：

// 销毁前记录
window.beforeChartDispose = () => {
  console.log('实例引用数:', 
    Object.keys(echarts.getInstanceByDom(dom)._components).length);
};