美文网首页
在vue中引用了Echarts 导致Cannot read pr

在vue中引用了Echarts 导致Cannot read pr

作者: __笑我一世沉沦丶 | 来源:发表于2019-09-30 09:10 被阅读0次

    报错信息:


    image.png

    报错原因:
    由于把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}})
          })
        })
    

    相关文章

      网友评论

          本文标题:在vue中引用了Echarts 导致Cannot read pr

          本文链接:https://www.haomeiwen.com/subject/lehrectx.html