分享几个超级炫酷的可视化大屏模板

项目模板基于vue、 echarts,包含世界地图、中国地图、人体脑图、折线图、柱状图、环形图、饼状图、雷达图等模块,可自行根据需求添加、删除模块。

数据修改:

将项目 /components 文件夹下 .vue 文件中模拟数据改为真实数据即可。
setData(type) { // 数据模拟
  let arr = [];
  switch (type) {
    case 'x': // 设置横坐标 时间数据
      for (let i = 0; i < this.selectRangeDate.length; i++) {
        arr.push(this.selectRangeDate[i][0] + '.' + 
        this.selectRangeDate[i][1] + '.' + this.selectRangeDate[i][2])
    }
    break;
    case 's':// 访问次数数据模拟
      for (let i = 0; i < this.selectRangeDate.length; i++) {
          arr.push((Math.random() * 6).toFixed(0))
      }
    break;
    case 'n': // 访问人数数据
      for (let i = 0; i < this.selectRangeDate.length; i++) {
          arr.push((Math.random() * 600).toFixed(0))
      }
    break;
  }
  return arr;
},

项目截图:

图片

图片

图片

项目依赖:

"dependencies": {
  "core-js": "^3.6.5",
  "echarts": "^5.2.2",
  "iview": "^3.1.3",
  "vue": "^2.6.11",
  "vue-router": "^3.2.0"
}

项目安装:

// 安装依赖
npm install
// 启动
npm run serve

《前端资源推荐》公众号收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等,如有其他优秀资源,欢迎发消息投稿,感谢点赞、在看、转发、关注!!!

posted on   我和你并没有不同  阅读(5)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
历史上的今天:
2021-02-27 python 雷达图 转载:https://mp.weixin.qq.com/s/M1f0ItGQz3BKZTIe1ootYQ
2018-02-27 airflow笔记
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示