echarts 图表随窗口变化而变化

我不是女神ヾ 2022-03-31 14:56 705阅读 0赞

很多情况下，使用echarts进行统计图制作时需要做自适应效果，能够随着窗口的大小而变化大小。但是统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果，如

![file-read-3281.html][]

造成这个的原因：echarts的图表实例事实上并没有主动的去绑定resize()事件，就是说显示区域大小发生改变内部并不知道，当你需要去做一些自适应的效果的时候，需要使用方主动的去绑定这个事件达到自适应的效果，加上以下代码便可解决。

$(window).resize(function(){
                myChart.resize();
            })

或者

window.onresize = function(){
        myChart.resize();
        //myChart1.resize();    //若有多个图表变动，可多写
    
    }

如：

let option = {
                title: {
                    x: 'left',
                    y: 'top',
                    // text: '单位：万元',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{b}:{c} 万元'
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                grid: {
                    left: '19%',
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'value',
                        name: 'GDP',
                        boundaryGap: [0, 0.01],
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#fff',//左边线的颜色
                                width: '1'//坐标线的宽度
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',//坐标值得具体的颜色
    
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        name: '区域',
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#fff',//左边线的颜色
                                width: '1'//坐标线的宽度
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff',//坐标值得具体的颜色
    
                            }
                        },
                        data: data1
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        data: data2,
                        itemStyle: {
                            normal: {
                                color: '#00b8ee'
                            }
                        },
                    }
                ]
            }
    
            var myChart = echarts.init(document.getElementById("gdp_fx"));
            myChart.setOption(option);
    
            $(window).resize(function(){
                myChart.resize();
            })

[file-read-3281.html]: http://192.168.5.46/file-read-3281.html

发表评论取消回复

表情：

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

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

相关阅读

相关实现组件大小随窗口大小变化

暂时只学会用代码的方式，如果后续了解到在可视化界面的属性栏中可以设置会进而更新分享组件界面和一些属性 ![在这里插入图片描述][080f8e115a2a4fb9ae1

深藏阁楼爱情的钟/ 2023年10月14日 13:23/ 0 赞/ 64 阅读

相关窗口变化，echarts自动变化的设置

方法一： var myChart = echarts.init(document.getElementById(domid)); window.addEventLi

绝地灬酷狼/ 2023年06月29日 13:58/ 0 赞/ 19 阅读

相关背景图片，banner图片随屏幕大小变化而变化

1 . 背景图片变化业务背景：一个固定高度，固定最小宽度的横幅式banner [例子网站][Link 1] <!DOCTYPE html> <ht

客官°小女子只卖身不卖艺/ 2022年12月31日 03:26/ 0 赞/ 212 阅读

相关 html中高度随内容变化而变化,iframe的高度随内容变化而变化的代码

iframe框架高度随内容的变化而变化的代码。 function AutoIframe() \{ if(document.readyState!='complete')

叁歲伎倆/ 2022年10月06日 10:55/ 0 赞/ 242 阅读

相关 vue页面中多个echarts图表随窗口缩放变化

不知道大家是否遇见过 window.onresize 在实现 vue 中使用两个及以上 echarts 图表时只有最后一个图表会跟随窗口大小变化或者所有图表大小都不会变化的情况

叁歲伎倆/ 2022年09月05日 01:49/ 0 赞/ 348 阅读

相关 css设置图片高随宽变化而变化

其实很简单，只需要设置宽的大小，像素也好，百分比也好，不设置高的大小，css就会自动按照图片的大小缩放比例。 <style> img{ text-align:cent

蔚落/ 2022年07月11日 07:55/ 0 赞/ 389 阅读

相关 C#控件随着窗口大小变化而自动变化

在设计可供用户调整大小的窗体时，如何实现该窗体上的控件也应能正确地随窗体的改变而自动调整大小并且能重新定位？此时就要借助控件的．Anchor属性。Anchor属性定义控件的定位

心已赠人/ 2022年05月17日 11:18/ 0 赞/ 515 阅读

相关 echarts 图表随窗口变化而变化

很多情况下，使用echarts进行统计图制作时需要做自适应效果，能够随着窗口的大小而变化大小。但是统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果，如 ![file-r

我不是女神ヾ/ 2022年03月31日 14:56/ 0 赞/ 706 阅读

相关 vue中echarts随窗体变化

![1117150-20190227143253933-1581119925.png][] <div id="myChart" :style="{widt

朴灿烈づ我的快乐病毒、/ 2021年12月20日 17:47/ 0 赞/ 254 阅读

相关 CSS3 background属性使背景图不再拉伸，变形，随窗口变化而变化

前言在div设置背景图时，背景图经常会随浏览器的拖拽大小的变化而变化，造成形变解决方法设置background-size属性 backg

柔情只为你懂/ 2021年07月26日 20:34/ 1 赞/ 2283 阅读