关于数据可视化的大小屏自适应和缩放的问题

最新推荐文章于 2024-09-04 10:19:06 发布

指尖跃动smile

最新推荐文章于 2024-09-04 10:19:06 发布

阅读量1.8k

点赞数 1

分类专栏： Js 文章标签： echarts html css

本文链接：https://blog.csdn.net/h_el_lo/article/details/119930340

版权

Js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

方案一

通过设计图的尺寸来写页面，按大屏为宽度1920的设计图来说，页面的宽高完全按照设计图的尺寸来写，通过设置盒子的zoom值来实现大小屏自适应。

html页面：

<body>
	<div id="container">
        <div class="item">
            <div class="left">
            </div>
            <div class="middle">中间盒子</div>
            <div class="right">右边盒子</div>
        </div>
        <div class="item">
            <div class="left left1">

            </div>
            <div class="middle middle1">中间盒子</div>
            <div class="right right1">右边盒子</div>
        </div>
        <div class="item">
            <div class="left">

            </div>
            <div class="middle">中间盒子</div>
            <div class="right">右边盒子</div>
        </div>
	</div>
</body>

css代码：

		* {
           margin: 0;
           padding: 0;
       }
       html,body {
           height: 100%;
       }
        .container {
            display: flex;
            flex-direction: column;
            width: 1920px;
            height: 100%;
            box-sizing: border-box;
        }
        .item {
            width: 100%;
            margin-bottom: 20px;
            flex: 1;
        }
        .left {
            float: left;
            width: 500px;
            /* height: 280px; */
            height: 100%;
            border: 1px solid #e4e4e4;
            margin-left: 20px;
            font-size: 18px;
        }
        .middle {
            float: left;
            width: 803px;
            /* height: 280px; */
            height: 100%;
            border: 1px solid red;
            margin: 0 20px;
            font-size: 18px;
        }
        .right {
            float: left;
            width: 500px;
            /* height: 280px; */
            height: 100%;
            border: 1px solid green;
            margin-right: 20px;
            font-size: 24px;
        }

我的页面的高度采用的是flex布局，让页面内容可以一屏展示，没有滚动条，高度也可以按照设计图的尺寸来写。然后通过js监听屏幕大小尺寸的变化来动态的缩放页面的尺寸

js代码如下：

		function resizeTo() {
			var el = document.documentElement || 			document.body
			var pageW = el.clientWidth
			// 屏幕的缩放比
			var scale = pageW / 1920
			var mainEl = document.getElementById("container")
			mainEl.style.zoom = scale
		}
		// 在页面初次加载调用一次
		resizeTo()

现在的样式如下图：

在这里插入图片描述
echarts代码如下：

		        
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }]
        };
        var mychart = echarts.init(document.querySelector('.left'))
        var mychartLeft1 = echarts.init(document.querySelector('.left1'))
        mychart.setOption(option)
        mychartLeft1.setOption(option)
        option1 = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }]
        };
        var mychart1 = echarts.init(document.querySelector('.middle'))
        var mychartMiddle1 = echarts.init(document.querySelector('.middle1'))
        mychartMiddle1.setOption(option1)
        mychart1.setOption(option1)
        option2 = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center',
                textStyle: {
                    fontSize: 23
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    fontSize: 18
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var mychart2 = echarts.init(document.querySelector('.right'))
        var mychartRight1 = echarts.init(document.querySelector('.right1'))
        mychartRight1.setOption(option2)
        mychart2.setOption(option2)

然后通过屏幕的resize事件动态设置缩放比并且动态渲染echart图表

  window.onresize = function() {
            resizeTo()
            // 下面只写了一个左边echart的resize事件
            mychart.resize()
           .......
        }

下图展示效果：

屏幕缩放100%：
在这里插入图片描述
屏幕缩放25%

在这里插入图片描述
屏幕缩放200%

无论屏幕怎么缩放，页面的尺寸大小始终是设计稿的大小

关于ehcart全屏事件尺寸不能及时响应屏幕全屏大小，会出现页面尺寸超出屏幕的问题，我在点击全屏时加入了定时器，时间间隔300ms：

		// 全屏
      function scrennAll() {
          var el = document.documentElement
          el.requestFullscreen()
          setTimeout(function() {
              mychartRight1.resize()
              mychart.resize()
              mychart1.resize()
          },300)
      }
      // 退出全屏
     function exitScreen() {
          var docE = document;
          if(docE.exitFullscreen) {
              docE.exitFullscreen()
          }else if(docE.webkitCancelFullScreen) {
              docE.webkitCancelFullScreen()
          }
          setTimeout(function() {
              mychartRight1.resize()
              mychart.resize()
              mychart1.resize()
          },300)
      }