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