网站推广策划思维导图,网站设计团队分工,大连网页设计学校,网站开发语言比例本期我们编写数据驾驶舱页面(Dashboard)这个页面。主要任务是引入echarts 组件编写数据驾驶舱页面。
视频教程后续会更新在我的B站#xff1a;https://space.bilibili.com/1583208775?spm_id_from666.25.0.0 推荐从教程第一集开始从零开始学习#xff1a;https://blog.csdn…
本期我们编写数据驾驶舱页面(Dashboard)这个页面。主要任务是引入echarts 组件编写数据驾驶舱页面。
视频教程后续会更新在我的B站https://space.bilibili.com/1583208775?spm_id_from666.25.0.0 推荐从教程第一集开始从零开始学习https://blog.csdn.net/roccreed/article/details/140734085?spm1001.2014.3001.5501
1 美化菜单
先美化下菜单给aside 添加一个class“aside”然后写一下背景颜色样式:
.aside{background-color: #545c64;;
}给el-menu添加3个有关颜色的属性删掉原来的颜色配置
el-menu :default-activeactiveIndexbackground-color#545c64text-color#fffactive-text-color#ffd04bclassel-menu-vertical同时把菜单的名字也修改一下 el-menu-item index/dashboard clicknavigateTo(/dashboard)数据驾驶舱/el-menu-itemel-menu-item index/users clicknavigateTo(/users)用户管理/el-menu-item再此基础上再引入elemnt-ui自带的图标方案进一步美化菜单为代码添加图标 el-menu-item index/dashboard clicknavigateTo(/dashboard)i classel-icon-s-marketing/i数据驾驶舱/el-menu-itemel-menu-item index/users clicknavigateTo(/users)i classel-icon-s-custom/i用户管理/el-menu-item然后就获得了和官方菜单例子中一样的配色了 2 数据驾驶舱页面-布局编写
还是先搞定布局修改Dashboard.vue页面这里使用官方的row和col来简单实现布局效果可以参考官方文档https://element.eleme.cn/#/zh-CN/component/layout
templatedivel-row :gutter20!-- Top chart --el-col :span24div classchart stylebackground-color: #f56c6c; height: 300px;Top Chart/div/el-col/el-rowel-row :gutter20 stylemargin-top: 20px;!-- Bottom left chart --el-col :span12div classchart stylebackground-color: #67c23a; height: 300px;Bottom Left Chart/div/el-col!-- Bottom right chart --el-col :span12div classchart stylebackground-color: #409eff; height: 300px;Bottom Right Chart/div/el-col/el-row/div
/templatescript
export default {name: Dashboard,
};
/scriptstyle 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-echartsvue-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
templatedivv-chart :optionchartOptions stylewidth: 100%; height: 300px;/v-chart/div
/templatescript
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],},],},};},
};
/scriptstyle 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 :span24div classchart stylebackground-color: #f4eeee; height: 300px;LineChart//div/el-col为了展示效果把div的背景色改为淡灰色这样就完成了第一个图形的编写 6 编写柱状图 饼图 组件
继续在components下编写BarChart.vue
templatedivv-chart :optionchartOptions stylewidth: 100%; height: 400px;/v-chart/div
/templatescript
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,},},],},};},
};
/scriptstyle scoped
/* 添加一些样式使图表看起来更好 */
/style
编写PieChart.vue
templatedivv-chart :optionchartOptions stylewidth: 100%; height: 400px;/v-chart/div
/templatescript
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}]}]},};},
};
/scriptstyle 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 :span12div classchart stylebackground-color: #f4eeee; height: 400px;bar-chart//div/el-col!-- Bottom right chart --el-col :span12div classchart stylebackground-color: #f4eeee; height: 400px;pie-chart//div/el-col完成效果 小结
这期内容非常多啊1本节我们完成了echarts的引入同时做了3个静态的图形动态的数据等待后端程序搭建起来后就可以实现。2本节在菜单中引入了element-ui的图标
