echarts大屏自适应展示

大屏设计与ECharts实战

最新推荐文章于 2025-08-29 14:09:48 发布

原创最新推荐文章于 2025-08-29 14:09:48 发布 · 2.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

大前端专栏收录该内容

88 篇文章

订阅专栏

本文探讨了大屏设计中应注意的布局、响应式设计及字体调整技巧，重点介绍了使用ECharts实现动态图表更新与视觉效果增强的方法。

在这里插入图片描述

代码地址 https://download.youkuaiyun.com/download/super__code/11863889

大屏显示需要注意的问题

布局用可用百分比、vw.vh 等布局、也可使用flex布局，
页面大小随屏幕大小而变化，字体按百分比或者rem等设置
样式也可使用媒体查询
窗口变化是刷新图表 window.onresize = function () { chart.resize() }

echarts 设置阴影效果

  itemStyle: {
   normal: {
        color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
                {offset: 0, color: '#03fbe4'},
                {offset: 0.5, color: '#1dd2e7'},
                {offset: 1, color: '#419aec'}
            ]
        )
    },
},

效果图
在这里插入图片描述