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对象,这才是我想要的数据;

Logo

前往低代码交流专区

更多推荐