- 在vue中引用了Echarts 导致Cannot read pr
- 在Vue脚手架中使用echarts,并解决“TypeError:
- vue-echarts出现Uncaught TypeError:
- vue打包后报错TypeError: Cannot read p
- vue中爆错Error in render: "TypeErro
- Vue报错:"TypeError: Cannot read pr
- Vue报错:"TypeError: Cannot read pr
- vue echarts图表 Cannot read proper
- Cannot read property '_withTask'
- [Vue warn]: Error in render: "Ty
报错信息:

报错原因:
由于把echarts放到页面的一个弹出框组件中,故在页面初始化的过程中,我的charts这时候不在页面节点中,使用beforeUpdate钩子可以发现,在关闭弹出框之后,再打开就可以出现表格,所以只需简单的添加this.$nextTick(function(){})函数,将表格初始化放到这个函数中就能解决问题
beforeUpdate () {
this.$nextTick(function () {
var myChart = echart.init(this.$refs.chart3)
myChart.setOption({
xAxis: {},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
yAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月']
},
legend: {
data: ['过期未处理店铺数量', '超期未新建任务数量']
},
series: [{
name: '过期未处理店铺数量',
type: 'bar',
itemStyle: {
normal: {color: '#efac53'}
},
stack: '总量',
label: {
normal: {show: true, position: 'insideRight'}
},
barWidth: 20,
data: [15, 0, 47, 35]
}, {
name: '超期未新建任务数量',
type: 'bar',
barWidth: 20,
z: 10,
stack: '总量',
itemStyle: {
normal: {
color: '#55c3dc'
}
},
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: [{value: 45, name: '', url: 'navPage1', id: 0},
{value: 60, name: '', url: 'navPage1', id: 1},
{value: 13, name: '', url: 'navPage1', id: 2},
{value: 25, name: '', url: 'navPage1', id: 3}]
}]
})
var that = this
myChart.on('click', function (e) {
that.$router.push({path: e.data.url, query: {id: e.data.id}})
})
})
网友评论