房屋租赁信息看板 - vue3 数据可视化大屏

数据大屏 yekong 1074℃

vue3 数据可视化大屏 房屋租赁信息看板

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

开发环境

nodejs 16

开发环境

vue3+vite+js

分辨率

1920*1080

演示地址

vue3 数据可视化大屏 房屋租赁信息看板

旧版

演示demo:vue3 数据可视化大屏 房屋租赁信息看板

新版

演示demo:vue3 数据可视化大屏 房屋租赁信息看板

效果截图

vue3 数据可视化大屏 - 房屋租赁信息看板

视频演示

项目模块

1.户型平均价格

使用echarts渲染折线图,展示户型价格

1.户型平均价格

2.一年内户型趋势分析

使用echarts渲染多段对比折线图,展示一年内户型趋势分析

2.一年内户型趋势分析

3.各分区租房占比

使用echarts饼状图渲染我们想要的各地区租房占比

3.各分区租房占比

4.户型占比

使用饼状图展示户型图占比

4.户型占比

5.分区租房数量TOP10

使用进度条展示各个地区的租房排行榜

5.分区租房数量TOP10

6.今日搜索热词

使用echarts的词云组件爱你来展示热词

6.今日搜索热词

7.数字底座

使用数字底座展示关键数据

7.数字底座

8.百度地图

可以在百度地图中标注自己想要添加的标注信息。

百度地图

更新日志

2024年07月07日

移除部分依赖

ui界面全面更新,移除旧的浅蓝色大屏样式改为深蓝色

热词插件更换

2024年01月22日

移除node-sass等多余组件

百度地图从第三方插件变更为原生写法,避免地图加载时出现白色方块的情况。

增加jsconfig.json

更新readme.md文件

2023年08月07日 v1.1

使用mockjs 来生成模拟数据,使用axios来进行接口请求,代替原有的写死的数据。

mockjs数据生成部分代码

// 户型平均价格
// vue3 使用mockjs生成 户型平均价格接口 列表  name [一室,两室,三室,四室,以上,] value 数字随机1-100

{
    url: '/api/house-prices',
    method: 'get',
    response: () => {
        let lastValue = 0;
        const data = [
            {name: '一室', value: lastValue = Mock.Random.natural(1, 100)},
            {name: '两室', value: lastValue = Mock.Random.natural(lastValue + 1, 100)},
            {name: '三室', value: lastValue = Mock.Random.natural(lastValue + 1, 100)},
            {name: '四室', value: lastValue = Mock.Random.natural(lastValue + 1, 100)},
            {name: '以上', value: Mock.Random.natural(lastValue + 1, 100)}
        ];
        return {
            data: data,
            message: '成功',
            code: 0
        }
    },
},

接口请求封装部分代码

// 户型平均价格
export function housePrices(data) {
    return request({
        url: '/api/house-prices',
        method: 'get',
        data
    })
}

接口请求实例

使用await/async进行数据请求

async getData() {
  try {
    const res = await housePrices();
    this.list = res.data;
  } catch (err) {
    console.error(err);
  }
},

更多可视化数据大屏

100个酷炫的数据可视化大屏

源码下载

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

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

相关文件下载地址
此资源需支付 ¥100 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
房屋租赁信息看板 - vue3 数据可视化大屏