vue中的echart的渲染问题

清疚 2023-07-14 03:20 85阅读 0赞

方法一：

this.$nextTick(function () {//使用nextTick为了保证dom元素都已经渲染完毕
       const myObserver = new ResizeObserver(entries => {
          entries.forEach(entry => {
           $("#bar").width(entry.contentRect.width);
          $("#bar").height(entry.contentRect.height);
          this.drawEcharts()
            this.set()
          });
          });
         
          const someEl = document.querySelector('.container1');
          myObserver.observe(someEl);
    })

方法二：

ageResize() {
            let that = this;
            $('.info_content').css('height',
              $(window).height() - $('.head').outerHeight(true) - $('.info_option').outerHeight(true) - $('.pagers').outerHeight(true) - 40);
    
            $(window).resize(function () {
              $('.info_content').css('height',
                $(window).height() - $('.head').outerHeight(true) - $('.info_option').outerHeight(true) - $('.pagers').outerHeight(true) - 40);
              that.myChart.resize()
            });
          },

方法三：

// let elementResizeDetectorMaker = require("element-resize-detector"); 
    let erd = elementResizeDetectorMaker();
           let that = this;
           erd.listenTo(document.getElementsByClassName("right"), function (element) {
             that.$nextTick(function () {//使用nextTick为了保证dom元素都已经渲染完毕
               //使echarts尺寸重置
               $("#chartLineBox").width($(".right").width());
               $("#chartLineBox").height($(".right").height());
               this.drawEcharts()
               this.set()
             })
           })
           this.drawEcharts()
           this.set()

发表评论取消回复

表情：

评论列表（有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

相关动态渲染 echarts 饼图（vue 2 + axios + Springboot）

目录前言 1. 项目搭建 1.1. 前端 1.2. 后端 2. 后端数据渲染前端 2.1 补充1：在 vue 中

红太狼/ 2023年10月15日 20:12/ 0 赞/ 80 阅读

相关 vue2+echarts：使用后台传输的json数据去动态渲染echarts图表

1.源码 1.说明只提供子组件代码，totalData 是从父组件传输过来的数据，其数据格式如下: ![a87d9943fa6c4828a49e

忘是亡心i/ 2023年09月27日 10:39/ 0 赞/ 92 阅读

相关 vue中的echart的渲染问题

方法一： this.$nextTick(function () {//使用nextTick为了保证dom元素都已经渲染完毕 const myObserv

清疚/ 2023年07月14日 03:20/ 0 赞/ 86 阅读

相关关于在vue中动态渲染echart组件，渲染失败的问题

以下chart是在正常页面中（不在蒙层中）：用echart组件时，渲染数据多数情况下会是动态添加，也就是前台获取数据，通过props传递给echart组件。对于vue

淩亂°似流年/ 2023年07月09日 12:24/ 0 赞/ 85 阅读

相关 echarts在vue中的使用

1.使用npm安装依赖包 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=[htt

梦里梦外;/ 2023年06月23日 08:57/ 0 赞/ 107 阅读

相关 Echarts有无数据的渲染

在柱状图中，如果可以点击切换数据，在有数据的时候显示正常，如果没有数据的时候，不想显示空白柱状图，而显示暂无数据。首先一点，要明确v-if和v-show对echarts

r囧r小猫/ 2023年06月16日 15:54/ 0 赞/ 83 阅读

相关 echarts第二次的渲染问题(实用，赞）

原文出处：[https://blog.csdn.net/weixin\_41838204/article/details/80770113][https_blog.csdn.n

╰半夏微凉°/ 2023年05月29日 05:01/ 0 赞/ 208 阅读

相关处理vue渲染前的显示问题

添加css <table style="color:rgb(52,73,94); font-size:15px; width:557px; border-collaps

矫情吗；*/ 2022年06月09日 14:06/ 0 赞/ 260 阅读

相关 echarts在vue中的使用

安装：cmd进入项目根文件夹 cnpm install echarts --save main.js中全局引入： import echarts from 'echarts'

谁借莪１个温暖的怀抱￠/ 2022年05月28日 09:49/ 0 赞/ 345 阅读

相关【Vue】20.vue项目中引入echarts图表遇到的问题

最近做一个公众号有需求是要添加一个图表，自己调查了一下，决定使用ECharts，在vue项目中引入ECharts，由于第一次做图表，还要跟UI设计图保持一致，也是遇到了好多样式

淡淡的烟草味﹌/ 2022年02月14日 18:39/ 0 赞/ 705 阅读