Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Uncaught TypeError: Cannot read property 'setOption' of undefined
See original GitHub issueUncaught TypeError: Cannot read property ‘setOption’ of undefined
在我的vue项目中使用了echarts，其他使用固定data的都能正常使用，但是当我使用官网提供的demo后，就会出现该提示“Uncaught TypeError: Cannot read property ‘setOption’ of undefined”，说该方法未定义，我使用的是该demo“http://echarts.baidu.com/examples/editor.html?c=line-aqi”
Version & Environment [版本及环境]
- ECharts version [ECharts 版本]:4.0
- Browser version [浏览器类型和版本]:chrome 68.0.3440.106（正式版本） （64 位）
- OS Version [操作系统类型和版本]:windows10 + webstorm 项目基于vuex+vue-cli+webpack完成
Expected behaviour [期望结果]
http://echarts.baidu.com/examples/editor.html?c=line-aqi 同该渲染结果
ECharts option [ECharts配置项]
option = {
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
$.get('/static/json/aqi-beijing.json', function (data) {
console.log(data.map(function (item) {
return item[0]
}))
this.chartColumn.setOption({
title: {
text: 'Beijing AQI'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: data.map(function (item) {
return item[0];
})
},
yAxis: {
splitLine: {
show: false
}
},
toolbox: {
left: 'center',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
visualMap: {
top: 10,
right: 10,
pieces: [{
gt: 0,
lte: 50,
color: '#096'
}, {
gt: 50,
lte: 100,
color: '#ffde33'
}, {
gt: 100,
lte: 150,
color: '#ff9933'
}, {
gt: 150,
lte: 200,
color: '#cc0033'
}, {
gt: 200,
lte: 300,
color: '#660099'
}, {
gt: 300,
color: '#7e0023'
}],
outOfRange: {
color: '#999'
}
},
series: {
name: 'Beijing AQI',
type: 'line',
data: data.map(function (item) {
return item[1];
}),
markLine: {
silent: true,
data: [{
yAxis: 50
}, {
yAxis: 100
}, {
yAxis: 150
}, {
yAxis: 200
}, {
yAxis: 300
}]
}
}
});
});
}
Other comments [其他信息]
<template>
<section class="chart-container">
<el-row>
<el-col :span="12">
<div id="chartColumn" style="width:100%; height:400px;"></div>
</el-col>
<el-col :span="24">
<a href="http://echarts.baidu.com/examples.html" target="_blank" style="float: right;">more>></a>
</el-col>
</el-row>
</section>
</template>
<script>
import * as echarts from 'echarts';
import $ from 'jquery';
export default {
data() {
return {
chartColumn: null
}
},
methods: {
drawColumnChart() {
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
// this.chartColumn.setOption({
$.get('/static/json/aqi-beijing.json', function (data) {
console.log(data.map(function (item) {
return item[0]
}))
this.chartColumn.setOption({
title: {
text: 'Beijing AQI'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: data.map(function (item) {
return item[0];
})
},
yAxis: {
splitLine: {
show: false
}
},
toolbox: {
left: 'center',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
visualMap: {
top: 10,
right: 10,
pieces: [{
gt: 0,
lte: 50,
color: '#096'
}, {
gt: 50,
lte: 100,
color: '#ffde33'
}, {
gt: 100,
lte: 150,
color: '#ff9933'
}, {
gt: 150,
lte: 200,
color: '#cc0033'
}, {
gt: 200,
lte: 300,
color: '#660099'
}, {
gt: 300,
color: '#7e0023'
}],
outOfRange: {
color: '#999'
}
},
series: {
name: 'Beijing AQI',
type: 'line',
data: data.map(function (item) {
return item[1];
}),
markLine: {
silent: true,
data: [{
yAxis: 50
}, {
yAxis: 100
}, {
yAxis: 150
}, {
yAxis: 200
}, {
yAxis: 300
}]
}
}
});
});
// });
},
drawCharts() {
this.drawColumnChart()
},
},
mounted: function () {
this.drawCharts()
},
updated: function () {
this.drawCharts()
}
}
</script>
<style scoped>
.chart-container {
width: 100%;
float: left;
}
/*.chart div {
height: 400px;
float: left;
}*/
.el-col {
padding: 30px 20px;
}
</style>
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Cannot read property 'setOptions' of undefined #8 - GitHub
I'm afraid I cannot follow your snippits. If you are seeing "Cannot read property 'setOptions' of undefined" it means the markedProvider object ......
Read more >Google maps v3 cannot read property 'setOptions' of ...
The problem is in: function clickPanel(polyline, directionsDisplay, index) { google.maps.event.addListener(directionsDisplay ...
Read more >Cannot read property 'setOption' of undefined - Bountysource
Hi. I receive Uncaught TypeError: Cannot read property 'setOption' of undefined , which happens in componentWillReceiveProps at line 50.
Read more >微信小程序中使用echarts报错Cannot read property 'setOption ...
最近在开发小程序时遇到了报Cannot read property 'setOption' of undefined的问题，导致了在模拟器上能正常显示，在iOS上也可以正常显示，但是， ...
Read more >[GitHub] Ovilia commented on issue #8989: Uncaught TypeError ...
Ovilia commented on issue #8989: Uncaught TypeError: Cannot read property 'setOption' of undefined URL: ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
已经解决了，是ajax的作用域出现了问题，在这里我们不能使用$.get(uri,function(data){})的方式使用数据，而应该使用$.get(uri).then(res =>{})的方式来使用数据
@Ovilia 而且这里并不是该问题的实际所在