精华内容
下载资源
问答
  • Echarts 多个图表resize()方法只生效一个,如何自适应父级div的宽高
    2020-11-02 11:06:40

    1、问题描述

    处理在多个echarts图表下 resize()方法只生效一个,最后一个的行为会覆盖前面的。多个图表自适应有两种情况:

    第一种情况是改变窗口大小要多个图表自适应,

    第二种情况是窗口大小不变,整个页面分为两部分,左边菜单导航树形宽度占20%,右边图表宽度占80%,当左边菜单宽度变为10%时图表自适应变为90%;

    2、思路分析

    (1)、改变窗口大小:

                     方法 1、遍历生成的折线图的Dom,通过getInstanceByDom方法获取dom容器,调用每个图形的resize方法,在window.onresize监听窗口变化时,调用getEchartObj()方法

                     方法2、因为采用DOM一级绑定方式会只适应一个图表,在使用window.onresize监听窗口变化时,要使用DOM二级绑定方式:addEventListener方式;(注释的位置)

    (2)、改变div的宽度:

    3、解决办法

    改变窗口大小:

    (1)当多个图形在一个vue组件中时:(方法 1\方法2)

    methods:{
        //饼图分析
        drawPie() {
          let myChart = echarts.init(this.$refs['payWayRef']);
          // 绘制图表
          let option = {
            title: {
              text: "分析",
              left: "center"
            },
            tooltip: {
              trigger: "item",
              formatter: `{a}<br/>{b}:{c}({d}%)`
            },
            legend: {
              orient: "vertical",
              left: "left",
              selected: this.legendData
            },
            toolbox: {
              show: true,
              feature: {
                // dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
              }
            },
            series: []
          };
          myChart.setOption(option);
          // window.addEventListener("resize",()=>{
          //   myChart.resize()
          // })
        },
        //曲线图分析
        drawLine(data) {
          // this.dateArr.pop();
          let lineCount = data.lineCount;
          let lineMoney = data.lineMoney;
          let myChart = echarts.init(this.$refs["payWayLineRef"]);
          // 绘制图表
          let option = {
            title: {
              text: "分析",
              left: "center"
            },
            tooltip: {
              trigger: "axis"
            },
            legend: {
              type: "scroll",
              left: "left"
            },
            toolbox: {
              show: true,
              feature: {
                // dataView: { readOnly: false },
                magicType: { type: ["line", "bar"] },
                restore: {},
                saveAsImage: {}
              }
            },
            grid: {
              right: "15%"
            },
            xAxis: {
              type: "category",
              data: this.dateArr,
              name: "月份"
            },
            yAxis: [
              {
                type: "value",
                name: "笔数",
                nameLocation: "start",
                nameGap: 30,
                position: "left",
                splitLine: false
              },
            ],
            series: [
              {
                name: "笔数",
                data: lineCount,
                yAxisIndex: 0,
                type: "line"
              },
              {
                name: "金额",
                data: lineMoney,
                yAxisIndex: 1,
                type: "bar"
              }
            ]
          };
          myChart.setOption(option);
          // window.addEventListener("resize",()=>{
          //   myChart.resize()
          // })
        },
        //处理多个图形的自适应
        getEchartObj(){
            let arr = ['payWayRef',"payWayLineRef"]
            arr.map(v => {
            let  _ref=this.$refs[v];//遍历生成的折线图的Dom
            //通过getInstanceByDom方法获取dom容器
            let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;
            if(myEchars!== undefined){
              myEchars.resize();
            }
          });
        }
    }
    mounted(){
        this.$nextTick(()=>{
            window.onresize = ()=>{
                this.getEchartObj()
            }
        })
    }

    (2)当多个图形在不同子组件中时:(父组件/多个子组件)

    
    //父组件  father
    //子组件1   son1
    //子组件2     son2
    
    import echarts  form "echarts"
    
    
    //父组件主要代码块
    
    <son1 ref='son1'></son1>
    <son2 ref='son2'></son2>
    
    mounted(){
        this.$nextTick(()=>{
            window.onresize = ()=>{
                this.$refs.son1.reResizeFn()
                this.$refs.son2.reResizeFn()
            }
        })
    }
    
    
    //son1子组件主要代码块(echarts为引入的echarts对象)
    
        <div id='echart1'></div>
    
       //处理多个图形的自适应
        reResizeFn(){
            let  _ref=document.getElementById("echart1")
            //通过getInstanceByDom方法获取dom容器
            let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;
            if(myEchars!== undefined){
              myEchars.resize();
            }
        }
    
    
    //son2子组件主要代码块
        <div id='echart1'></div>
    
        //处理多个图形的自适应
        reResizeFn(){
            let  _ref=document.getElementById("echart2")
            //通过getInstanceByDom方法获取dom容器
            let myEchars = _ref?echarts.getInstanceByDom(_ref):undefined;
            if(myEchars!== undefined){
              myEchars.resize();
            }
        }
    

    改变div的宽度:

    (1)左侧菜单,右侧内容的场景

    更多相关内容
  • 效果:手动改变窗口大小,echarts实现自动适应父级盒子宽度 1.在vue中安装一个插件element-resize-detector-----这是一个元素调整大小检测器 npm install element-resize-detector 2.安装成功后在页面引用 <...

    这里写自定义目录标题

    效果:手动改变窗口大小,echarts实现自动适应父级盒子宽度

    1.在vue中安装一个插件element-resize-detector-----这是一个元素调整大小检测器

    npm install element-resize-detector
    

    2.安装成功后在页面引用

    
    <template>
     <div>
     <div id='echartsWarp'>
     <div id="speeds" :style="{ width: '100%', height: '450px' }"></div>
     <div>
     </div>
    </template>
    <script>
    // 直接导入使用,也可以在main.js中引入
    //elementResizeDetectorMaker,该全局函数是使元素调整大小检测器实例的maker函数。
    var elementResizeDetectorMaker = require("element-resize-detector");
    export default {
      name: "Index",
      data() {
        return {
        }
        },
        mounted(){
        this.changeEchartsWidthApi();
        },
        methods:{
        //监听盒子大小,改变echarts宽度,实现echarts自适应
        changeEchartsWidthApi() {
          // 创建实例,无参数
          var erd = elementResizeDetectorMaker(); //使用默认选项(将使用基于对象的方法)
          // 创建实例带参数
          // 使用基于超快速滚动的方法。
          // 这是推荐的策略。
          var erdUltraFast = elementResizeDetectorMaker({
            strategy: "scroll",
            callOnAdd: true, //callOnAdd选项,用于确定在添加侦听器时是否应调用它们。默认为true。
            //如果为true,则确保在添加侦听器后将对其进行调用。如果为false,则在添加侦听器时将不保证其
            //被调用(不会阻止其被调用)
            debug: true,
          });
          //监听class为staticNextMain的元素 大小变化
          var self = this;
          //侦听元素的调整大小事件,并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
          //覆盖实例选项
          erd.listenTo(document.getElementById("echartsWarp"), function (element) {
            //今日车速
            self.speedChartsApi();
          });
        },
          //今日车速
        speedChartsApi() {
          // 基于准备好的dom,初始化echarts实例
          this.$nextTick((_) => {
            const dom = document.getElementById("speeds");
            dom.style.width = dom.parentNode.parentNode.clientWidth + "px";
            // let myChart = this.$echarts.init(document.getElementById("speeds"));
            let myChart = this.$echarts.init(dom);
            // 绘制图表
            myChart.setOption({
              title: {
                text: "2022-01-14",
                left: "50px",
                textStyle: {
                  color: "#666666", //颜色
                  fontStyle: "normal", //风格
                  fontWeight: "normal", //粗细
                  fontFamily: "Microsoft yahei", //字体
                  fontSize: 16, //大小
                  align: "center", //水平对齐
                },
              },
              legend: {
                data: ["历史车速"],
              },
              tooltip: {
                trigger: "axis",
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                  "06:15",
                  "07:15",
                  "08:15",
                  "09:15",
                  "10:15",
                  "11:15",
                  "12:15",
                  "13:15",
                  "14:15",
                  "15:15",
                  "16:15",
                  "17:15",
                  "18:15",
                  "19:15",
                  "20:15",
                  "21:15",
                  "22:15",
                  "23:15",
                ],
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: [
                    820, 932, 901, 934, 1290, 1330, 1320, 2344, 234, 123, 222, 111,
                    333, 345, 1234, 234, 5678, 234,
                  ],
                  name: "历史车速",
                  type: "line",
                  smooth: true, //平滑
                  color: "#24C2DC",
                  stack: "Total",
                  areaStyle: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#7CE2D8", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#E9FAF8", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  },
                },
              ],
            });
            myChart.resize();
            setTimeout(function () {
              window.addEventListener('resize', () => {
                myChart.resize();
              })
            }, 200);
          });
        },
        }
        }
    </script>
    
    展开全文
  • 这两天真的被这个问题抓狂,找了好多都没有效果,百试无用。...没改前时这样的,canvas超出父级div宽度 改之后 话不多说,上代码 // 图表 var myChart = echarts.init(document.getElementById('sale-cha...

    这两天真的被这个问题抓狂,找了好多都没有效果,百试无用。

    不过有句话说的很对:方法总比问题多。遇到问题总会有解决方法,只要你愿意试。

    下面说下我的方法,其实很简单

    没改前时这样的,canvas超出父级div的宽度

     

    改之后

     

     

     话不多说,上代码

    // 图表
    var myChart = echarts.init(document.getElementById('sale-chart'));
    var legend="";
    // 指定图表的配置项和数据
    var option = {
            //图表配置标题
            title: {
                text: '销量(万辆)', 
                textStyle: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: '#000000'
                },
                left: 5
            },
            color:'#0E76E4',
            //配置提示信息
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                show: true,
                right: '10%',
                top: 2,
                itemWidth: 10,
                itemHeight: 4,
                textStyle: {
                    color: '#1a1a1a',
                    fontSize: 12,
                    icon: 'rect',
                },
                data:legend
            },
    //设置中间内容距离div的距离,也就是内边距
            grid: {
                top: 35,
                left: 55,
                right: 45,
                width:'auto',
                height:'auto'
            },
            dataZoom: [{
                type: 'inside'
            }, {
                type: 'slider'
            }],
            
    
            // ],
            //x轴   
            xAxis: {
                name: '时间', // 给X轴加单位
                nameLocation: 'end',
                type: 'category',
                //x轴文字配置
                axisLabel: {
                    show: true,
                    inside: false,
                    align: 'left',
                    margin: 2,
                    textStyle: {
                        color: '#1a1a1a',
                        fontSize: '10'
                    }
                },
                axisTick: {
                    show: false
                }, //去掉x轴刻度线
                // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"],
                data: [],
                axisLine: {
                    show: false,
                    length: 3,
                }
            },
            //y轴
            yAxis: {
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#1a1a1a',
                        fontSize: '10'
                    }
                },
                axisLine: {
                    show: false //y轴刻度线不显示
                }
    
            },
            series: [{
                // name: "",
                type: 'line', //图表类型
                // data: [266, 200, 306, 100, 100, 280, 500, 500],
                data: [],
                symbol: 'none',
    
            }]
        
    
    };
    // 使用刚指定的配置项和数据显示图表。 -->
    myChart.setOption(option);
    //请求图表数据
    function chartData(){
        $.ajax({
            type: "get",
            url: "”,
            dataType: "jsonp",
            success: function (json) {
                console.log(json);
               
                // 需要倒序数组
                myChart.setOption({
                    xAxis: {
                        data: monthData.reverse()
                    },
                    series: {
                        data: saleData.reverse()
                    },
                    legend: {
                        data: legend
                    },
                });
            //最关键,自动调整canvas的
                myChart.resize();
        
        
            },
            error: function () {
                console.log("请求失败");
            }
        })
    }

     

     放了这么多代码,其他配置好就两句话

      调用时加上 myChart.resize();
    设置内边距 grid
    还有就是给父级的div宽度设置100%;

     

     


    问题就解决了
    展开全文
  • vue+echarts中 图表容器无法自适应 问题描述: 在做项目时,遇到问题,百度了很多都无法实现,解决之后总结一下,方便下次参考。 设置图表宽度为百分比,不生效,无法随着外层父容器大小自适应 补充:项目页面中...

    项目场景:

    vue+echarts中 图表容器无法自适应


    问题描述:

    在做项目时,遇到问题,百度了很多都无法实现,解决之后总结一下,方便下次参考。

    设置图表宽度为百分比,不生效,无法随着外层父容器大小自适应
    补充:项目页面中加入左侧折叠菜单,点击折叠后,父容器百分比自适应浏览器,但是图表大小无法自适应父容器的调整。


    原因分析:

    调试发现 width:100%,变成了width:100px。并没有按照百分比实现自适应。


    解决方案:

    利用resize()方法来解决该问题。

    leftMenu.vue折叠按钮事件添加发射事件resize

    method:{
    clickButton:function(){
    ....
    //新的界面要添加该事件,最好更名事件名(resize1...)
    添加到延时事件
    setTimeout(this.$root.eventHub.$emit('resize'),200);
    }
    
    

    main.vue

    <template>
    	<div style="width:60%;height:30%;">
    	//此处我只改变图表宽度自适应,高度固定
    		<div id="demoChart" style="width:100%;height:300px;"></div>
    	</div>
    </template>
    <script>
    	export default{
    		name:"ChartShow",
    		data(){
    			return{
    			myChart:null
    			}
    		},
    		mounted(){
    		//基于准备好的DOM,初始化echarts实例
    		this.myChart = this.$echarts,init(document.getElementById('demoChart')
    		//注意顺序,画图写在初始化实例之后
    		this.drawPie()
    		this.$root.eventHub.$on('resize', () => {
                     setTimeout(this.resizeChart,10);
                })
    		},
    		method:{
    			drawPie(){
    			//绘制图表
    			this.myChart.setOption({
    				legend:{
    					type:'scroll',//图例过长,滚动显示
    					top:'top',
    					data:['苹果','香蕉','橘子','火龙果','荔枝']
    				},
    				tooltip:{
    					trigger:'item',
    				},
    				series: [{
                            name: '最受欢迎的水果',
                            type: 'pie',
                            radius: [50, 95],
                            center: ['50%', '55%'],
                            avoidLabelOverlap:false,
                            label:{
                                show:false,
                                position:'center',
                            },
                            emphasis:{
                                label:{
                                    show:true,
                                    fontSize:'20',
                                    fontWeight:'bold',
                                }
                            },
                            labelLine: {
                               show:false,
                            },
                            data: [
                                {value: 25, name: '苹果'},
                                {value: 32, name: '香蕉'},
                                {value: 12, name: '橘子'},
                                {value: 55, name: '海事'},
                                {value: 85, name: '火龙果'},
                                {value: 45, name: '荔枝'},
                            ]
                        }]
    			})
    			}
    		}
    		resizeChart(){
    		this.myChart.resize();
    	}
    </script>
    

    如果想要高度自适应,同理调整。

    展开全文
  • 在做vue项目中,使用echart后,后台系统左侧菜单在默认的情况下是有几百的宽度,在点击缩小菜单后宽度会变小, 缩小后右侧视图中的echart图表并没有自适应,还是显示原来的尺寸 解决方案: 父组件 <template> <...
  • echarts自适应父类div大小

    千次阅读 2018-08-27 16:48:03
    &lt;div class="summary"&gt; ...div id=".../div&...谷歌、火狐可以设置父类div大小然后设置子div宽和高100%,Ie8似乎不行 .summary{ float: left; width: 48%; border:1...
  • echarts自适应div大小

    千次阅读 2019-06-18 17:11:05
    https://blog.csdn.net/weixin_38383877/article/details/83113088
  • 现在发现的问题是,并不会随着父组件中div高度大小自适应。 解决方法: 给echarts组件传一个height属性: 渲染echarts的根组件里定义好height。 props属性里声明height。 watch里监听height,变化的时候,重新...
  • vue-echarts图表自适应用到了vue-resize 完整流程为: 1、下载vue-resize npm i vue-resize -S 2、main.js中引入 import { ResizeObserver } from 'vue-resize'; import 'vue-resize/dist/vue-resize.css'; Vue....
  • 首先安装 npm install echarts --save (推荐使用cnpm,速度更快) 然后首先需要全局引入 在main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts 然后在vue组件中: 页面(html) <...
  • echarts 图表随外层div尺寸调整大小

    千次阅读 2021-02-08 11:51:41
    vue中使用echarts ,让图表随外层div尺寸调整大小 Echarts中提供方法: echartsInstance.resize Function (opts?: { width?: number|string, height?: number|string, silent?: boolean }) => ECharts ...
  • Echarts高度自适应

    2021-04-30 08:59:42
    在开发数据大屏的时候,有需求要求echarts图表能自适应宽度和高度 原理: 在监听页面大小变化的时候,先监听echarts父级元素的高度变化,计算出echarts的高度,然后再调用echarts的resize函数 关键代码 window....
  • 在vue中使用echarts绘制图表的时候, 会发现我echats的父元素的width是100%,但是绘制成功之后canvas的width一直是100px, 导致图表显示有问题 <div class="data" v-show="excelData.length > 0"> &...
  • ECharts3中的图表大小自适应

    万次阅读 多人点赞 2016-07-14 18:49:49
    最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表。所以div容器的高度宽度必须指定为px,...
  • iview UI 侧边栏折叠,echarts图表动态适应页面宽度 只能算是基本实现了,不知道会不会导致内存问题,用在生产环境中时,请一定多多测试图表组件,若有更好的方法 ,希望能一起交流…上代码; //main.vue <span @click=...
  • 最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表。所以div容器的高度宽度必须指定为px,...
  • 问题1:Echarts图表宽度变成100px? 问题2:怎么让Echarts图表宽度随着父元素自动适应?  网上对于这两个的解决方案大同小异,手动的记录父元素的宽度,或者侦听display属性,解决方案要么感觉极其复杂,要么治标...
  • 问题:当侧边栏收缩展开,左侧图宽度变化,图未重绘 解决方法 1,在vuex中存变量控制侧边栏得开关 open (这里怎么实现这个开关不叙述了,就是一个变量控制得事) 2.在组件中监听,就完事了 watch:{ ‘$store....
  • div @click="newPopup">打开弹窗</div> <!-- 弹窗 --> <Modal v-model="newPopup" :mask-closable="false" :scrollable="true" :transfer="false" class="accept-modal-common" > <...
  • 使用了flxe布局出现echarts超出父盒子宽度的问题 可以看出来echarts溢出了父盒子 一下问题相似 https://segmentfault.com/q/10... https://segmentfault.com/q/10... 在了解echarts绘制机制 echarts图形只绘制一...
  • echarts的图表,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表。所以div容器的高度宽度必须指定为px,这设计不知道是为啥。于是自己采用了如下解决方案,直接贴...
  • 需要使用到的插件:element-resize-detector 欣赏一下效果 安装 npm install element-...div id="left"> <vdr class="vdring" :parent="true" :w="400" :h="300" :min-width="225" :min-height=.
  • 如题所示,当我们在react中使用echarts图表时,偶尔会出现超出父级容器的情况,一般超出父级容器,不是因为图表绘制的方法调用问题,而是时机出现了问题,我们知道,react中页面渲染需要时间,通常render方法调用...
  • echarts的文档里面说宽高必须设置固定值,不然图形无法渲染出来。 有一种方式可以解决这个问题,通过设置百分比来渲染图形,就是在dom上级包一层父容器,父级和子级都设置宽高为百分比,子dom宽高都设置100%,渲染...
  • 问题背景: ...如何才能实现 子级的 div的大小动态的和父级div的大小一致呢? 也就是 outer拉动调整大小时,box的大小动态的变大变小和父元素匹配。 css和js,jquery实现都可以,如何达成?
  • 由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中。  需要使用this.$nextTick(() => { });方法,在mounted中,保证DOM渲染完全后,在进行echarts初始化。 赋值操作: $("#...

空空如也

空空如也

1 2 3 4 5
收藏数 98
精华内容 39
关键字:

echarts怎么自适应父级div的宽度