当前位置: 首页> 财经> 创投人物 > 从0开始搭建vue + flask 旅游景点数据分析系统(四):编写前端首页【数据驾驶舱】

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

时间:2025/7/12 4:56:41来源:https://blog.csdn.net/roccreed/article/details/140749716 浏览次数:0次

  • 本期我们编写数据驾驶舱页面(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的图标

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: