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

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

开发环境

vue3+vite+js nodejs 14

分辨率

1920*1080

演示地址

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

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

效果截图

视频演示

项目模块

1.户型平均价格

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

2.一年内户型趋势分析

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

3.各分区租房占比

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

4.户型占比

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

5.分区租房数量TOP10

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

6.今日搜索热词

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

7.数字底座

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

8.百度地图

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

更新日志

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开发，购买代码请确保有相关开发基础

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