从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;;
}
1
2
3

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

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

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

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

再此基础上，再引入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>
1
2
3
4
5
6

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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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

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

3 安装 echarts

执行命令

npm install echarts vue-echarts
1

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);
1
2
3

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

然后修改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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

为了展示效果把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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

编写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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

引入到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
  }
};
1
2
3
4
5
6
7
8
9
10

修改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
2
3
4
5
6
7
8
9
10
11

完成效果：

小结

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