vue3 可视化数据大屏 - 进口食品安全智慧监管决策大屏

数据大屏 yekong 2686℃

vue3 可视化数据大屏 - 进口食品安全智慧监管决策大屏。

如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870

可视化数据大屏设计

psd源文件 进口食品安全智慧监管决策大屏ui设计

开发环境

vue3+vite+js

分辨率

1920*1080

演示地址

可视化数据大屏 - 进口食品安全智慧监管决策大屏

效果截图

客户需要,中间区域一共做了3种设计,分别是宁波市地图,3d地图飞线,平面图飞线3种效果。

宁波市地图实例

演示地址:
vue3 可视化数据大屏 - 进口食品安全智慧监管决策大屏-宁波
可视化数据大屏 - 进口食品安全智慧监管决策大屏-效果截图

3d地球效果

演示地址:
vue3 可视化数据大屏 - 进口食品安全智慧监管决策大屏-3d地球

vue3 可视化数据大屏 - 进口食品安全智慧监管决策大屏-3d地球

平面图飞线

演示地址:
vue3 可视化数据大屏 - 进口食品安全智慧监管决策大屏-平面图飞线
vue3 可视化数据大屏 - 进口食品安全智慧监管决策大屏-平面图飞线

智能查询

演示地址:

可视化数据大屏 - 进口食品安全智慧监管决策大屏智能查询

可视化数据大屏 - 进口食品安全智慧监管决策大屏智能查询效果图

可视化数据大屏 - 进口食品安全智慧监管决策大屏

监督管理

可视化数据大屏 - 进口食品安全智慧监管决策大屏监督管理

可视化数据大屏 - 进口食品安全智慧监管决策大屏监督管理效果图

可视化数据大屏 - 进口食品安全智慧监管决策大屏监督管理效果图

风险管理

可视化数据大屏 - 进口食品安全智慧监管决策大屏-风险管理

可视化数据大屏 - 进口食品安全智慧监管决策大屏-风险管理效果图

可视化数据大屏 - 进口食品安全智慧监管决策大屏-风险管理效果图

贸易数据

可视化数据大屏 - 进口食品安全智慧监管决策大屏-贸易数据

可视化数据大屏 - 进口食品安全智慧监管决策大屏-贸易数据效果图

可视化数据大屏 - 进口食品安全智慧监管决策大屏-贸易数据效果图

内页

可视化数据大屏 - 进口食品安全智慧监管决策大屏-内页

可视化数据大屏 - 进口食品安全智慧监管决策大屏-内页效果图

可视化数据大屏 - 进口食品安全智慧监管决策大屏-内页效果图

资质管理

可视化数据大屏 - 进口食品安全智慧监管决策大屏-资质管理

可视化数据大屏 - 进口食品安全智慧监管决策大屏-资质管理效果图

可视化数据大屏 - 进口食品安全智慧监管决策大屏-资质管理效果图

准入审核

可视化数据大屏 - 进口食品安全智慧监管决策大屏-准入审核

可视化数据大屏 - 进口食品安全智慧监管决策大屏-准入审核效果图

可视化数据大屏 - 进口食品安全智慧监管决策大屏-准入审核效果图

项目笔记

在不追求数据精确的情况下,使用echarts在图片上绘制飞线图

客户想要一个旋转的3d地球效果,于是把之前学习时用到的实例搬过去了,webGL使用threejs实现大屏3D地球可视化实例

在数据大屏中,需要一些底座效果,这个项目中也有类似的效果,收集起来留待后用。

项目中使用到了echarts宁波市地图

echarts 渐变色柱状图效果

echarts 环形饼状图颜色渐变加自定义Legend效果

echarts 环形饼状图颜色渐变效果

echarts 柱状图自定义tooltip样式

vue进度条实现国家占比效果

vue 进度条效果实例格子进度条

vue进度条各产品不合格数量占比效果

vue进度条各国家不合格数量占比效果

vue进度条产品类型占比类型效果

echarts x轴实现label倾斜效果实例

echarts 实现左右两个y轴柱状图

echarts 饼状图扇区大小跟随数据变化legend自定义

echarts 世界地图渲染添加scatter点并给点添加点击弹窗

echarts 世界地图geoJson数据下载

其他说明

客户项目,仅做展示

喜欢 (2)