vue大屏监控
vue 实现大屏监控
DataV介绍：DataV
样式如下所示：
vue大屏监控主要包括以下一些内容：
- 本次大屏监控页面包括三张图：两张柱状图、一张折线图
- 页面美化：引入DataV组件，用于大屏监控页面增加边框、装饰等
- 注意父子组件之间的彼此通信方法
以下代码顺序为：./components/下两个柱状图和一张折线图的代码；最后是screenMonitor父组件应用前述子组件代码
<template>
<div ref="BarChart" style="height: 250%; width: 100%"/>
</template>
<script>
import echarts from 'echarts';
export default {
props: { //父组件向子组件的传参
params: {
type: Object,
default: {}
}
},
data() {
return {
chart: null,
data: [], //数据
xData: [], //x轴
yBarData: [], //y轴
yLable: [],
colorStops: [],
chartLegend: [], //图例
colorOptions: [ //图例以及柱形图颜色选择
'#5ba2e4',
'#f58510',
'#afa5a5',
'#facb3d',
'#0854cf',
'#48c611',
'#73fcff'
],
days: this.params.days,
}
},
watch: {
params(old, newparams) { //监听入参的变化
this.fetchData()
}
},
mounted() {
this.fetchData()
//图的大小自适应
window.addEventListener('resize',()=>{
if (this.chart){
this.chart.resize()
}
})
},
beforeDestroy() { //实例销毁之前调用
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
fetchData() { //调接口，获取数据, 并初始化柱形图
this.xData = this.params.dateArray
this.yLable = ['80','90','10','30','20','50','60']
this.initData()
this.initChart()
},
initData() {
this.yBarData = this.yLable
},
initChart() {
this.chart = echarts.init(this.$refs.BarChart)
this.chart.clear() // 清空当前实例
let colors = []
const dom = 200
const barWidth = dom / 20
for (let i = 0; i < 4; i++) {
colors.push({
// type: 'linear',
// x: 0,
// x2: 1,
// y: 0,
// y2: 0,
colorStops: [
{
offset: 0,
color: '#73fcff' // 最左边
}, {
offset: 0.5,
color: '#86eef1' // 左边的右边 颜色
}, {
offset: 0.5,
color: '#5ad6d9' // 右边的左边 颜色
}, {
offset: 1,
color: '#3dc8ca'
}]
})
}
this.chart.setOption({
backgroundColor: '#010d3a',
//提示框
tooltip: {
trigger: 'axis',
formatter: "{b} : {c}",
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
/**区域位置*/
grid: {
left: '5%',
right: '5%',
top: '10%',
bottom: '10%',
},
//X轴
xAxis: [{
data: this.xData,
type: 'category',
show: true,
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,1)',
shadowColor: 'rgba(255,255,255,1)',
// shadowOffsetX: '20'
},
symbol: ['none', 'arrow'],
symbolOffset: [0, 25]
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
fontSize: 10
}
}],
yAxis: {
show: true,
splitNumber: 3,
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#075858'
},
},
axisLabel: {
show: true,
color: '#FFFFFF',
margin: 5,
fontSize: 10
}
},
series: [
{//数据颜色
name: '日付费用户数',
type: 'bar',
barWidth: barWidth,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#86eef1"
},
{
offset: 1,
color: "#034881"
}
])
}
},
label: {
// show: true,
position: [barWidth / 2, -(barWidth + 20)],
color: '#ffffff',
fontSize: 14,
fontStyle: 'bold',
align: 'center'
},
data: this.yBarData
},
]
}, true)
}
}
}
</script>
<style scoped>
</style>
<template>
<div ref="BarChart1" style="height: 250%; width: 100%"/>
</template>
<script>
import echarts from 'echarts';
export default {
props: { //父组件向子组件的传参
params: {
type: Object,
default: {}
}
},
data() {
return {
chart: null,
data: [], //数据
xData: [], //x轴
yBarData: [], //y轴
yLable: [],
colorStops: [],
chartLegend: [], //图例
colorOptions: [ //图例以及柱形图颜色选择
'#5ba2e4',
'#f58510',
'#afa5a5',
'#facb3d',
'#0854cf',
'#48c611',
'#73fcff'
],
days: this.params.days,
// dateArray: []
}
},
watch: {
params(old, newparams) { //监听入参的变化
this.fetchData()
}
},
mounted() {
// this.getTimeSeries()
this.fetchData()
//图的大小自适应
window.addEventListener('resize',()=>{
if (this.chart){
this.chart.resize()
}
})
},
beforeDestroy() { //实例销毁之前调用
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
fetchData() { //调接口，获取数据, 并初始化柱形图
this.xData = this.params.monthArray
this.yLable = ['10','20','30','40','50','60','70','80','90','100','110','120','130','140']
this.initData()
this.initChart()
},
initData() {
this.yBarData = this.yLable
},
initChart() {
this.chart = echarts.init(this.$refs.BarChart1)
this.chart.clear() // 清空当前实例
let colors = []
const dom = 200
const barWidth = dom / 20
for (let i = 0; i < 4; i++) {
colors.push({
// type: 'linear',
// x: 0,
// x2: 1,
// y: 0,
// y2: 0,
colorStops: [
{
offset: 0,
color: '#73fcff' // 最左边
}, {
offset: 0.5,
color: '#86eef1' // 左边的右边 颜色
}, {
offset: 0.5,
color: '#5ad6d9' // 右边的左边 颜色
}, {
offset: 1,
color: '#3dc8ca'
}]
})
}
this.chart.setOption({
backgroundColor: '#010d3a',
//提示框
tooltip: {
trigger: 'axis',
formatter: "{b} : {c}",
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
/**区域位置*/
grid: {
left: '5%',
right: '5%',
top: '10%',
bottom: '10%',
},
//X轴
xAxis: [{
data: this.xData,
type: 'category',
show: true,
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,1)',
shadowColor: 'rgba(255,255,255,1)',
// shadowOffsetX: '20'
},
symbol: ['none', 'arrow'],
symbolOffset: [0, 25]
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
fontSize: 10
}
}],
yAxis: {
show: true,
splitNumber: 3,
axisLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#075858'
},
},
axisLabel: {
show: true,
color: '#FFFFFF',
margin: -8,
fontSize: 10
}
},
series: [
{//数据颜色
name: '日付费用户数',
type: 'bar',
barWidth: barWidth,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#86eef1"
},
{
offset: 1,
color: "#034881"
}
])
}
},
label: {
// show: true,
position: [barWidth / 2, -(barWidth + 20)],
color: '#ffffff',
fontSize: 14,
fontStyle: 'bold',
align: 'center'
},
data: this.yBarData
}
]
}, true)
}
}
}
</script>
<template>
<div ref="LineChart" style="height: 300%; width: 90%; margin-left: 30px"/>
</template>
<script>
import echarts from 'echarts'
export default {
props: { //父组件向子组件的传参
params: {
type: Object,
default: {}
}
},
data() {
return {
chart: null,
data: [], //数据
xData: [], //x轴
yBarData: [], //y轴
yBarData1: [], //y轴
yLable1: [],
yLable: [],
yBarData1: [],
colorStops: [],
chartLegend: [], //图例
colorOptions: [ //图例以及柱形图颜色选择
'#5ba2e4',
'#f58510',
'#afa5a5',
'#facb3d',
'#0854cf',
'#48c611',
'#73fcff'
]
}
},
watch: {
params(old, newparams) { //监听入参的变化
// this.getChartLegend()
this.fetchData()
}
},
mounted() { //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子,一般用于子组件
this.fetchData()
//图的大小自适应
window.addEventListener('resize',()=>{
if (this.chart){
this.chart.resize()
}
})
},
beforeDestroy() { //实例销毁之前调用
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
fetchData() { //调接口，获取数据, 并初始化柱形图
this.yLable = ['1.25','0.97','0.76','0.86','0.86','0.45','0.6','0.3','0.1','0.6','0.4','0.9']
this.yLable1 = ['1.15','0.93','0.75','0.80','0.89','0.42','0.8','0.67','0.9','0.8','0.65','0.4']
this.xData = this.params.monthArray
this.initData()
this.initChart()
// 方法2 根据返回的数据获取日期 从而设置图例
this.chartLegend = []
const dateArr = []
this.yLable.forEach((item, index) => {
if (item !== null && item !== undefined) {
dateArr.push(this.yLable[index])
}
})
this.chartLegend = dateArr
this.initData()
this.initChart()
},
initData() {
this.yBarData = this.yLable
this.yBarData1 = this.yLable1
},
initChart() {
this.chart = echarts.init(this.$refs.LineChart)
this.chart.clear() // 清空当前实例
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
legend: {
icon: 'rect',
itemWidth: 10,
itemHeight: 10,
itemGap: 13,
// top: '40',
data: [ 'ARPPU', 'ARPU'],
right: '4%',
textStyle: {
fontSize: 12,
color: '#ACCFFF'
}
},
grid: {
left: '15%',
right: '10%',
bottom: '10%',
top: '40',
// containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#344B83'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12,
color: '#ACCFFF'
}
},
data:this.xData
}],
yAxis: [{
type: 'value',
splitNumber: 4,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12,
color: '#ACCFFF'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#344B83'
}
}
}],
series: [{
name: 'ARPPU',
type: 'line',
// smooth: true,
itemStyle: {
normal: {
color: '#3769F4',
areaStyle: {
//color: '#94C9EC'
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(65,225,255,0)'
}, {
offset: 1,
color: 'rgba(65,225,255,0.6)'
}]),
}
}
},
data: this.yBarData1
}, {
name: 'ARPU',
type: 'line',
// smooth: true,
itemStyle: {
normal: {
color: '#55D5B5',
areaStyle: {
//color: '#94C9EC'
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(85,213,181,0)'
}, {
offset: 1,
color: 'rgba(85,213,181,0.6)'
}]),
}
}
},
data: this.yBarData
}]
}, true)
}
}
}
</script>
<template>
<div class="all">
<div align="center" style="margin-top: 20px">
<el-button align="center" type="text" v-model="carrierName"
v-for="item in carrierSelect" :key="item" :label="item" :value="item"
:style="{'color': carrierName === item ? '#73fcff': 'grey'}"
@click="handleCarrier(item)">
{{item}}
</el-button>
<dv-decoration-10 style="width:600px;height:5px;" />
</div>
<div style="margin-bottom: 20px">
<div class="numberOfDailyFees" >
<div >
<dv-border-box-1 backgroundColor="#010d3a">
<dv-decoration-7 style="width:100%;height:30px;">
<span class="datashow" style="color: #73fcff;font-size: 20px;font-weight: bold">日付费用户数</span>
<el-button class="datashow" type="text" @click="handleWeek" :style="{'color':days === 7 ? '#73fcff':'grey' }" >近7天</el-button>
<el-button class="datashow" type="text" @click="handleMonth" :style="{'color':days === 30 ? '#73fcff':'grey' }">近30天</el-button>
</dv-decoration-7>
<div>
<bar-chart :params="paramsProps" style="margin-top: 10px" @trans-data-sum="dataSumTransform"/>
</div>
</dv-border-box-1>
</div>
</div>
<div class="numberOfDailyFees" >
<div class="monthDv">
<dv-border-box-1 backgroundColor="#010d3a" >
<dv-decoration-7 style="width:100%;height:30px;">
<span class="datashow" style="color: #73fcff;font-size: 20px;font-weight: bold">月用户付费次数</span>
<el-button class="datashow" type="text" :style="{'color':'#73fcff' }">{{carrierName}}</el-button>
</dv-decoration-7>
<div>
<bar-chart1 :params="paramsPropsMonth" style="margin-top: 10px" @trans-data-sum1="dataSumTransform1"/>
</div>
</dv-border-box-1>
</div>
</div>
</div>
<div >
<dv-border-box-8 backgroundColor="#010d3a" style="width: 95%;margin-left: 25px">
<div style="margin-top: 400px">
<span class="dataShowBottom" style="color: #73fcff;font-size: 20px;font-weight: bold"></span>
<br>
<span class="dataShowBottom" style="color: #73fcff;font-size: 20px;font-weight: bold">ARPPU & ARPU</span>
</div>
<line-chart :params="paramsPropsArppu" />
</dv-border-box-8>
</div>
</div>
</template>
<script>
import barChart from "./components/screenMonitorBarChart"
import barChart1 from './components/screenMonitorBarChart1'
import lineChart from "./components/screenMonitorLineChart"
const params = {
'days': '','carriers': '',
'dateArray': []
}
const monthParams = {
'carriers': '',
'monthArray': []
}
const arppuParams = {
'carriers': '',
'monthArray': []
}
export default {
name: 'barchart',
components: { barChart , barChart1, lineChart },
data() {
return {
days: 7,
dataSum: 0,
dataSum1: 0,
carrierName: '天津',
carrierCode: '',
optionsDays: ['近7天','近30天'],
carrierSelect: ["黑龙江",'辽宁','贵州','福建','湖北','河南','河北','山西','山东','天津','吉林','北京','内蒙古','云南'],
dateArray: [],
monthArray: [],
paramsProps: Object.assign({},params),
paramsPropsMonth: Object.assign({},monthParams),
paramsPropsArppu: Object.assign({},arppuParams)
}
},
mounted(){
this.getTimeSeries()
this.getMonthSeries()
//子组件向父组件的传递
this.paramsProps = {
'days': this.days,
'carriers': carriersAll[this.carrierName],
'dateArray': this.dateArray
}
this.paramsPropsMonth = {
'carriers': carriersAll[this.carrierName],
'monthArray': this.monthArray
}
this.paramsPropsArppu = {
'carriers': carriersAll[this.carrierName],
'monthArray': this.monthArray
}
},
beforeCreate() {
document.querySelector('body').setAttribute('style', 'margin: 0 auto; width: 100%; background:#010d3a; height: 100%;');
},
beforeDestroy() {
document.querySelector('body').setAttribute('style', 'margin: 0 auto; width: 100%; background:white; height: 100%;');
},
methods: {
getTimeSeries() {
var myDate = new Date() // 获取今天日期
myDate.setDate(myDate.getDate() - (this.days))
console.log(this.days)
var dateTemp
var flag = 1
this.dateArray = []
for (var i = 0; i < this.days; i++) {
dateTemp = (myDate.getMonth() + 1) + '-' + myDate.getDate()
this.dateArray.push(dateTemp)
myDate.setDate(myDate.getDate() + flag)
}
},
getMonthSeries() {
var dataArr = [];
var data = new Date();
var year = data.getFullYear();
data.setMonth(data.getMonth()+1, 1)//获取到当前月份,设置月份
for (var i = 0; i < 12; i++) {
data.setMonth(data.getMonth() - 1);//每次循环一次 月份值减1
var m = data.getMonth() + 1;
m = m < 10 ? "0" + m : m;
dataArr.unshift(year + m.toString())
}
console.log('月')
console.log(dataArr)
this.monthArray = dataArr
console.log(this.monthArray)
},
handleWeek() {
this.days = 7
this.getTimeSeries()
this.paramsProps = {
'days': this.days,
'carriers': carriersAll[this.carrierName],
'dateArray': this.dateArray
}
},
handleMonth() {
this.days = 30
this.getTimeSeries()
this.paramsProps = {
'days': this.days,
'carriers': carriersAll[this.carrierName],
'dateArray': this.dateArray
}
},
handleCarrier(item){
this.carrierName = item
console.log(this.carrierName)
this.paramsProps = {
'days': this.days,
'carriers': carriersAll[this.carrierName],
'dateArray': this.dateArray
}
this.paramsPropsMonth = {
'carriers': carriersAll[this.carrierName],
'monthArray': this.monthArray
}
this.paramsPropsArppu = {
'carriers': carriersAll[this.carrierName],
'monthArray': this.monthArray
}
},
dataSumTransform(data){
this.dataSum = data
},
dataSumTransform1(data){
this.dataSum1 = data
}
}
}
</script>
<style>
.all{
/*position: fixed;*/
/*background-color: #010d3a !important;*/
/*background: -webkit-linear-gradient(bottom,#010d3a,#409EFF,white) no-repeat;*/
height: 100%;
/*width: 100%;*/
padding-left: 0px;
}
.buttonSelect{
margin-left: 20px;
margin-top: 15px;
font-size: large;
margin: 0;
}
.buttonSelectCarrier{
margin-left: 55px;
/*margin-top: 15px;*/
font-size: large;
/*margin: 0;*/
}
.datashow{
margin-left:20px;
margin-right: 20px;
}
.dataShowBottom{
margin:10%;
margin-left: 30px;
margin-top: 15px;
font-size: small;
/*margin: 0;*/
}
.numberOfDailyFees{
background-color: #010d3a;
float: left;
margin-top: 30px;
padding-left: 10px;
width: 50%;
}
.dv-border-box-1 .left-bottom{
bottom: 0px;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
top: 200px;
}
.dv-border-box-1 .right-bottom {
right: 20px;
bottom: 0px;
-webkit-transform: rotateX(180deg) rotateY(180deg);
transform: rotateX(180deg) rotateY(180deg);
top: 200px;
}
.dv-border-box-1 .right-top {
right: 20px;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.monthDv .dv-border-box-1 .left-bottom {
bottom: 0px;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
top: 200px;
/*right: 41%;*/
}
.monthDv .dv-border-box-1 .left-top {
/*right: 41%;*/
/*position: absolute;*/
display: block;
}
</style>
以上需要注意的是：
- 父子组件通信：父组件向子组件进行通信，按照
props进行传递；子组件向父组件通信使用this.$emit进行传递 - DataV组件的style布局：可在前端页面element中进行调整，将调整结果复制至代码即可
- 数据条颜色渐变：可使用
new echarts.graphic.LinearGradient