echarts出现警告[echarts Can't get dom width or height]解决方法就是初始化后再填数据,放nextTick中

先上修改好的代码

    drawPieAll() {
      // myChart paint more times, it will warn
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose();
      }
      this.$nextTick(() => {
        console.log("refs", this.$refs.pieAll);
        // this.$refs.pieAll.style.width = "500px";
        // this.$refs.pieAll.style.height = "450px";
        this.myChart = echarts.init(document.getElementById("pieAll"));

        var option = {
          tooltip: {
            //提示框组件。
            trigger: "item",
            //'item' 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
          },
          series: [
            {
              name: "打卡统计",
              label: {
                formatter: "{b}: ({d}%)",
              },
              type: "pie", // 设置图表类型为饼图
              radius: "55%", // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
              data: [
                // 数据数组,name 为数据项名称,value 为数据项值
                { value: this.getAmount("statement", "正常"), name: "正常" },
                { value: this.getAmount("statement", "缺卡"), name: "缺卡" },
                { value: this.getAmount("statement", "早退"), name: "早退" },
                { value: this.getAmount("statement", "迟到"), name: "迟到" },
                {
                  value: this.getAmount("statement", "补打卡"),
                  name: "补打卡",
                },
                {
                  value: this.getAmount("statement", "常用设备异常"),
                  name: "常用设备异常",
                },
              ],
            },
          ],
        };
        // if (option && typeof option === "object") {
          this.myChart.setOption(option);
        // }
        // console.log(
        //   "offset",
        //   this.myChart.offsetWidth,
        //   "-",
        //   this.myChart.offsetHeight
        // );
      });
    },

  之前还有个不能重复渲染的问题,判断下是否为空,不为空就dispose清空再做,最前面的1个if判断就是做这个的。

还拓展了下关于ref的知识

ref可以获得DOM元素,绑定就能拿到这个元素信息

想修改可以this.$refs.[elementName].style.width = '100px'

不过不知道为什么查不到这玩意的offsetWidth

posted @ 2021-08-03 13:43  乐盘游  阅读(784)  评论(0编辑  收藏  举报