相思资源网 Design By www.200059.com

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

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没渲染的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

标签:
vue,页面渲染,dom

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“解决vue页面渲染但dom没渲染的操作”

暂无解决vue页面渲染但dom没渲染的操作的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?