【数据可视化从入门到精通】核心指标组件构建⑥

父组件：Home.vue

<template><div class="home"><top-view /><sales-view /><bottom-view /><map-view /></div>
</template><script>import TopView from '../components/TopView'import SalesView from '../components/SalesView'import BottomView from '../components/BottomView'import MapView from '../components/MapView'export default {name: 'Home',components:{TopView,SalesView,BottomView,MapView}}
</script><style>.home {width: 100%;padding: 20px;background: #eee;box-sizing: border-box;}
</style>

Components:子组件

plugins：element.js按需导入组件

import Vue from 'vue'
import { Card,Row,col } from 'element-ui'Vue.use(Card)
Vue.use(Row)
Vue.use(col)

构建TopView.vue组件

<template><div class="top-view"><el-row :gutter="20"><el-col :span="6"><el-card shadow="hover">1</el-card></el-col><el-col :span="6"><el-card shadow="hover">2</el-card></el-col><el-col :span="6"><el-card shadow="hover">3</el-card></el-col><el-col :span="6"><el-card shadow="hover">4</el-card></el-col></el-row></div>
</template><script>export default {name:'TopView',components: {}}
</script><style lang="scss" scoped>
</style>

如下效果

构建公共卡片CommonCard.vue组件

<template><div class="common-card"><div class="title">{{title}}</div><div class="value">{{value}}</div><div class="chart"><slot></slot></div><div class="line" /><div class="total"><slot name="footer"></slot></div></div>
</template><script>export default {props: {title: String,value: [String, Number]}}
</script><style lang="scss" scoped>.title {font-size: 12px;color: #999;}.value {font-size: 25px;color: #000;margin-top: 5px;letter-spacing: 1px;}.chart {height: 50px;}.line {margin: 10px 0;border-top: 1px solid #eee;}.total {font-size: 12px;color: #666;}
</style><style lang="scss">.emphasis {margin-left: 5px;color: #333;font-weight: 700;}.increase {width: 0;height: 0;border-width: 3px;border-color: transparent transparent red transparent;border-style: solid;margin: 0 0 3px 5px;}.decrease {width: 0;height: 0;border-width: 3px;border-color: green transparent transparent transparent;border-style: solid;margin: 3px 0 0 5px;}
</style>

构建各个卡片内容组件

分别对应下面的-销售-订单-用户模块

累计销售额组件构建TotalSales.vue

<template><common-cardtitle="累计销售额":value="salesToday"><template><div class="compare-wrapper"><div class="compare"><span>日同比</span><span class="emphasis">{{salesGrowthLastDay}}</span><div class="increase" /></div><div class="compare"><span>月同比</span><span class="emphasis">{{salesGrowthLastMonth}}</span><div class="decrease" /></div></div></template><template v-slot:footer><span>昨日销售额 </span><span class="emphasis">{{salesLastDay}}</span></template></common-card>
</template><script>import commonCardMixin from '../../mixins/commonCardMixin'import commonDataMixin from '../../mixins/commonDataMixin'export default {mixins: [commonCardMixin, commonDataMixin]}
</script><style lang="scss" scoped>.compare-wrapper {height: 100%;display: flex;flex-direction: column;justify-content: center;.compare {display: flex;align-items: center;font-size: 12px;margin-top: 3px;color: #666;}}
</style>

效果图

累计订单组件构建TotalOrders.vue

<template><common-cardtitle="累计订单量":value="orderToday"><template><v-chart :options="getOptions()" /></template><template v-slot:footer><span>昨日订单量 </span><span class="emphasis">{{orderLastDay}}</span></template></common-card>
</template><script>import commonCardMixin from '../../mixins/commonCardMixin'import commonDataMixin from '../../mixins/commonDataMixin'export default {mixins: [commonCardMixin, commonDataMixin],methods: {getOptions() {return this.orderTrend.length > 0 ? {xAxis: {type: 'category',show: false,boundaryGap: false},yAxis: {show: false},series: [{type: 'line',data: this.orderTrend,areaStyle: {color: 'purple'},lineStyle: {width: 0},itemStyle: {opacity: 0},smooth: true}],grid: {top: 0,bottom: 0,left: 0,right: 0}} : null}}}
</script>

订单量组建效果

今日用户组件构建TotalOrders.vue

<template><common-cardtitle="今日交易用户数":value="orderUser"><template><v-chart :options="getOptions()" /></template><template v-slot:footer><span>退货率 </span><span class="emphasis">{{returnRate}}</span></template></common-card>
</template><script>import commonCardMixin from '../../mixins/commonCardMixin'import commonDataMixin from '../../mixins/commonDataMixin'export default {mixins: [commonCardMixin, commonDataMixin],methods: {getOptions() {return {color: ['#3398DB'],tooltip: {},series: [{name: '用户实时交易量',type: 'bar',data: this.orderUserTrend,barWidth: '60%'}],xAxis: {type: 'category',data: this.orderUserTrendAxis,show: false},yAxis: {show: false},grid: {top: 0,left: 0,bottom: 0,right: 0}}}}}
</script><style lang="scss" scoped>
</style>

效果

全部用户组件构建TotalUsers.vue

<template><common-cardtitle="累计用户数":value="userToday"><template><v-chart :options="getOptions()" /></template><template v-slot:footer><div class="total-users-footer"><span>日同比</span><span class="emphasis">{{userGrowthLastDay}}</span><div class="increase" /><span class="month">月同比</span><span class="emphasis">{{userGrowthLastMonth}}</span><div class="decrease" /></div></template></common-card>
</template><script>import commonCardMixin from '../../mixins/commonCardMixin'import commonDataMixin from '../../mixins/commonDataMixin'export default {mixins: [commonCardMixin, commonDataMixin],methods: {getOptions() {return {grid: {left: 0,right: 0,top: 0,bottom: 0},xAxis: {type: 'value',show: false},yAxis: {type: 'category',show: false},series: [{name: '上月平台用户数',type: 'bar',stack: '总量',data: [this.userLastMonth],barWidth: 10,itemStyle: {color: '#45c946'}}, {name: '今日平台用户数',type: 'bar',stack: '总量',data: [this.userTodayNumber],itemStyle: {color: '#eee'}}, {type: 'custom',stack: '总量',data: [this.userLastMonth],renderItem: (params, api) => {const value = api.value(0)const endPoint = api.coord([value, 0])return {type: 'group',position: endPoint,children: [{type: 'path',shape: {d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',x: -5,y: -20,width: 10,height: 10,layout: 'cover'},style: {fill: '#45c946'}}, {type: 'path',shape: {d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',x: -5,y: 10,width: 10,height: 10,layout: 'cover'},style: {fill: '#45c946'}}]}}}]}}}}
</script><style lang="scss" scoped>.total-users-footer {display: flex;align-items: center;.month {margin-left: 10px;}}
</style>

到这里核心指标TopViews.vue组件构建完成啦

【数据可视化从入门到精通】核心指标组件构建⑥相关推荐

《Tableau数据可视化从入门到精通》之Tableau系列软件概况
1.5 Tableau软件概况 Tableau公司成立于2003年,斯坦福大学的三位校友Christian Chabot(首席执行官).Chris Stole(开发总监)以及Pat Hanrahan( ...
【数据可视化从入门到精通】指南-发展史-数据可视化应用场景-发展前景-技术选型①
实战「外卖实战」数据大屏基于 Vue 3.0 + EChart 4.0 开发前置学习具备javascript.html.css的基础具备Vue的使用基础了解npm和webpack的基本概念 ...
《Tableau数据可视化从入门到精通》之序言
大数据时代正在变革着我们的生活.工作和思维,如何让大数据更有意义,使之更贴近大多数人,最重要的手段之一就是数据可视化,数据可视化是关于数据视觉表现形式的技术,这种数据的视觉表现形式被定义为,一种以某种 ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
赠书！《R语言数据分析与可视化从入门到精通》
专注系列化.高质量的R语言教程 R语言是一个自由.免费.源代码开放的编程语言和环境,是S语言的一个分支,多个操作系统都能方便且免费地使用它.R语言不仅具有众多经常更新的统计分析函数,还具有完整的编程功 ...
python数据分析可视化实例-Python数据分析与可视化从入门到精通
(1)没有高深理论,每章都以实例为主,读者参考书中源码运行,就能得到与书中一样的结果.(2)专注于Python数据分析与可视化操作中实际用到的技术.相比大而全的书籍资料,本书能让读者尽快上手,开始项目 ...
python可视化数据分析-Python数据分析与可视化从入门到精通
(1)没有高深理论,每章都以实例为主,读者参考书中源码运行,就能得到与书中一样的结果.(2)专注于Python数据分析与可视化操作中实际用到的技术.相比大而全的书籍资料,本书能让读者尽快上手,开始项目 ...
AI基础：数据可视化简易入门（Matplotlib 和 Seaborn）
0 导语 Matplotlib 是一个 Python 的 2D 绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形 . 通过 Matplotlib,开发者可以仅需要几行代码,便可以生 ...
【Python数据科学快速入门系列 | 06】Matplotlib数据可视化基础入门(一)
这是机器未来的第52篇文章原文首发地址:https://robotsfutures.blog.csdn.net/article/details/126899226 <Python数据科学快速入 ...

【数据可视化从入门到精通】核心指标组件构建⑥

父组件：Home.vue

Components:子组件

plugins：element.js按需导入组件

构建TopView.vue组件

构建公共卡片CommonCard.vue组件

构建各个卡片内容组件

累计销售额组件构建TotalSales.vue

累计订单组件构建TotalOrders.vue

今日用户组件构建TotalOrders.vue

全部用户组件构建TotalUsers.vue

【数据可视化从入门到精通】核心指标组件构建⑥相关推荐

最新文章

热门文章