image.png
    预览链接

    终于完成可视化大屏项目,这个项目中使用了 GridFlex 完成页面布局,使用动态 rem 方案完成不同屏幕适配,大量使用 echarts 图例, 包括柱形图折线图饼图地图表格等,所有图例都可以实时更新数据并辅以动画交互

    在完成这个项目的过程中, 我大量查阅了echarts的文档和相关博客,熟悉了使用echarts制作可视化大屏界面的方法和技巧。

    我把每个关键步骤都整理成了单独的博客,供大家参考:

    1. 动态设置宽高
    2. 使用flex和grid完成页面布局
    3. 文字渐变与时间显示
    4. 实现边框层叠效果
    5. 柱状图
    6. 折线图
    7. 地图
    8. 环形图和饼图
    9. 给图表添加动画