likes
comments
collection
share

大屏可视化项目实践

作者站长头像
站长
· 阅读数 29

大屏可视化项目实践

大屏可视化项目是一种将数据以可视化形式展示在大屏幕上的应用。它可以帮助用户更直观地理解数据，发现数据中的模式和趋势。在本博客中，我们将重点讨论以下几个方面：

  1. 使用 rem 和 px 函数适配各种屏幕
  2. 使用 grid 布局
  3. 使用 echarts

使用 rem 和 px 函数适配各种屏幕

在大屏可视化项目中，屏幕尺寸各异。为了在不同的屏幕上获得一致的显示效果，我们可以使用 rem 和 px 函数来进行适配。

rem 是相对单位，它相对于根元素（通常是 <html> 标签）的字体大小进行计算。我们可以设置根元素的字体大小为一个相对较大的值，然后使用 rem 单位来定义其他元素的尺寸。这样，当屏幕尺寸改变时，根元素的字体大小也会相应调整，从而实现整体的适配。

关于屏幕宽度我们要做到以下效果

长宽比超过16/9（页面长度较长）

大屏可视化项目实践

长宽比不及16/9（页面宽度较长）

大屏可视化项目实践 以上情况可以保证页面以16:9的比例完整展示内容

屏幕尺寸计算公式如下：

大屏可视化项目实践

Wp 为页面有效宽度，Hp 为页面有效高度

//screenWidth为设备宽度，screenHeight为设备高度
const screenWidth = document.documentElement.clientWidth;
const screenHeight = document.documentElement.clientHeight;

//pageWith为页面宽度,判断页面宽度
const pageWidth = screenWidth/screenHeight > 16/9 ? screenHeight * (16/9) : screenWidth
cosnt pageHeight = pageWidth / (16/9)

//设置页面宽度
var element = document.getElementById('myElement'); 
element.style.width = screenWidth / 2 + 'px'; 
element.style.height = screenHeight / 3 + 'px';

页面元素计算公式如下：

大屏可视化项目实践

假设某 div 在设计稿中长 100px，设计稿宽度 1920px，

那么该 div 在页面中长为 100/1920 X 100rem

设置页面中的1rem = 1%的页面比例
const string = `
    <style>html{
        font-size:${pageWith / 100}px
    }</style>`
    document.write(string)
准备px函数，页面元素方便计算
export const px = (n:number) => n/2420 * (window as any).pageWidth

通过使用 rem 和 px 函数的组合，我们可以灵活地适配各种屏幕尺寸，确保大屏可视化项目在不同设备上都能有良好的显示效果。

使用 grid 布局

大屏可视化项目通常需要展示大量的数据和图表，因此合理的布局是非常重要的。在这里，我们推荐使用 grid 布局来实现灵活且响应式的页面布局。

<div class="grid-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 列网格，每列宽度平均分配 */
  grid-gap: 10px; /* 网格项间距 */
}

.item {
  /* 网格项样式 */
}

使用 grid 布局，我们可以将数据和图表组件放置在网格项中，然后通过调整网格的列和行，来控制它们的位置和大小。这种灵活的布局方式可以使我们更好地控制页面的结构和排版，从而提升用户的视觉体验。

使用 echarts

echarts 是一款基于 JavaScript 的数据可视化库，它提供了丰富的图表类型和交互功能，非常适合用于大屏可视化项目。

你可以使用以下代码示例来使用 echarts：

<div id="chartContainer"></div>

// 引入 echarts 库
import echarts from 'echarts';

// 初始化图表容器
var chartContainer = document.getElementById('chartContainer');
var myChart = echarts.init(chartContainer);

// 设置图表配置项和数据
var option = {
  // 配置项
  // ...
  // 数据
  // ...
};

// 渲染图表
myChart.setOption(option);

通过使用 echarts，我们可以方便地创建各种图表，并通过配置项和数据来定制图表的样式和内容。

希望以上内容能帮助你在大屏可视化项目实践中取得更好的效果！

转载自:https://juejin.cn/post/7239341970463047717
评论
请登录