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

已于 2024-08-05 10:27:29 修改
阅读量1k 收藏 1
点赞数 8
文章标签： 前端 vue.js javascript
于 2024-07-10 13:59:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy55gc25112/article/details/140321989
版权

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

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

大屏主页面代码：bigdata.vue

<template>
	<div id="big-data-container" class="big-data-container">
		<div class="head">
			<h1>人力资源管理系统驾驶舱</h1>
		</div>
		<div class="data-container">
			<div class="data-left">
				<div class="data-left-item">
					<div class="title">各事业部工时</div>
					<div id="chart-left-1" style="height: calc(100% - 30px);"></div>
					<div class="data-foot-line"></div>
				</div>
				<div class="data-left-item">
					<div class="title">员工出勤情况</div>
					<div id="chart-left-3" style="height: calc(100% - 30px);"></div>
					<div class="data-foot-line"></div>
				</div>
				<div class="data-left-item">
					<div class="title">项目工时情况</div>
					<div id="chart-left-2" style="height: calc(100% - 30px);"></div>
					<div class="data-foot-line"></div>
				</div>
			</div>
			<div class="data-center">
				<!-- <div class="title">中间位置</div> -->
				<div class="center-top-num">
					<div class="item">
						<div class="text">集团员工人数</div>
						<div class="num">1,046</div>
					</div>
					<div class="item">
						<div class="text">正式员工人数</div>
						<div class="num">966</div>
					</div>
					<div class="item">
						<div class="text">实习员工人数</div>
						<div class="num">84</div>
					</div>
					<div class="data-foot-line"></div>
				</div>
				<div class="center-top">
					<div class="title">员工活跃信息</div>
					<iview-circle :size="200" style="padding: 8px 0;"></iview-circle>
					<div class="data-foot-line"></div>
				</div>
				<div class="title">出勤情况总计</div>
				<div id="chart-center" class="chart-center"></div>
			</div>
			<div class="data-right">
				<div class="data-right-item">
					<div class="title">考勤异常走势</div>
					<div id="chart-right-1" style="height: calc(100% - 30px);"></div>
					<div class="data-foot-line"></div>
				</div>
				<div class="data-right-item">
					<div class="title">员工打卡统计</div>
					<iview-circle></iview-circle>
					<div class="data-foot-line"></div>
				</div>
				<div class="data-right-item right-3">
					<div class="title">项目工时排行榜</div>
					<div id="chart-right-3" class="right-item">
						<div class="item">
							<div class="top">排名</div>
							<div class="pro-name">项目名称</div>
							<div class="num">工时</div>
							<div class="num">人数</div>
						</div>
						<div class="item">
							<div class="top top-1">
								<span>1</span>
							</div>
							<div class="pro-name">人员管理系统</div>
							<div class="num">679</div>
							<div class="num">8</div>
						</div>
						<div class="item">
							<div class="top top-2">
								<span>2</span>
							</div>
							<div class="pro-name">生产管理系统</div>
							<div class="num">1,700</div>
							<div class="num">6</div>
						</div>
						<div class="item">
							<div class="top top-3">
								<span>3</span>
							</div>
							<div class="pro-name">智慧园区管理系统</div>
							<div class="num">366</div>
							<div class="num">3</div>
						</div>
					</div>
					<div class="boxfoot"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
var echarts = require('echarts');
import { chartLeft1, chartLeft2, chartLeft3, chartRight1 } from './bigdata/chart-options';
import IviewCircle from './bigdata/IviewCircle';
import './bigdata/layout.less';
export default {
	components: {
		'iview-circle': IviewCircle
	},
	data() {
		return {};
	},
	mounted() {
		var $chartLeft1 = echarts.init(document.getElementById('chart-left-1'));
		$chartLeft1.setOption(chartLeft1);

		var $chartLeft2 = echarts.init(document.getElementById('chart-left-2'));
		$chartLeft2.setOption(chartLeft2);

		var $chartLeft3 = echarts.init(document.getElementById('chart-left-3'));
		$chartLeft3.setOption(chartLeft3);

		var $chartCenter = echarts.init(document.getElementById('chart-center'));
		$chartCenter.setOption(chartRight1);

		var $chartRight1 = echarts.init(document.getElementById('chart-right-1'));
		$chartRight1.setOption(chartRight1);
	}
};
</script>
<style scoped>
/* .chart-center {
  display: flex;
  border: 1px solid #0000ff;
  height: 200px;
  flex-direction: column;
  margin-top: 20px;
}
.chart-center .item {
  text-align: center;
  border: 1px solid #00c1b3;
  flex: 1;
} */
.right-3 {
	display: flex;
	flex-direction: column;
	/* margin-top: 20px; */
}

.right-3 .right-item {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.right-3 .item {
	text-align: left;
	border-bottom: 1px solid #549069;
	flex: 1;
	display: flex;
	padding: 5px 10px;
	margin: 0 10px;
	font-size: 14px;
	line-height: 30px;
}

.right-3 .item:last-child {
	border-bottom: 0;
}

.right-3 .item > div {
	color: white;
}

.right-3 .top {
	width: 60px;
	position: relative;
}

.right-3 .top span {
	position: absolute;
	width: 20px;
	line-height: 20px;
	top: 5px;
	text-align: center;
	border-radius: 5px;
}

.right-3 .top-1 span {
	background: #e80d0d;
}

.right-3 .top-2 span {
	background: #00c935;
}

.right-3 .top-3 span {
	background: #0083f4;
}

.right-3 .num {
	width: 88px;
}

.right-3 .pro-name {
	flex: 1;
}
</style>

各个关联文件：

chart-options.js

var echarts = require("echarts");
let chartLeft1 = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    left: "0%",
    top: "10px",
    right: "0%",
    bottom: "4%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: [
        "第一事业部",
        "第二事业部",
        "第三事业部",
        "第四事业部",
        "第五事业部",
        "第七事业部" 
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 1,
          type: "solid"
        }
      },

      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      type: "bar",
      data: [200, 600, 300, 900, 1500, 1200, 600],
      barWidth: "35%",
      itemStyle: {
        normal: {
          color: "#2f89cf",
          opacity: 1,
          barBorderRadius: 5
        }
      }
    }
  ]
};


let chartLeft2 = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    left: "0%",
    top: "10px",
    right: "0%",
    bottom: "4%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: [
        "07.01",
        "07.02",
        "07.03",
        "07.04",
        "07.05",
        "07.06",
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          width: 1,
          type: "solid"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    },
    {
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,.1	)",
          width: 1,
          type: "solid"
        }
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ], series: [
    {
      type: "bar",
      name: "销量",
      data: [1200, 800, 300, 500, 560, 220],
      barWidth: "25%",
      itemStyle: {
        normal: {
          color: "#2f89cf",
          opacity: 1,
          barBorderRadius: 5
        }
      }
    }, {
      type: "bar",
      name: "订单",
      data: [1000, 750, 380, 450, 450, 120],
      barWidth: "25%",
      itemStyle: {
        normal: {
          color: "#46d000",
          opacity: 1,
          barBorderRadius: 5
        }
      }
    }
  ]
};

let chartLeft3 = {
  tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
  },
  grid: {
    left: "0%",
    top: "-5px",
    right: "3%",
    bottom: "4%",
    containLabel: true
  },
  xAxis: {
      type: 'value',
    axisLabel: {
      show: true,
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,.1	)",
        width: 1,
        type: "solid"
      }
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)"
      }
    }
  },
  yAxis: {
      type: 'category',
    axisLabel: {
      show: true,
      textStyle: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,.1	)",
        width: 1,
        type: "solid"
      }
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)"
      }
    },
      data: ['周一', '周二', '周三', '周四', '周五']
  },
  series: [
      {
          name: '直接访问',
          type: 'bar',
          stack: '总量',
          label: {
              show: true,
              position: 'insideRight'
          },
            barWidth: "55%",
    itemStyle: {
      normal: {
        color: "#2f89cf",
        opacity: 1,
        barBorderRadius: 5
      }
    },
          data: [120, 302, 400, 200, 700]
      }
  ]
};

let chartRight1 = {
  title: {},
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },

  color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
  legend: {
    top: "0%",
    icon: "roundRect",
    data: ["白班人数", "夜班人数", "考勤异常"],
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12"
    }
  },
  toolbox: {
    feature: {}
  },
  grid: {
    left: "10",
    top: "20",
    right: "10",
    bottom: "10",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      },
      data: [
        "2020.06.15",
        "2020.06.16",
        "2020.06.17",
        "2020.06.18",
        "2020.06.19",
        "2020.06.20",
        "2020.06.21",
        "2020.06.22"
      ]
    }
  ],
  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      minInterval: 60,
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },

      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      name: "白班人数",
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#45d4ba",
        width: 1
      }, //线条的样式
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#83cddc"
          },
          {
            offset: 1,
            color: "#bfdffbb5"
          }
        ])
      },
      data: [5, 22, 150, 54, 1, 230, 4, 1]
    },
    {
      name: "夜班人数",
      type: "line",

      smooth: true,
      lineStyle: {
        color: "#04a710",
        width: 1
      }, //
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#0cbf22"
          },
          {
            offset: 1,
            color: "#b8f7d1b5"
          }
        ])
      },
      data: [10, 150, 1, 250, 20, 100, 10, 150]
    },
    {
      name: "考勤异常",
      type: "line",

      lineStyle: {
        color: "#0864c3",
        width: 1
      }, //线条的样式
      smooth: true,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#29d7ff"
          },
          {
            offset: 1,
            color: "#34ccef85"
          }
        ])
      },
      data: [100, 2, 260, 1, 200, 30, 101, 40]
    }
  ]
};


export { chartLeft1, chartLeft2,chartLeft3, chartRight1 }

layout.less


.big-data-container {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #1400a8;
  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");
  background-attachment: fixed;
  background-size: cover;
  .head {
    height: 75px;
    /* height: 1.05rem; */
    background: url(./head_bg.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    z-index: 100;
  }
}

.head h1 {
  margin: 0;
  color: #fff;
  text-align: center;
  /* font-size: .4rem; */
  /* line-height: .8rem; */
  line-height: 71px;
}

.data-container {
  /* margin: 5px 15px;
        height:100%; */

  margin: 0px 15px;
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  bottom: 0;
}

.data-container > div {
  float: left;
  /* border: 1px solid white; */
  height: 100%;
}

.data-center {
  padding: 0 0.9rem;
  width: 40%;
  display: flex;
  flex-direction: column;
  // .center-top{
  //   height: 210px;
  //   background: red;
  // }
.chart-center{
  flex: 1;
}
}
.chart-center{
  width: 100%;
display: flex;
//  background: white;
}
.data-left,
.data-right {
  width: 30%;
  display: flex;

  flex-direction: column;
}

.data-left-item,
.data-right-item,.center-top,.center-top-num,.chart-center {
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0 0.2rem 0.4rem 0.15rem;
  background: rgba(255, 255, 255, 0.04);
  background-size: 100% auto;
  position: relative;
  margin-bottom: 0.15rem;
  z-index: 10;
}

.data-foot-line {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.data-foot-line:before,
.data-foot-line:after {
  position: absolute;
  width: 10px;
  height:10px;
  content: "";
  border-bottom: 2px solid #02a6b5;
  bottom: 0;
}

.boxall:before,
.data-foot-line:before {
  border-left: 2px solid #02a6b5;
  left: 0;
}

.boxall:after,
.data-foot-line:after {
  border-right: 2px solid #02a6b5;
  right: 0;
}

.boxall:before,
.boxall:after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}

.data-left-item:before,
.data-right-item:before,
.center-top-num:before,
.center-top:before{
  border-left: 2px solid #02a6b5;
  left: 0;
  position: absolute;
  width: 10px;
  height:10px;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}

.data-left-item:after,
.data-right-item:after,
.center-top-num:after,
.center-top:after {
  border-right: 2px solid #02a6b5;
  right: 0;
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}

.data-left,
.data-right {
  /* display: flex; */
}

.data-left > .data-left-item,
.data-right > .data-right-item {
  flex: 1;
  margin-bottom: 0.9rem;
}

.data-center  .title,
.data-left > .data-left-item .title,
.data-right > .data-right-item .title {
  /* font-size: .2rem; */
  font-size: 1rem;
  padding: 7px 0;
  color: #fff;
  text-align: center;
  /* line-height: .5rem; */
}

.data-center .chart-center{
  width: 100%;
}

.center-top-num{
  height: 80px;
  padding-top: 7px;
  margin-bottom: 0.8rem;
  display: flex;
  .item{
    flex: 1;
    text-align: center;
  }
  .text{
    color: #fcf0d8;
    font-size: 14px;
  }
  .num{
    font-size: 34px;
    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;
    font-weight: bold;
    color: #67caca;
  }
}

IviewCircle.vue

<template>
  <div class="demo-Circle">
    <div style>
      <i-circle
        :size="size"
        :trail-width="4"
        :stroke-width="5"
        :percent="75"
        stroke-linecap="square"
        stroke-color="#43a3fb"
      >
        <div class="demo-Circle-custom">
          <h1>1500</h1>
          <p>昨日活跃用户数量</p>
          <span>
            占比
            <i>{{1500/20000}}%</i>
          </span>
        </div>
      </i-circle>
    </div>
    <div style>
      <i-circle
        :size="size"
        :trail-width="4"
        :stroke-width="5"
        :percent="75"
        stroke-linecap="square"
        stroke-color="#43a3fb"
      >
        <div class="demo-Circle-custom">
          <h1>12000</h1>
          <p>上月活跃用户数量</p>
          <span>
            占比
            <i>{{12000/150000}}%</i>
          </span>
        </div>
      </i-circle>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    size:{
      type:Number,
      default:150
    }
  }
}
</script>
<style scoped>
.demo-Circle {
  display: flex;
}
.demo-Circle > div {
  flex: 1;
  text-align: center;
}
.demo-Circle > div:first-child{
  padding-left:10%;
}

.demo-Circle > div:last-child{
  padding-right:10%;
}
</style>
<style lang="less" scoped>
.demo-Circle-custom {
  & h1 {
    color:#ffffff;
    font-size: 28px;
    font-weight: normal;
  }
  & p {
    color: #ece8e8;
    font-size: 14px;
    margin: 10px 0 15px;
  }
  & span {
    display: block;
    padding-top: 15px;
    color: wheat;
    font-size: 14px;
    &:before {
      content: "";
      display: block;
      width: 50px;
      height: 1px;
      margin: 0 auto;
      background: #e0e3e6;
      position: relative;
      top: -15px;
    }
  }
  & span i {
    font-style: normal;
    color: white;
  }
}
</style>

2024-08-05 更新：

鉴于有朋友问我，<i-circle> 标签是什么，这个是项目内引用了 iview 组件库的 circle 圆环，我安装的版本：  "iview": "^3.2.2"

npm安装即可使用了，但如不需要整个组件库，建议换一下其他的单独圆环插件，会比较轻量

夜十前端
关注
  • 8
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue炫酷驾驶舱+echarts
12-13
vue实现的炫酷驾驶舱，压缩包内有实现的效果，当前实现的是前台效果，vue编写组件，在index.vue中引用组件，开发IDE用的是VScode
大屏展示设计图，驾驶舱页面设计
03-05
大屏展示设计图，驾驶舱页面设计，PSD分层图片处理。
大屏可视化demo，网页版本
07-30
包含11个大屏可视化网页项目，包括智慧城市，智慧物流，智慧金融，智慧政务等，无版权使用，修改过后可以当作你自己的项目
vue大数据可视化（大屏展示） 模板案例分享 Ps
11-01
Vue大屏数据可视化vue大数据可视化（大屏展示） 模板案例分享 Ps
gin-vue-blog自建博客
2401_84435700的博客
04-26 458
front 后期我会用flutter重写运行&&部署[server]AppMode = debug # debug 开发模式，release 生产模式HttpPort = :3000 # 项目端口JwtKey = 89js82js72 #JWT密钥，随机字符串即可[database]Db = mysql #数据库类型，不能变更为其他形式DbHost = 127.0.0.1 # 数据库地址DbPort = 3306 # 数据库端口DbUser = ginblog # 数据库用户名。
数据大屏可视化模板（生产销售监控）_vue数据可视化模板
12-18
数据大屏可视化模版（生产销售监控） java源代码，可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
基于vue的可视化大屏
最新发布
weixin_66547608的博客
07-09 1711
总体来说，这段代码是一个 Vue 组件的模板、脚本和样式的组合，主要用于展示一个热图组件和一个柱状图组件，并对其进行了相应的配置和布局设置。中心map，2D地图。
用vue写的可视化大屏
03-22
用vue、echarts写的可视化大屏，下载之后，运行npm install，加载完之后npm run dev就可以了
Vue 大屏数据展示模版
09-22
datav模版 内容概要：组件库基于Vue ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用，主要包含三个大屏demo案例。 适合人群：具备一定编程基础，组件库的开发和调试都使用Chrome浏览器 能学到什么： ①边框、装饰、图表和其他大屏控件等都是怎么在Vue中体现的； ②基于Vue的dataV 项目demo案例。 阅读建议：此资源提供dataV demo案例，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
基于vue大屏显示(模板)
weixin_44134816的博客
12-21 699
【代码】基于vue大屏显示(模板)
基于vue+echarts 数据可视化大屏展示的方法示例
10-15
主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3/ECharts5数据可视化大屏展示项目案例源码.zip
05-22
Vue3/ECharts5数据可视化（大屏展示）项目案例源码，一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局渲染组件封装的 ECharts 区域使用了全部引入的方式，在实际运用中请使用可以按需引入。Vue3/ECharts5数据可视化（大屏展示）项目案例源码，一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局渲染组件封装的 ECharts 区域使用了全部引入的方式，在实际运用中请使用可以按需引入。 Vue3/ECharts5数据可视化（大屏展示）项目案例源码，一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局渲染组件封装的 ECharts 区域使用了全部引
vue大屏模板素材收集 .zip
07-13
vue大屏模板.zip
(大屏源码)vue-map-datav.rar
04-26
免费 大屏源码 供参考
(大屏源码)big-screen-vue-datav.rar
04-26
datav + vue 免费
vue大屏可视化demo
01-25
vue大屏可视化demo 使用方法： # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
js数据可视化驾驶舱20套源码
04-28
3. **前端框架**：这些源码可能使用了不同的前端框架，如React、Vue或Angular，它们简化了UI组件的构建，使开发者能够更高效地组织代码并实现复用。 4. **数据处理库**：如D3.js（Data-Driven Documents）是一个...
vue驾驶舱demo
10-10
Vue驾驶舱demo是一个基于Vue.js框架开发的仪表盘示例。仪表盘是一种直观显示数据和统计信息的用户界面，它能够帮助用户快速获取关键信息并进行决策。 在Vue驾驶舱demo中，使用了Vue.js的响应式数据绑定机制，可以动态更新仪表盘中的数据和图表。通过与后端API的数据交互，可以实时获取最新的数据，并将其以可视化的方式呈现给用户。 Vue驾驶舱demo通常包括多个模块或面板，用于展示不同的数据指标、图表和报表。每个模块可以根据用户的需求进行自定义配置，比如选择需要显示的数据、调整图表样式等。用户可以根据自己的喜好和需求，灵活地定制自己的仪表盘。 在Vue驾驶舱demo中，常见的功能包括数据可视化、筛选和过滤数据、导出报表等。用户可以通过简单的操作，实现对数据的深入分析和洞察。 另外，Vue驾驶舱demo还提供了响应式布局和自适应屏幕大小的支持，可以在不同设备上展示良好的用户体验。无论是在桌面端还是移动端，用户都可以方便地访问和使用仪表盘。 综上所述，Vue驾驶舱demo是一个基于Vue.js框架开发的仪表盘示例，通过数据可视化和交互功能，帮助用户快速获取关键信息并进行决策。它具有灵活的配置选项，支持响应式布局和自适应屏幕大小，提供了良好的用户体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值