微信小程序开发使用echarts报错Cannot read property ‘getAttribute‘ of undefined

**微信小程序开发使用ECharts报错Cannot read property 'getAttribute' of undefined**

在微信小程序开发中，使用ECharts来绘制图表是非常常见的需求。然而，在实际开发过程中，我们可能会遇到一些奇怪的错误，如"Cannot read property 'getAttribute' of undefined"。这种错误通常出现在我们尝试使用ECharts API时。

**问题背景**

在我们的项目中，我们需要绘制一个折线图来展示数据趋势。在实现这个功能时，我们选择了使用ECharts来进行图表的绘制。但是，在实际测试过程中，我们发现程序会报出"Cannot read property 'getAttribute' of undefined"这样的错误。

**问题原因**

经过分析，我们发现这种错误通常是由于我们在使用ECharts API时，传递的参数不正确或者传递的数据类型不符合API要求所导致的。具体来说，在我们的项目中，我们尝试使用`echarts.init()`方法来初始化一个图表实例，但是却传递了一个undefined值作为参数。

**解决方案**

为了解决这个问题，我们需要仔细检查我们在使用ECharts API时传递的参数是否正确。具体来说，我们需要确保传递给`echarts.init()`方法的参数是一个有效的DOM元素。

javascript// 错误示例let chart = echarts.init(undefined); //传递undefined值// 正确示例let chartDom = document.getElementById('chart');
let chart = echarts.init(chartDom);

在上面的代码中，我们通过使用`document.getElementById()`方法来获取一个有效的DOM元素作为参数传递给`echarts.init()`方法。这样就可以避免"Cannot read property 'getAttribute' of undefined"这样的错误。

**完整示例**

下面是我们项目中的完整示例：

javascript// index.wxml
 


// index.jsPage({
 onReady: function() {
 let chartDom = document.getElementById('chart');
 let chart = echarts.init(chartDom);
 // 绘制图表 this.drawChart(chart);
 },
 drawChart: function(chart) {
 // 绘制折线图 chart.setOption({
 xAxis: {
 type: 'category',
 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 yAxis: {
 type: 'value'
 },
 series: [{
 name: 'Count',
 type: 'line',
 data: [120,200,150,80,70,110,130]
 }]
 });
 }
});

在上面的示例中，我们通过使用`document.getElementById()`方法来获取一个有效的DOM元素作为参数传递给`echarts.init()`方法。这样就可以避免"Cannot read property 'getAttribute' of undefined"这样的错误。

**结论**

综上所述，微信小程序开发使用ECharts报错"Cannot read property 'getAttribute' of undefined"通常是由于我们在使用ECharts API时传递的参数不正确或者传递的数据类型不符合API要求所导致的。通过仔细检查我们在使用ECharts API时传递的参数是否正确，可以避免这种错误。