从0开始搭建vue + flask 旅游景点数据分析系统(四):编写前端首页【数据驾驶舱】

  • 本期我们编写数据驾驶舱页面(Dashboard)这个页面。
  • 主要任务是引入echarts 组件编写数据驾驶舱页面。

视频教程后续会更新在我的B站:https://space.bilibili.com/1583208775?spm_id_from=666.25.0.0
推荐从教程第一集开始从零开始学习:https://blog.csdn.net/roccreed/article/details/140734085?spm=1001.2014.3001.5501

1 美化菜单

先美化下菜单,给aside 添加一个class=“aside”,然后写一下背景颜色样式:

.aside{background-color: #545c64;;
}

给el-menu添加3个有关颜色的属性,删掉原来的颜色配置

<el-menu :default-active="activeIndex"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"class="el-menu-vertical">

同时,把菜单的名字也修改一下

  <el-menu-item index="/dashboard" @click="navigateTo('/dashboard')">数据驾驶舱</el-menu-item><el-menu-item index="/users" @click="navigateTo('/users')">用户管理</el-menu-item>

再此基础上,再引入elemnt-ui自带的图标方案,进一步美化菜单,为代码添加图标:

       	<el-menu-item index="/dashboard" @click="navigateTo('/dashboard')"><i class="el-icon-s-marketing"></i>数据驾驶舱</el-menu-item><el-menu-item index="/users" @click="navigateTo('/users')"><i class="el-icon-s-custom"></i>用户管理</el-menu-item>

然后就获得了和官方菜单例子中一样的配色了:

在这里插入图片描述

2 数据驾驶舱页面-布局编写

还是先搞定布局,修改Dashboard.vue页面,这里使用官方的row和col来简单实现布局效果,可以参考官方文档:https://element.eleme.cn/#/zh-CN/component/layout

<template><div><el-row :gutter="20"><!-- Top chart --><el-col :span="24"><div class="chart" style="background-color: #f56c6c; height: 300px;">Top Chart</div></el-col></el-row><el-row :gutter="20" style="margin-top: 20px;"><!-- Bottom left chart --><el-col :span="12"><div class="chart" style="background-color: #67c23a; height: 300px;">Bottom Left Chart</div></el-col><!-- Bottom right chart --><el-col :span="12"><div class="chart" style="background-color: #409eff; height: 300px;">Bottom Right Chart</div></el-col></el-row></div>
</template><script>
export default {name: 'Dashboard',
};
</script><style scoped>
.chart {display: flex;align-items: center;justify-content: center;color: white;font-size: 20px;border-radius: 10px;
}
</style>

使用不同颜色展示布局编写的成果:

在这里插入图片描述

下一步开始集成 echarts 和 vue-echarts,然后把上图中三个图形替换为echarts的图形。

3 安装 echarts

执行命令

npm install echarts vue-echarts

vue-echarts 现在已经是7.0-beta版本了,可以查看其github页面获得更多信息:https://github.com/ecomfe/vue-echarts/blob/main/README.zh-Hans.md

4 注册 vue-echarts 组件

修改main.js,添加这3行代码

import ECharts from 'vue-echarts';
import 'echarts';
Vue.component('v-chart', ECharts);

5 编写折线图组件

下面编写一个折线图组件,并且放到Dashboard.vue中的Top Chart的位置。

在components文件夹下创建LineChart.vue:

<template><div><v-chart :option="chartOptions" style="width: 100%; height: 300px;"></v-chart></div>
</template><script>
export default {name: 'TouristSpotRanking',data() {return {chartOptions: {title: {text: '旅游景点评论排名',},tooltip: {trigger: 'axis',},legend: {data: ['评论数'],},xAxis: {type: 'category',data: ['景点A', '景点B', '景点C', '景点D', '景点E'],},yAxis: {type: 'value',},series: [{name: '评论数',type: 'line',data: [820, 932, 901, 934, 1290],},],},};},
};
</script><style scoped>
/* 添加一些样式使图表看起来更好 */
</style>

然后修改Dashboard.vue文件

# 先把.chart样式中的flex去掉
.chart {/*display: flex;*/align-items: center;justify-content: center;color: white;font-size: 20px;border-radius: 10px;
}# 引入LineChart组件
<script>
import LineChart from "@/components/LineChart";export default {name: 'Dashboard',components: {LineChart}
};
</script># 修改原本的红色区域的代码
<el-col :span="24"><div class="chart" style="background-color: #f4eeee; height: 300px;"><LineChart/></div></el-col>

为了展示效果把div的背景色改为淡灰色,这样就完成了第一个图形的编写:

在这里插入图片描述

6 编写柱状图 & 饼图 组件

继续在components下编写BarChart.vue

<template><div><v-chart :option="chartOptions" style="width: 100%; height: 400px;"></v-chart></div>
</template><script>
export default {name: 'TouristSpotRating',data() {return {chartOptions: {title: {text: '旅游景点评分排名',},tooltip: {trigger: 'axis',},xAxis: {type: 'category',data: ['景点A', '景点B', '景点C', '景点D', '景点E'],},yAxis: {type: 'value',max: 10,},series: [{name: '评分',type: 'bar',data: [8.5, 9.0, 7.5, 9.3, 8.0],itemStyle: {color: '#67c23a',},},],},};},
};
</script><style scoped>
/* 添加一些样式使图表看起来更好 */
</style>

编写PieChart.vue

<template><div><v-chart :option="chartOptions" style="width: 100%; height: 400px;"></v-chart></div>
</template><script>
export default {name: 'PieChart',data() {return {chartOptions: {title: {text: '日本景点城市分布'},tooltip: {},series: [{type: 'pie',data: [{name:'东京',value:104},{name:'大阪',value:81},{name:'京都',value:47},{name:'横滨',value:51},{name:'名古屋',value:62}]}]},};},
};
</script><style scoped>
/* 添加一些样式使图表看起来更好 */
</style>

引入到Dashboard.vue中

import LineChart from "@/components/LineChart";
import BarChart from "@/components/BarChart";
import PieChart from "@/components/PieChart";export default {name: 'Dashboard',components: {LineChart, BarChart, PieChart}
};

修改template部分

<el-col :span="12"><div class="chart" style="background-color: #f4eeee; height: 400px;"><bar-chart/></div></el-col><!-- Bottom right chart --><el-col :span="12"><div class="chart" style="background-color: #f4eeee; height: 400px;"><pie-chart/></div></el-col>

完成效果:

在这里插入图片描述

小结

这期内容非常多啊(1)本节我们完成了echarts的引入,同时做了3个静态的图形,动态的数据等待后端程序搭建起来后就可以实现。(2)本节在菜单中引入了element-ui的图标

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/876932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实验室责任人员管理保障实训系统安全

在智慧校园的实训管理生态中&#xff0c;实验室责任人员的角色犹如精密机器中的关键齿轮&#xff0c;他们不仅是实验室安全与高效运转的守护者&#xff0c;更是实训教学质量的直接塑造者。这一角色的重要性&#xff0c;在智慧校园的数字化转型中得到了前所未有的凸显&#xff0…

Linux系统配置STM32的开发环境(代码编辑,编译,下载调试)

常见的stm32开发都是直接使用keil-MDK工具的&#xff0c;这是个集成开发环境&#xff0c;包含了代码编辑&#xff0c;编译&#xff0c;下载&#xff0c;调试&#xff0c;等功能&#xff0c;而且keil还是个图形化操作工具&#xff0c;直接可以点击图标案件就可以实现编译下载啥的…

Tableau入门|数据可视化与仪表盘搭建

原视频链接&#xff08;up:戴戴戴师兄&#xff09;&#xff0c;文章为笔者的自学笔记&#xff0c;用于复习回顾&#xff0c;原视频下方有原up整理的笔记&#xff0c;更加直观便捷。因为视频中间涉及的细节较多&#xff0c;建议一边操作&#xff0c;一边学习。 整体介绍 可视化…

set,map(java)

前言&#xff1a;要了解set和map&#xff0c;首先需要对搜索树和哈希有一定的了解&#xff0c;才能进一步深入的了解set和map。 1.搜索树 &#xff08;1&#xff09;性质&#xff1a; 若它的左子树不为空&#xff0c;则左子树上所有节点值都小于根节点的值。 若它的右子树不…

【单机锁】实现原理

文章目录 1.互斥锁 sync.Mutex 的实现原理&#xff1b;1.1获取策略有如下两种&#xff1a;1.2sync.Mutex的方案1.2.1具体方案如下&#xff1a;1.2.2转换的条件&#xff1a;1.2.3运行的两种模式&#xff1a;1.2.4两种模式的转换条件1.2.5唤醒标识&#xff1a; 1.3源码走读 2. sy…

猫头虎分享:PyTorch异常ModuleNotFoundError: No module named ‘torch’解决方案

&#x1f42f; 猫头虎分享&#xff1a;PyTorch异常ModuleNotFoundError: No module named ‘torch’解决方案 &#x1f4bb; 摘要 在本篇博客中&#xff0c;我们将深入探讨如何解决PyTorch中常见的“ModuleNotFoundError: No module named ‘torch’”错误。通过详细的步骤指…

差分法求解 Burgers 方程(附完整MATLAB 及 Python代码)

Burgers 方程的数值解及误差分析 引言 Burgers 方程是一个非线性偏微分方程&#xff0c;在流体力学、非线性声学和交通流理论中有广泛应用。本文将通过数值方法求解带粘性的 Burgers 方程&#xff0c;并分析其误差。 方程模型 Burgers 方程的形式为&#xff1a; u t u u …

Jmeter下载、安装、永久汉化(Windows环境)

1、JDK下载 JDK8下载地址https://www.oracle.com/java/technologies/downloads/#java8-windows JDK8的Windows的64位&#xff1a; 2、Jmeter下载 jmeter下载地址https://jmeter.apache.org/download_jmeter.cgi 3、配置环境变量 安装好后&#xff0c;把jdk和jmeter都配置到…

Docker从入门到实践教程(电子版)

前言 Docker 是个伟大的项目&#xff0c;它彻底释放了虚拟化的威力&#xff0c;极大降低了云计算资源供应的成本&#xff0c;同时让应用的 分发、测试、部署和分发都变得前所未有的高效和轻松&#xff01; 本电子书既适用于具备基础 Linux 知识的 Docker 初学者&#xff0c;也…

隧道可视化:实时监控保障行车安全

通过图扑可视化实现隧道的实时监控、数据分析及智能报警系统&#xff0c;提供全面的隧道管理和决策支持&#xff0c;提升行车安全&#xff0c;优化维护策略&#xff0c;确保交通顺畅。

【b站-湖科大教书匠】6 应用层 - 计算机网络微课堂

课程地址&#xff1a;【计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09;】 https://www.bilibili.com/video/BV1c4411d7jb/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 目录 6 应用层 6.1 应用层概述 6.2 客户-服务器方式和对等方…

PsExec横向:IPCPTHPTT

一.IPC下的PsExec 二.PTH下的psexec&#xff08;CS操作&#xff09; 三.PTT下的psexec PsExec工具&#xff1a; psexec 是 windows 下非常好的一款远程命令行工具。psexec的使用不需要对方主机开方3389端口&#xff0c;只需要对方开启admin$共享和ipc$ (该共享默认开启&#…

Spring boot 后端向前端发送日期时间发现少了8小时

问题 数据库 后端的控制台输出 前端控制台输出 可以发现少了8小时 问题 springboot 向前端响应数据是默认 Json 格式&#xff0c;所以会有类型转换&#xff0c;springboot 就通过 Jackson 来对 data 类型数据进行转换&#xff0c;但是Jackson 类型的时区是 GMT&#xff0c;与…

Google AI非坦途

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Pytorch框架之神经网络

一、全连接神经网络的整体结构 二、全连接神经网络的单元结构 找出一组w,b使得结果最优 三、常见激活函数 四、前向传播 学习率是指训练模型时每次迭代更新模型参数的步长。 五、梯度下降法 六、反向传播计算 七、总结 1、准备数据 2、搭建模型 3、开始训练(设置学习率、…

【TS】TypeScript中的接口(Interface):对象类型的强大工具

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 TypeScript中的接口(Interface):对象类型的强大工具引言1. 接口的基本概念1.1 什…

【基于PSINS】UKF/SSUKF对比的MATLAB程序

UKF与SSUKF UKF是&#xff1a;无迹卡尔滤波 SSUKF是&#xff1a;简化超球面无迹卡尔曼滤波 UKF 相较于传统的KF算法&#xff0c;UKF能够更好地处理非线性系统&#xff0c;并且具有更高的估计精度。它适用于多种应用场景&#xff0c;如机器人定位导航、目标跟踪、信号处理等。…

【人工智能】深度剖析:Midjourney与Stable Diffusion的全面对比

文章目录 &#x1f34a;1 如何选择合适的AI绘画工具1.1 个人需求选择1.2 比较工具特点1.3 社区和资源 &#x1f34a;2 Midjourney VS Stable Diffusion&#xff1a;深度对比与剖析 2.1 使用费用对比 2.2 使用便捷性与系统兼容性对比 2.3 开源与闭源对比 2.4 图片质量对比 2.5 上…

19145 最长无重复子数组

这个问题可以使用滑动窗口的方法来解决。我们可以使用两个指针&#xff0c;一个指向子数组的开始&#xff0c;一个指向子数组的结束。然后我们使用一个哈希表来记录每个元素最后出现的位置。当我们遇到一个已经在子数组中出现过的元素时&#xff0c;我们就将开始指针移动到这个…

Mac文件拷贝到移动硬盘怎么做Mac拷贝之后Win电脑里看不到

在日常使用mac电脑的过程中&#xff0c;我们经常需要将一些重要的文件备份到外部硬盘上&#xff0c;以防止数据丢失或电脑故障。传输文件到硬盘可以通过多种方法实现&#xff0c;比如拖拽或者复制至移动硬盘&#xff0c;但有时也会遇到移动硬盘无法粘贴&#xff0c;或拷贝后无法…