devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue大屏项目基础模板，前端驾驶舱demo，完整代码分享_可视化大屏前端demo

作者：代码探险家 | 2024-07-30 13:29:08

赞

踩

可视化大屏前端demo

前端开发工作中，经常会遇到大屏展示项目，我每次开发大屏项目，都会基于这个模板来做，模版已经实现了基础布局，基础布局是按照flex自适应开发的，每个echarts图表也都做了自动适配。后期加上美工的图片 + 样式微调就搞定啦，如果追求快速开发，直接搬走妥妥够用。

下面直接上样式：（因为没有任何背景图 和 图片资源，加上样式就会好看很多）

大屏主页面代码：bigdata.vue

  1. <template>
  2. 	<div id="big-data-container" class="big-data-container">
  3. 		<div class="head">
  4. 			<h1>人力资源管理系统驾驶舱</h1>
  5. 		</div>
  6. 		<div class="data-container">
  7. 			<div class="data-left">
  8. 				<div class="data-left-item">
  9. 					<div class="title">各事业部工时</div>
  10. 					<div id="chart-left-1" style="height: calc(100% - 30px);"></div>
  11. 					<div class="data-foot-line"></div>
  12. 				</div>
  13. 				<div class="data-left-item">
  14. 					<div class="title">员工出勤情况</div>
  15. 					<div id="chart-left-3" style="height: calc(100% - 30px);"></div>
  16. 					<div class="data-foot-line"></div>
  17. 				</div>
  18. 				<div class="data-left-item">
  19. 					<div class="title">项目工时情况</div>
  20. 					<div id="chart-left-2" style="height: calc(100% - 30px);"></div>
  21. 					<div class="data-foot-line"></div>
  22. 				</div>
  23. 			</div>
  24. 			<div class="data-center">
  25. 				<!-- <div class="title">中间位置</div> -->
  26. 				<div class="center-top-num">
  27. 					<div class="item">
  28. 						<div class="text">集团员工人数</div>
  29. 						<div class="num">1,046</div>
  30. 					</div>
  31. 					<div class="item">
  32. 						<div class="text">正式员工人数</div>
  33. 						<div class="num">966</div>
  34. 					</div>
  35. 					<div class="item">
  36. 						<div class="text">实习员工人数</div>
  37. 						<div class="num">84</div>
  38. 					</div>
  39. 					<div class="data-foot-line"></div>
  40. 				</div>
  41. 				<div class="center-top">
  42. 					<div class="title">员工活跃信息</div>
  43. 					<iview-circle :size="200" style="padding: 8px 0;"></iview-circle>
  44. 					<div class="data-foot-line"></div>
  45. 				</div>
  46. 				<div class="title">出勤情况总计</div>
  47. 				<div id="chart-center" class="chart-center"></div>
  48. 			</div>
  49. 			<div class="data-right">
  50. 				<div class="data-right-item">
  51. 					<div class="title">考勤异常走势</div>
  52. 					<div id="chart-right-1" style="height: calc(100% - 30px);"></div>
  53. 					<div class="data-foot-line"></div>
  54. 				</div>
  55. 				<div class="data-right-item">
  56. 					<div class="title">员工打卡统计</div>
  57. 					<iview-circle></iview-circle>
  58. 					<div class="data-foot-line"></div>
  59. 				</div>
  60. 				<div class="data-right-item right-3">
  61. 					<div class="title">项目工时排行榜</div>
  62. 					<div id="chart-right-3" class="right-item">
  63. 						<div class="item">
  64. 							<div class="top">排名</div>
  65. 							<div class="pro-name">项目名称</div>
  66. 							<div class="num">工时</div>
  67. 							<div class="num">人数</div>
  68. 						</div>
  69. 						<div class="item">
  70. 							<div class="top top-1">
  71. 								<span>1</span>
  72. 							</div>
  73. 							<div class="pro-name">人员管理系统</div>
  74. 							<div class="num">679</div>
  75. 							<div class="num">8</div>
  76. 						</div>
  77. 						<div class="item">
  78. 							<div class="top top-2">
  79. 								<span>2</span>
  80. 							</div>
  81. 							<div class="pro-name">生产管理系统</div>
  82. 							<div class="num">1,700</div>
  83. 							<div class="num">6</div>
  84. 						</div>
  85. 						<div class="item">
  86. 							<div class="top top-3">
  87. 								<span>3</span>
  88. 							</div>
  89. 							<div class="pro-name">智慧园区管理系统</div>
  90. 							<div class="num">366</div>
  91. 							<div class="num">3</div>
  92. 						</div>
  93. 					</div>
  94. 					<div class="boxfoot"></div>
  95. 				</div>
  96. 			</div>
  97. 		</div>
  98. 	</div>
  99. </template>
  100. <script>
  101. var echarts = require('echarts');
  102. import { chartLeft1, chartLeft2, chartLeft3, chartRight1 } from './bigdata/chart-options';
  103. import IviewCircle from './bigdata/IviewCircle';
  104. import './bigdata/layout.less';
  105. export default {
  106. 	components: {
  107. 		'iview-circle': IviewCircle
  108. 	},
  109. 	data() {
  110. 		return {};
  111. 	},
  112. 	mounted() {
  113. 		var $chartLeft1 = echarts.init(document.getElementById('chart-left-1'));
  114. 		$chartLeft1.setOption(chartLeft1);
  115.  
  116. 		var $chartLeft2 = echarts.init(document.getElementById('chart-left-2'));
  117. 		$chartLeft2.setOption(chartLeft2);
  118.  
  119. 		var $chartLeft3 = echarts.init(document.getElementById('chart-left-3'));
  120. 		$chartLeft3.setOption(chartLeft3);
  121.  
  122. 		var $chartCenter = echarts.init(document.getElementById('chart-center'));
  123. 		$chartCenter.setOption(chartRight1);
  124.  
  125. 		var $chartRight1 = echarts.init(document.getElementById('chart-right-1'));
  126. 		$chartRight1.setOption(chartRight1);
  127. 	}
  128. };
  129. </script>
  130. <style scoped>
  131. /* .chart-center {
  132.   display: flex;
  133.   border: 1px solid #0000ff;
  134.   height: 200px;
  135.   flex-direction: column;
  136.   margin-top: 20px;
  137. }
  138. .chart-center .item {
  139.   text-align: center;
  140.   border: 1px solid #00c1b3;
  141.   flex: 1;
  142. } */
  143. .right-3 {
  144. 	display: flex;
  145. 	flex-direction: column;
  146. 	/* margin-top: 20px; */
  147. }
  148.  
  149. .right-3 .right-item {
  150. 	flex: 1;
  151. 	display: flex;
  152. 	flex-direction: column;
  153. }
  154.  
  155. .right-3 .item {
  156. 	text-align: left;
  157. 	border-bottom: 1px solid #549069;
  158. 	flex: 1;
  159. 	display: flex;
  160. 	padding: 5px 10px;
  161. 	margin: 0 10px;
  162. 	font-size: 14px;
  163. 	line-height: 30px;
  164. }
  165.  
  166. .right-3 .item:last-child {
  167. 	border-bottom: 0;
  168. }
  169.  
  170. .right-3 .item > div {
  171. 	color: white;
  172. }
  173.  
  174. .right-3 .top {
  175. 	width: 60px;
  176. 	position: relative;
  177. }
  178.  
  179. .right-3 .top span {
  180. 	position: absolute;
  181. 	width: 20px;
  182. 	line-height: 20px;
  183. 	top: 5px;
  184. 	text-align: center;
  185. 	border-radius: 5px;
  186. }
  187.  
  188. .right-3 .top-1 span {
  189. 	background: #e80d0d;
  190. }
  191.  
  192. .right-3 .top-2 span {
  193. 	background: #00c935;
  194. }
  195.  
  196. .right-3 .top-3 span {
  197. 	background: #0083f4;
  198. }
  199.  
  200. .right-3 .num {
  201. 	width: 88px;
  202. }
  203.  
  204. .right-3 .pro-name {
  205. 	flex: 1;
  206. }
  207. </style>

各个关联文件：

chart-options.js

  1. var echarts = require("echarts");
  2. let chartLeft1 = {
  3.   tooltip: {
  4.     trigger: "axis",
  5.     axisPointer: {
  6.       type: "shadow"
  7.     }
  8.   },
  9.   grid: {
  10.     left: "0%",
  11.     top: "10px",
  12.     right: "0%",
  13.     bottom: "4%",
  14.     containLabel: true
  15.   },
  16.   xAxis: [
  17.     {
  18.       type: "category",
  19.       data: [
  20.         "第一事业部",
  21.         "第二事业部",
  22.         "第三事业部",
  23.         "第四事业部",
  24.         "第五事业部",
  25.         "第七事业部" 
  26.       ],
  27.       axisLine: {
  28.         show: true,
  29.         lineStyle: {
  30.           color: "rgba(255,255,255,.1)",
  31.           width: 1,
  32.           type: "solid"
  33.         }
  34.       },
  35.  
  36.       axisTick: {
  37.         show: false
  38.       },
  39.       axisLabel: {
  40.         interval: 0,
  41.         show: true,
  42.         splitNumber: 15,
  43.         textStyle: {
  44.           color: "rgba(255,255,255,.6)",
  45.           fontSize: "12"
  46.         }
  47.       }
  48.     }
  49.   ],
  50.   yAxis: [
  51.     {
  52.       type: "value",
  53.       axisLabel: {
  54.         show: true,
  55.         textStyle: {
  56.           color: "rgba(255,255,255,.6)",
  57.           fontSize: "12"
  58.         }
  59.       },
  60.       axisTick: {
  61.         show: false
  62.       },
  63.       axisLine: {
  64.         show: true,
  65.         lineStyle: {
  66.           color: "rgba(255,255,255,.1	)",
  67.           width: 1,
  68.           type: "solid"
  69.         }
  70.       },
  71.       splitLine: {
  72.         lineStyle: {
  73.           color: "rgba(255,255,255,.1)"
  74.         }
  75.       }
  76.     }
  77.   ],
  78.   series: [
  79.     {
  80.       type: "bar",
  81.       data: [200, 600, 300, 900, 1500, 1200, 600],
  82.       barWidth: "35%",
  83.       itemStyle: {
  84.         normal: {
  85.           color: "#2f89cf",
  86.           opacity: 1,
  87.           barBorderRadius: 5
  88.         }
  89.       }
  90.     }
  91.   ]
  92. };
  93.  
  94.  
  95. let chartLeft2 = {
  96.   tooltip: {
  97.     trigger: "axis",
  98.     axisPointer: {
  99.       type: "shadow"
  100.     }
  101.   },
  102.   grid: {
  103.     left: "0%",
  104.     top: "10px",
  105.     right: "0%",
  106.     bottom: "4%",
  107.     containLabel: true
  108.   },
  109.   xAxis: [
  110.     {
  111.       type: "category",
  112.       data: [
  113.         "07.01",
  114.         "07.02",
  115.         "07.03",
  116.         "07.04",
  117.         "07.05",
  118.         "07.06",
  119.       ],
  120.       axisLine: {
  121.         show: true,
  122.         lineStyle: {
  123.           color: "rgba(255,255,255,.1)",
  124.           width: 1,
  125.           type: "solid"
  126.         }
  127.       },
  128.       axisTick: {
  129.         show: false
  130.       },
  131.       axisLabel: {
  132.         interval: 0,
  133.         // rotate:50,
  134.         show: true,
  135.         splitNumber: 15,
  136.         textStyle: {
  137.           color: "rgba(255,255,255,.6)",
  138.           fontSize: "12"
  139.         }
  140.       }
  141.     }
  142.   ],
  143.   yAxis: [
  144.     {
  145.       type: "value",
  146.       axisLabel: {
  147.         show: true,
  148.         textStyle: {
  149.           color: "rgba(255,255,255,.6)",
  150.           fontSize: "12"
  151.         }
  152.       },
  153.       axisTick: {
  154.         show: false
  155.       },
  156.       axisLine: {
  157.         show: true,
  158.         lineStyle: {
  159.           color: "rgba(255,255,255,.1	)",
  160.           width: 1,
  161.           type: "solid"
  162.         }
  163.       },
  164.       splitLine: {
  165.         lineStyle: {
  166.           color: "rgba(255,255,255,.1)"
  167.         }
  168.       }
  169.     },
  170.     {
  171.       type: "value",
  172.       axisLabel: {
  173.         show: true,
  174.         textStyle: {
  175.           color: "rgba(255,255,255,.6)",
  176.           fontSize: "12"
  177.         }
  178.       },
  179.       axisTick: {
  180.         show: false
  181.       },
  182.       axisLine: {
  183.         show: true,
  184.         lineStyle: {
  185.           color: "rgba(255,255,255,.1	)",
  186.           width: 1,
  187.           type: "solid"
  188.         }
  189.       },
  190.       splitLine: {
  191.         lineStyle: {
  192.           color: "rgba(255,255,255,.1)"
  193.         }
  194.       }
  195.     }
  196.   ], series: [
  197.     {
  198.       type: "bar",
  199.       name: "销量",
  200.       data: [1200, 800, 300, 500, 560, 220],
  201.       barWidth: "25%",
  202.       itemStyle: {
  203.         normal: {
  204.           color: "#2f89cf",
  205.           opacity: 1,
  206.           barBorderRadius: 5
  207.         }
  208.       }
  209.     }, {
  210.       type: "bar",
  211.       name: "订单",
  212.       data: [1000, 750, 380, 450, 450, 120],
  213.       barWidth: "25%",
  214.       itemStyle: {
  215.         normal: {
  216.           color: "#46d000",
  217.           opacity: 1,
  218.           barBorderRadius: 5
  219.         }
  220.       }
  221.     }
  222.   ]
  223. };
  224.  
  225. let chartLeft3 = {
  226.   tooltip: {
  227.       trigger: 'axis',
  228.       axisPointer: {            // 坐标轴指示器，坐标轴触发有效
  229.           type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  230.       }
  231.   },
  232.   grid: {
  233.     left: "0%",
  234.     top: "-5px",
  235.     right: "3%",
  236.     bottom: "4%",
  237.     containLabel: true
  238.   },
  239.   xAxis: {
  240.       type: 'value',
  241.     axisLabel: {
  242.       show: true,
  243.       textStyle: {
  244.         color: "rgba(255,255,255,.6)",
  245.         fontSize: "12"
  246.       }
  247.     },
  248.     axisTick: {
  249.       show: false
  250.     },
  251.     axisLine: {
  252.       show: true,
  253.       lineStyle: {
  254.         color: "rgba(255,255,255,.1	)",
  255.         width: 1,
  256.         type: "solid"
  257.       }
  258.     },
  259.     splitLine: {
  260.       lineStyle: {
  261.         color: "rgba(255,255,255,.1)"
  262.       }
  263.     }
  264.   },
  265.   yAxis: {
  266.       type: 'category',
  267.     axisLabel: {
  268.       show: true,
  269.       textStyle: {
  270.         color: "rgba(255,255,255,.6)",
  271.         fontSize: "12"
  272.       }
  273.     },
  274.     axisTick: {
  275.       show: false
  276.     },
  277.     axisLine: {
  278.       show: true,
  279.       lineStyle: {
  280.         color: "rgba(255,255,255,.1	)",
  281.         width: 1,
  282.         type: "solid"
  283.       }
  284.     },
  285.     splitLine: {
  286.       lineStyle: {
  287.         color: "rgba(255,255,255,.1)"
  288.       }
  289.     },
  290.       data: ['周一', '周二', '周三', '周四', '周五']
  291.   },
  292.   series: [
  293.       {
  294.           name: '直接访问',
  295.           type: 'bar',
  296.           stack: '总量',
  297.           label: {
  298.               show: true,
  299.               position: 'insideRight'
  300.           },
  301.             barWidth: "55%",
  302.     itemStyle: {
  303.       normal: {
  304.         color: "#2f89cf",
  305.         opacity: 1,
  306.         barBorderRadius: 5
  307.       }
  308.     },
  309.           data: [120, 302, 400, 200, 700]
  310.       }
  311.   ]
  312. };
  313.  
  314. let chartRight1 = {
  315.   title: {},
  316.   tooltip: {
  317.     trigger: "axis",
  318.     axisPointer: {
  319.       type: "cross",
  320.       label: {
  321.         backgroundColor: "#6a7985"
  322.       }
  323.     }
  324.   },
  325.  
  326.   color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
  327.   legend: {
  328.     top: "0%",
  329.     icon: "roundRect",
  330.     data: ["白班人数", "夜班人数", "考勤异常"],
  331.     textStyle: {
  332.       color: "rgba(255,255,255,.5)",
  333.       fontSize: "12"
  334.     }
  335.   },
  336.   toolbox: {
  337.     feature: {}
  338.   },
  339.   grid: {
  340.     left: "10",
  341.     top: "20",
  342.     right: "10",
  343.     bottom: "10",
  344.     containLabel: true
  345.   },
  346.   xAxis: [
  347.     {
  348.       type: "category",
  349.       boundaryGap: false,
  350.       axisLabel: {
  351.         textStyle: {
  352.           color: "rgba(255,255,255,.6)",
  353.           fontSize: 12
  354.         }
  355.       },
  356.       axisLine: {
  357.         lineStyle: {
  358.           color: "rgba(255,255,255,.2)"
  359.         }
  360.       },
  361.       data: [
  362.         "2020.06.15",
  363.         "2020.06.16",
  364.         "2020.06.17",
  365.         "2020.06.18",
  366.         "2020.06.19",
  367.         "2020.06.20",
  368.         "2020.06.21",
  369.         "2020.06.22"
  370.       ]
  371.     }
  372.   ],
  373.   yAxis: [
  374.     {
  375.       type: "value",
  376.       axisTick: { show: false },
  377.       minInterval: 60,
  378.       axisLine: {
  379.         lineStyle: {
  380.           color: "rgba(255,255,255,.1)"
  381.         }
  382.       },
  383.       axisLabel: {
  384.         textStyle: {
  385.           color: "rgba(255,255,255,.6)",
  386.           fontSize: 12
  387.         }
  388.       },
  389.  
  390.       splitLine: {
  391.         lineStyle: {
  392.           color: "rgba(255,255,255,.1)"
  393.         }
  394.       }
  395.     }
  396.   ],
  397.   series: [
  398.     {
  399.       name: "白班人数",
  400.       type: "line",
  401.       smooth: true,
  402.       lineStyle: {
  403.         color: "#45d4ba",
  404.         width: 1
  405.       }, //线条的样式
  406.       areaStyle: {
  407.         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  408.           {
  409.             offset: 0,
  410.             color: "#83cddc"
  411.           },
  412.           {
  413.             offset: 1,
  414.             color: "#bfdffbb5"
  415.           }
  416.         ])
  417.       },
  418.       data: [5, 22, 150, 54, 1, 230, 4, 1]
  419.     },
  420.     {
  421.       name: "夜班人数",
  422.       type: "line",
  423.  
  424.       smooth: true,
  425.       lineStyle: {
  426.         color: "#04a710",
  427.         width: 1
  428.       }, //
  429.       areaStyle: {
  430.         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  431.           {
  432.             offset: 0,
  433.             color: "#0cbf22"
  434.           },
  435.           {
  436.             offset: 1,
  437.             color: "#b8f7d1b5"
  438.           }
  439.         ])
  440.       },
  441.       data: [10, 150, 1, 250, 20, 100, 10, 150]
  442.     },
  443.     {
  444.       name: "考勤异常",
  445.       type: "line",
  446.  
  447.       lineStyle: {
  448.         color: "#0864c3",
  449.         width: 1
  450.       }, //线条的样式
  451.       smooth: true,
  452.       areaStyle: {
  453.         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  454.           {
  455.             offset: 0,
  456.             color: "#29d7ff"
  457.           },
  458.           {
  459.             offset: 1,
  460.             color: "#34ccef85"
  461.           }
  462.         ])
  463.       },
  464.       data: [100, 2, 260, 1, 200, 30, 101, 40]
  465.     }
  466.   ]
  467. };
  468.  
  469.  
  470. export { chartLeft1, chartLeft2,chartLeft3, chartRight1 }

layout.less

  1.  
  2. .big-data-container {
  3.   position: absolute;
  4.   overflow: hidden;
  5.   height: 100%;
  6.   width: 100%;
  7.   background-color: #1400a8;
  8.   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
  9.   background-attachment: fixed;
  10.   background-size: cover;
  11.   .head {
  12.     height: 75px;
  13.     /* height: 1.05rem; */
  14.     background: url(./head_bg.png) no-repeat center center;
  15.     background-size: 100% 100%;
  16.     position: relative;
  17.     z-index: 100;
  18.   }
  19. }
  20.  
  21. .head h1 {
  22.   margin: 0;
  23.   color: #fff;
  24.   text-align: center;
  25.   /* font-size: .4rem; */
  26.   /* line-height: .8rem; */
  27.   line-height: 71px;
  28. }
  29.  
  30. .data-container {
  31.   /* margin: 5px 15px;
  32.         height:100%; */
  33.  
  34.   margin: 0px 15px;
  35.   position: absolute;
  36.   left: 0;
  37.   right: 0;
  38.   top: 76px;
  39.   bottom: 0;
  40. }
  41.  
  42. .data-container > div {
  43.   float: left;
  44.   /* border: 1px solid white; */
  45.   height: 100%;
  46. }
  47.  
  48. .data-center {
  49.   padding: 0 0.9rem;
  50.   width: 40%;
  51.   display: flex;
  52.   flex-direction: column;
  53.   // .center-top{
  54.   //   height: 210px;
  55.   //   background: red;
  56.   // }
  57. .chart-center{
  58.   flex: 1;
  59. }
  60. }
  61. .chart-center{
  62.   width: 100%;
  63. display: flex;
  64. //  background: white;
  65. }
  66. .data-left,
  67. .data-right {
  68.   width: 30%;
  69.   display: flex;
  70.  
  71.   flex-direction: column;
  72. }
  73.  
  74. .data-left-item,
  75. .data-right-item,.center-top,.center-top-num,.chart-center {
  76.   border: 1px solid rgba(25, 186, 139, 0.17);
  77.   padding: 0 0.2rem 0.4rem 0.15rem;
  78.   background: rgba(255, 255, 255, 0.04);
  79.   background-size: 100% auto;
  80.   position: relative;
  81.   margin-bottom: 0.15rem;
  82.   z-index: 10;
  83. }
  84.  
  85. .data-foot-line {
  86.   position: absolute;
  87.   bottom: 0;
  88.   width: 100%;
  89.   left: 0;
  90. }
  91.  
  92. .data-foot-line:before,
  93. .data-foot-line:after {
  94.   position: absolute;
  95.   width: 10px;
  96.   height:10px;
  97.   content: "";
  98.   border-bottom: 2px solid #02a6b5;
  99.   bottom: 0;
  100. }
  101.  
  102. .boxall:before,
  103. .data-foot-line:before {
  104.   border-left: 2px solid #02a6b5;
  105.   left: 0;
  106. }
  107.  
  108. .boxall:after,
  109. .data-foot-line:after {
  110.   border-right: 2px solid #02a6b5;
  111.   right: 0;
  112. }
  113.  
  114. .boxall:before,
  115. .boxall:after {
  116.   position: absolute;
  117.   width: 10px;
  118.   height: 10px;
  119.   content: "";
  120.   border-top: 2px solid #02a6b5;
  121.   top: 0;
  122. }
  123.  
  124. .data-left-item:before,
  125. .data-right-item:before,
  126. .center-top-num:before,
  127. .center-top:before{
  128.   border-left: 2px solid #02a6b5;
  129.   left: 0;
  130.   position: absolute;
  131.   width: 10px;
  132.   height:10px;
  133.   content: "";
  134.   border-top: 2px solid #02a6b5;
  135.   top: 0;
  136. }
  137.  
  138. .data-left-item:after,
  139. .data-right-item:after,
  140. .center-top-num:after,
  141. .center-top:after {
  142.   border-right: 2px solid #02a6b5;
  143.   right: 0;
  144.   position: absolute;
  145.   width: 10px;
  146.   height: 10px;
  147.   content: "";
  148.   border-top: 2px solid #02a6b5;
  149.   top: 0;
  150. }
  151.  
  152. .data-left,
  153. .data-right {
  154.   /* display: flex; */
  155. }
  156.  
  157. .data-left > .data-left-item,
  158. .data-right > .data-right-item {
  159.   flex: 1;
  160.   margin-bottom: 0.9rem;
  161. }
  162.  
  163. .data-center  .title,
  164. .data-left > .data-left-item .title,
  165. .data-right > .data-right-item .title {
  166.   /* font-size: .2rem; */
  167.   font-size: 1rem;
  168.   padding: 7px 0;
  169.   color: #fff;
  170.   text-align: center;
  171.   /* line-height: .5rem; */
  172. }
  173.  
  174. .data-center .chart-center{
  175.   width: 100%;
  176. }
  177.  
  178. .center-top-num{
  179.   height: 80px;
  180.   padding-top: 7px;
  181.   margin-bottom: 0.8rem;
  182.   display: flex;
  183.   .item{
  184.     flex: 1;
  185.     text-align: center;
  186.   }
  187.   .text{
  188.     color: #fcf0d8;
  189.     font-size: 14px;
  190.   }
  191.   .num{
  192.     font-size: 34px;
  193.     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  194.     font-weight: bold;
  195.     color: #67caca;
  196.   }
  197. }

IviewCircle.vue

  1. <template>
  2.   <div class="demo-Circle">
  3.     <div style>
  4.       <i-circle
  5.         :size="size"
  6.         :trail-width="4"
  7.         :stroke-width="5"
  8.         :percent="75"
  9.         stroke-linecap="square"
  10.         stroke-color="#43a3fb"
  11.       >
  12.         <div class="demo-Circle-custom">
  13.           <h1>1500</h1>
  14.           <p>昨日活跃用户数量</p>
  15.           <span>
  16.             占比
  17.             <i>{{1500/20000}}%</i>
  18.           </span>
  19.         </div>
  20.       </i-circle>
  21.     </div>
  22.     <div style>
  23.       <i-circle
  24.         :size="size"
  25.         :trail-width="4"
  26.         :stroke-width="5"
  27.         :percent="75"
  28.         stroke-linecap="square"
  29.         stroke-color="#43a3fb"
  30.       >
  31.         <div class="demo-Circle-custom">
  32.           <h1>12000</h1>
  33.           <p>上月活跃用户数量</p>
  34.           <span>
  35.             占比
  36.             <i>{{12000/150000}}%</i>
  37.           </span>
  38.         </div>
  39.       </i-circle>
  40.     </div>
  41.   </div>
  42. </template>
  43. <script>
  44. export default {
  45.   props:{
  46.     size:{
  47.       type:Number,
  48.       default:150
  49.     }
  50.   }
  51. }
  52. </script>
  53. <style scoped>
  54. .demo-Circle {
  55.   display: flex;
  56. }
  57. .demo-Circle > div {
  58.   flex: 1;
  59.   text-align: center;
  60. }
  61. .demo-Circle > div:first-child{
  62.   padding-left:10%;
  63. }
  64.  
  65. .demo-Circle > div:last-child{
  66.   padding-right:10%;
  67. }
  68. </style>
  69. <style lang="less" scoped>
  70. .demo-Circle-custom {
  71.   & h1 {
  72.     color:#ffffff;
  73.     font-size: 28px;
  74.     font-weight: normal;
  75.   }
  76.   & p {
  77.     color: #ece8e8;
  78.     font-size: 14px;
  79.     margin: 10px 0 15px;
  80.   }
  81.   & span {
  82.     display: block;
  83.     padding-top: 15px;
  84.     color: wheat;
  85.     font-size: 14px;
  86.     &:before {
  87.       content: "";
  88.       display: block;
  89.       width: 50px;
  90.       height: 1px;
  91.       margin: 0 auto;
  92.       background: #e0e3e6;
  93.       position: relative;
  94.       top: -15px;
  95.     }
  96.   }
  97.   & span i {
  98.     font-style: normal;
  99.     color: white;
  100.   }
  101. }
  102. </style>

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/903920
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号