• 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

    人生到处知何似,应似飞鸿踏雪泥。
  • 相关阅读:
    vue2.0 移动端,下拉刷新,上拉加载更多 封装组件
    Mac 安装RN android开发环境
    JavaScript 复杂判断的更优雅写法
    JSBridge的原理及使用
    FlatList列表组件的使用
    React Native ScrollView中TextInput焦点问题
    pod update报错(Cocoapods: Failed to connect to GitHub to update the CocoaPods/Specs specs repo)报错解决方案
    如何在pc端通过adb连接手机调试,不用usb数据线
    react学习之搭建后台管理系统
    node+koa2+axios踩坑记
  • 原文地址:https://www.cnblogs.com/lepanyou/p/15093994.html
Copyright © 2020-2023  润新知