解决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 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
javascript实现动态标签云
Oct 16 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
vue中activated的用法
Jan 03 Vue.js
关于Js中new操作符的作用详解
Feb 21 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
数据库查询记录php 多行多列显示
2009/08/15 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python实现从ftp服务器下载文件
2020/03/03 Python
Django权限设置及验证方式
2020/05/13 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
建筑人员岗位职责
2013/12/25 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
面试必备的求职信
2014/05/25 职场文书
信息工作经验交流材料
2014/05/28 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
二审代理词范文
2015/05/25 职场文书
世界名著读书笔记
2015/06/25 职场文书
水浒传读书笔记
2015/06/25 职场文书
病假条格式范文
2015/08/17 职场文书
建议书的格式及范文
2015/09/14 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
python爬虫--selenium模块
2021/03/31 Python
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
python 安全地删除列表元素的方法
2022/03/16 Python