vue3 可视化数据大屏 综合能源数据可视化

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

运行环境

nodejs 16

开发框架

vue3 vite js

分辨率

1920 * 1080

演示地址

演示demo:综合能源数据可视化 可视化数据大屏 vue3

动态效果

效果截图

页面模块

站点接入

站点概况

变压器负载率

告警统计

顶部数据

图标为字体图标，可以更换为自己需要的图标

中间地图

能源趋势

工单统计

巡检统计

缺陷统计

检修计划

大屏数据可视化模板

大屏数据可视化模板

更多背景图资源

数据大屏背景图

项目文件目录

项目依赖

"dependencies": {
    "@vue/shared": "^3.2.47",
    "amfe-flexible": "^2.2.1",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.4",
    "dayjs": "^1.11.9",
    "echarts": "^5.2.0",
    "echarts-liquidfill": "^3.1.0",
    "fs": "0.0.1-security",
    "gsap": "^3.11.4",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "postcss-pxtorem": "^6.0.0",
    "qiniu": "^7.8.0",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "style-loader": "^3.3.1",
    "vite-plugin-compression": "^0.5.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vue3-seamless-scroll": "^2.0.1",
    "wow.js": "^1.2.2"
  },

接口请求封装实例

src/api/api/LargeScreenData.js
// getData
export function getData(data) {
    return request({
        url: '/api/wateringTruckCount?' + qs.stringify(data),
        method: 'get',
        data
    })
}

// postData

export function postData(data) {
    return request({
        url: '/api/intelligentService',
        method: 'post',
        data
    })
}

数据请求实例

 methods: {
    async getData() {
      try {
        const res = await getData({id: 1});
        this.list = res.data
        this.drawEcharts()
      } catch (err) {
        console.error(err);
      }
    },
    async postData() {
      try {
        const res = await postData({id: 1});
        this.list = res.data
        this.drawEcharts()
      } catch (err) {
        console.error(err);
      }
    },
  },

源码下载

项目基于vue3+vite+js开发 nodejs 16，购买代码请确保有相关开发基础

代码为vue3框架vue2写法

纯前端项目数据基于mockjs模拟实现

虚拟产品一经售出 概不退款请谅解