解决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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
解决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
Laravel配合jwt使用的方法实例
2020/10/25 PHP
脚本收藏iframe
2006/07/21 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
python发送arp欺骗攻击代码分析
2014/01/16 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
详解python的ORM中Pony用法
2018/02/09 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
简单了解python列表和元组的区别
2020/05/14 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
数控专业应届生求职信
2013/11/27 职场文书
自荐书封面下载
2013/11/29 职场文书
师说教学反思
2014/02/07 职场文书
给老师的感谢信
2015/01/20 职场文书
基层党建工作简报
2015/07/21 职场文书
网吧管理制度范本
2015/08/05 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python中三种花式打印的示例详解
2022/03/19 Python
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
Golang获取List列表元素的四种方式
2022/04/20 Golang