Vue3 + js-echarts 实现前端大屏可视化

Vue3 + js-echarts 实现前端大屏可视化

引用

CSDN

1.

https://blog.csdn.net/weixin_44832362/article/details/140783771

本文介绍了一种基于Vue3和js-echarts实现前端大屏可视化的技术方案。通过scale属性实现图表的等比缩放，虽然代码量少且适配简单，但存在一些局限性，如比例不匹配时的留白问题、字体模糊以及事件热区偏移等。

方案介绍

scale方案

• 实现方式：通过scale属性，根据屏幕大小对图表进行整体的等比缩放。

• 优点：

• 代码量少，适配简单。

• 一次处理后不需要在各个图表中再去单独适配。

• 缺点：

• 因为是根据UI稿等比缩放，当大屏跟UI稿的比例不一样时，会出现周边留白情况。

• 当缩放比例过大时，字体会有一点点模糊。

• 当缩放比例过大时，事件热区会偏移。