zoukankan      html  css  js  c++  java
  • 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

    人生到处知何似,应似飞鸿踏雪泥。
  • 相关阅读:
    面试经验
    二叉树和递归
    优先队列
    队列问题
    书法学习资料
    栈的问题
    Git常用命令
    字母大小写转换
    深入类中的方法[8] - 抽象方法与抽象类
    深入类中的方法[7] - 关于 inherited
  • 原文地址:https://www.cnblogs.com/lepanyou/p/15093994.html
Copyright © 2011-2022 走看看