vue项目当中echarts不显示

1.echarts不显示
2. JSON.parse();

折腾了好几个小时；虽然现在看来是十分简单的，但对于自己，还是进步的还需要的很多很多；
1.在vue里面的echarts图表始终不出来，先熟悉哈页面解构

vue的代码：
  <!--为echarts准备一个具备大小的容器dom-->
          <div id="attendanceData" style="width: 500px;height: 289px; box-sizing:border-box; line-height: 289px;">     
          </div>

在页面渲染出来的html解构

<div id="attendanceData"  style="width: 551px;height: 289px;box-sizing: border-box;line-height: 289px;-webkit-tap-highlight-color: transparent;user-select: none;background: transparent;">
<div style="position: relative; overflow: hidden; width: 500px; height: 289px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
<canvas width="500" height="289" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 500px; height: 289px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;">
</canvas>
</div>
</div>
在原来的基础上面 添加了一个div；然后div里面包裹着一个canvas;

要是页面解构是这样的
<div id="attendanceData"  style="width: 500px; height: 289px; box-sizing: border-box; line-height: 289px; -webkit-tap-highlight-color: transparent; user-select: none;">
<div style="position: relative; overflow: hidden; width: 500px; height: 289px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
</div>
</div>
就证明是echarts没有形成；

**报错  vue.esm.js?efeb:578 [Vue warn]: Error in nextTick: "ReferenceError: myChart is not defined"**    

只需要  let  myChart 就可以了；

2.页面要是一直都没有canvas出现；就考虑dom到底有没有实现；就是到底执行到这串代码没有；结果alert（document.getElementById(“attendanceData”)）；始终为null；找不到这个节点；就考虑生命周期；之前一直是在mouted里面去调后台的数据；结果发现在这个阶段时候；该节点还没有形成；所以你去alert()；就一直显示null；
解决方案:在updated去调用数据；就出现；现在虽然解决了，但还是不是最优的；后期在优化吧

updated() {
     // 获取考勤数据
     this.getAttendanceData();
  },

  getAttendanceData() {
       this.$nextTick(()=>{        
     let  myChart = echarts.init(document.getElementById("attendanceData"));
        // 给树状图赋值
        myChart.setOption({
            xAxis: {
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
     yAxis: {
         type: 'value'
       },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
       }]
        }) 
      });
    },

3 我们一般把关于自己的信息，都是storage到本地储存里面；在取出来的时候，我发现该对象.name 显示undefined；
晓得JSON.parse(str);但是没有多大的在意；后来才发现后台传的是一个字符串，而不是json对象

1.parse 用于从一个字符串中解析出json 对象。例如

var str='{"name":"cpf","age":"23"}'

经 JSON.parse(str) 得到：

Object: age:"23"

            name:"cpf"

            _proto_:Object

ps:单引号写在{}外，每个属性都必须双引号，否则会抛出异常

2.stringify用于从一个对象解析出字符串，例如

var a={a:1,b:2}

经 JSON.stringify(a)得到：

“{“a”:1,"b":2}”

这是后台的数据
这是后台传输的数据
json数据
这是转化后为json对象，这才是我想要的数据；

vue项目当中echarts不显示

猜你喜欢