解决vue页面渲染但dom没渲染的操作


Posted in Javascript onJuly 27, 2020

我就废话不多说了,大家还是直接看代码吧~

this.$nextTick(() => {
            $("select[name='ddlCostCenter']").select2({
              language: "zh-CN"
            });
          });

补充知识:vue+Echarts动态数据已经赋值,但是无法渲染页面的问题

最近用vue+Echarts想做一个饼状统计图,但是数据明明已经绑定完毕,但是页面渲染一直没有效果,最终才发现问题所在,自己还是个新手,主要对vue还不是很熟悉。废话不说,接下来看我的代码:

正常的给个div的大小

<div>
  <div id="echartss" :style="{width: '100%', height: '600px'}"></div>
 </div>

接下来是option部分:

echarts1_option:{
      backgroundColor: '#45515a', //背景颜色
      //标题
      title: {
       text: '订单中保险公司所占的比例',
       subtext: '饼图示例',
       left: 'center',
       top: 20,
       textStyle: {
        color: '#ccc',
        fontStyle: 'italic'//标题字体
       }
      },
      //弹窗,响应鼠标指向,显示具体细节
      tooltip : {
       trigger: 'item',//以具体项目触发弹窗
       formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      //图例,选择要显示的项目
      legend:{
       orient:'vertical',
       left:'left',
       textStyle:{
        color:'#c8c8d0'
       },
       data:['安心','安盛天平','中华联合保险','中国太平洋保险','中国人保财险','平安车险'] //注意要和数据的name相对应
      },
      //工具箱
      toolbox:{
       show:true,//显示工具箱
       feature:{
        dataView:{show:true}, //以文字形式显示数据
        restore:{show:true},  //还原
        //dataZoom:{show:true}, //区域缩放
        saveAsImage:{show:true}, //保存图片
        //magicType:{type:['line','bar']}//动态数据切换,数据显示可以在该规定内容中切换显示方式,
       }
      },
      /*//视觉映射组件,将数据映射到视觉元素上
      visualMap: {
       show: false,
       min: 1,
       max: 2,
       dimension: 0, //选取数据的维度,如人数据:[身高,体重],则1代表将体重进行映射,默认值为数组的最后一位
       // seriesIndex: 4, //选取数据集合中的哪个数组,如{一班},{二班},默认选取data中的所有数据集
       inRange: {
        //选定了要映射的对象,用inRange详细写要渲染的具体细节,[x,y]中x指最小值对应的量(亮度,饱和度等),y指最大值对应的量,其余的按各自value线性渲染
        color:['red'],
        colorLightness: [0,1],
        colorSaturation:[0,1]
       }
      },*/
      //数据
      series : [
       {
        name: '成交数量',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data:[

        ].sort(function (a, b) {
         return a.value - b.value;
        }),

        roseType: 'radius',//角度和半径展现百分比,'area'只用半径展现
        label: { //饼图图形的文本标签
         normal: { //下同,normal指在普通情况下样式,而非高亮时样式
          textStyle: {
           color: 'rgba(255, 255, 255, 0.3)'
          }
         }
        },
        labelLine: { //引导线样式
         normal: {
          lineStyle: {
           color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.5, //0-1,越大越平滑弯曲
          length: 10, //从块到文字的第一段长
          length2: 20 //拐弯到文字的段长
         }
        },

        itemStyle: { //图例样式
         normal: {
           //color: '#97413c',
          shadowBlur: 50,//阴影模糊程度
          shadowColor: 'rgba(0, 0, 0, 0.5)',//阴影颜色,一般黑

         }
        },
        animationType: 'scale', //初始动画效果,scale是缩放,expansion是展开
        animationEasing: 'elasticOut', //初始动画缓动效果
        animationDelay: function (idx) { //数据更新动画时长,idx限定了每个数据块从无到有的速度
         return Math.random() * 200;
        }


       }
      ],
      color: ['#97858c','pink','green','yellow','orange','#97813c'],
     },

接下来看init代码

init(){
     // 基于准备好的dom,初始化echarts实例
     let myChart = echarts.init(document.getElementById('echartss'))
     // 绘制图表,this.echarts1_option是数据
     myChart.setOption(this.echarts1_option,true)
    },

然后是给动态数据赋值代码(从后台接口取得的数据)

drawline() {
     // 数据初始化
     API.account.getAccount().then(({data}) => {
      if (data && data.code == 0) {
       this.echarts1_option.series[0].data=data.data.list;
      } else {
       this.$Message.error(data.msg);
      }
     }).catch((data) => {
      this.$Message.error('连接失败,请检查网络!');
     });

    },

到目前为止,页面的结果是:

解决vue页面渲染但dom没渲染的操作

页面完全没有效果:

在加上下面代码后:

//数据自动刷新,必然需要一个监听机制告诉Echarts重新设置数据
  watch: {
   //观察option的变化
   echarts1_option: {
    handler(newVal, oldVal) {
     if (this.myChart) {
      if (newVal) {
       this.myChart.setOption(newVal);
      } else {
       this.myChart.setOption(oldVal);
      }
     } else {
      this.init();
     }
    },
    deep: true //对象内部属性的监听,关键。
   }
  },

我们再看看运行结果:

解决vue页面渲染但dom没渲染的操作

数据虽然刷新了,但是我们的Echart's组件却不知道,必须有个watch过程。

以上这篇解决vue页面渲染但dom没渲染的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 #Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 #Javascript
Element PageHeader页头的使用方法
Jul 26 #Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 #Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 #Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 #Javascript
Element Steps步骤条的使用方法
Jul 26 #Javascript
You might like
让PHP支持断点续传的源码
2010/05/16 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
文字幻灯片
2006/06/26 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
Python开发常用的一些开源Package分享
2015/02/14 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
大学生物业管理求职信
2013/10/24 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
五好党支部事迹材料
2014/02/06 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
表扬信格式模板
2015/05/05 职场文书
小学大队委竞选口号
2015/12/25 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
Python正则表达式中flags参数的实例详解
2022/04/01 Python
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
Golang 对es的操作实例
2022/04/20 Golang