12 changed files with 2503 additions and 671 deletions
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 38 KiB |
@ -0,0 +1,479 @@ |
|||||
|
<template> |
||||
|
<div class="hello"> |
||||
|
<div class="main"> |
||||
|
<div class="left"> |
||||
|
<div class="tiyuBla"> |
||||
|
<div style="position: absolute; right: 28%; top: 52%">体育场</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tongji"> |
||||
|
<canvas |
||||
|
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv" |
||||
|
:width="cWidth1" |
||||
|
:height="cHeight1" |
||||
|
class="charts1" |
||||
|
@click="tap1" |
||||
|
/> |
||||
|
<!-- <canvas |
||||
|
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1" |
||||
|
:width="cWidth1" |
||||
|
:height="cHeight1" |
||||
|
class="charts1" |
||||
|
@click="tap1" |
||||
|
/> --> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bfb"> |
||||
|
<div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div> |
||||
|
|
||||
|
<div class="num">24,352,345</div> |
||||
|
|
||||
|
<!-- <div class="cntTxt"> |
||||
|
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div> |
||||
|
<div style="color: #0082FF;font-size: 14px;">人流饱和</div> |
||||
|
</div> --> |
||||
|
|
||||
|
<div class="cntTxt"> |
||||
|
<canvas |
||||
|
id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" |
||||
|
:width="cWidth" |
||||
|
:height="cHeight" |
||||
|
class="charts" |
||||
|
@click="tap" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="rsType"> |
||||
|
<div class="typeItem"> |
||||
|
<div>安静</div> |
||||
|
<img |
||||
|
style="width: 45%; height: 40%; margin-top: 10%" |
||||
|
src="../../assets/tiyuguan/安静.png" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="typeItem"> |
||||
|
<div>舒适</div> |
||||
|
<img |
||||
|
style="width: 45%; height: 40%; margin-top: 10%" |
||||
|
src="../../assets/tiyuguan/舒适.png" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="typeItem"> |
||||
|
<div>拥挤</div> |
||||
|
<img |
||||
|
style="width: 45%; height: 40%; margin-top: 10%" |
||||
|
src="../../assets/tiyuguan/拥挤.png" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="right"> |
||||
|
<div class="item" ></div> |
||||
|
<div class="item"></div> |
||||
|
<div class="item"></div> |
||||
|
<div class="item"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import uCharts from "../../utils/u-charts"; |
||||
|
function getH5Offset(e) { |
||||
|
e.mp = { |
||||
|
changedTouches: [], |
||||
|
}; |
||||
|
e.mp.changedTouches.push({ |
||||
|
x: e.offsetX, |
||||
|
y: e.offsetY, |
||||
|
}); |
||||
|
return e; |
||||
|
} |
||||
|
var uChartsInstance = {}; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
cWidth: 225, |
||||
|
cHeight: 150, |
||||
|
cWidth1: 550, |
||||
|
cHeight1: 250, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getServerData(); |
||||
|
this.getServerData1(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getServerData1() { |
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
||||
|
let res = { |
||||
|
categories: ["2018", "2019", "2020", "2021", "2022", "2023"], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "成交量A", |
||||
|
linearColor: [ |
||||
|
[0, "#1890FF"], |
||||
|
[0.25, "#00B5FF"], |
||||
|
[0.5, "#00D1ED"], |
||||
|
[0.75, "#00E6BB"], |
||||
|
[1, "#90F489"], |
||||
|
], |
||||
|
data: [15, 45, 15, 45, 15, 45], |
||||
|
}, |
||||
|
{ |
||||
|
name: "成交量B", |
||||
|
linearColor: [ |
||||
|
[0, "#91CB74"], |
||||
|
[0.25, "#2BDCA8"], |
||||
|
[0.5, "#2AE3A0"], |
||||
|
[0.75, "#C4D06E"], |
||||
|
[1, "#F2D375"], |
||||
|
], |
||||
|
data: [55, 85, 55, 85, 55, 85], |
||||
|
}, |
||||
|
{ |
||||
|
name: "成交量C", |
||||
|
linearColor: [ |
||||
|
[0, "#FAC858"], |
||||
|
[0.33, "#FFC371"], |
||||
|
[0.66, "#FFC2B2"], |
||||
|
[1, "#FA7D8D"], |
||||
|
], |
||||
|
data: [95, 125, 95, 125, 95, 125], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
let res1 = { |
||||
|
categories: ["2018","2019","2020","2021","2022","2023"], |
||||
|
series: [ |
||||
|
|
||||
|
{ |
||||
|
name: "山峰图", |
||||
|
index: 1, |
||||
|
type: "mount", |
||||
|
data: [70,50,85,130,64,88] |
||||
|
}, |
||||
|
{ |
||||
|
name: "曲线", |
||||
|
type: "line", |
||||
|
style: "curve", |
||||
|
color: "#1890ff", |
||||
|
disableLegend: true, |
||||
|
data: [70,50,85,130,64,88] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res); |
||||
|
this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1); |
||||
|
}, 50); |
||||
|
}, |
||||
|
drawCharts1(id, data) { |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "line", |
||||
|
context: ctx, |
||||
|
width: this.cWidth1, |
||||
|
height: this.cHeight1, |
||||
|
categories: data.categories, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: [ |
||||
|
"#1890FF", |
||||
|
"#91CB74", |
||||
|
"#FAC858", |
||||
|
"#EE6666", |
||||
|
"#73C0DE", |
||||
|
"#3CA272", |
||||
|
"#FC8452", |
||||
|
"#9A60B4", |
||||
|
"#ea7ccc", |
||||
|
], |
||||
|
padding: [15, 10, 0, 15], |
||||
|
dataLabel: false, |
||||
|
dataPointShape: false, |
||||
|
enableScroll: false, |
||||
|
legend: {}, |
||||
|
xAxis: { |
||||
|
disableGrid: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
gridType: "dash", |
||||
|
dashLength: 2, |
||||
|
data: [ |
||||
|
{ |
||||
|
min: 0, |
||||
|
max: 150, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
extra: { |
||||
|
line: { |
||||
|
type: "curve", |
||||
|
width: 2, |
||||
|
activeType: "hollow", |
||||
|
linearType: "custom", |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
drawCharts2(id, data) { |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "mix", |
||||
|
context: ctx, |
||||
|
width: this.cWidth1, |
||||
|
height: this.cHeight1, |
||||
|
categories: data.categories, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], |
||||
|
padding: [15,15,0,15], |
||||
|
enableScroll: false, |
||||
|
legend: {}, |
||||
|
xAxis: { |
||||
|
disableGrid: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
disabled: false, |
||||
|
disableGrid: false, |
||||
|
splitNumber: 5, |
||||
|
gridType: "dash", |
||||
|
dashLength: 4, |
||||
|
gridColor: "#CCCCCC", |
||||
|
padding: 10, |
||||
|
showTitle: true, |
||||
|
data: [ |
||||
|
{ |
||||
|
position: "left", |
||||
|
title: "折线" |
||||
|
}, |
||||
|
{ |
||||
|
position: "left", |
||||
|
title: "山峰图", |
||||
|
min: 0, |
||||
|
max: 200, |
||||
|
}, |
||||
|
// { |
||||
|
// position: "right", |
||||
|
// min: 0, |
||||
|
// max: 200, |
||||
|
// title: "柱状图", |
||||
|
// textAlign: "left" |
||||
|
// }, |
||||
|
// { |
||||
|
// position: "right", |
||||
|
// min: 0, |
||||
|
// max: 200, |
||||
|
// title: "点", |
||||
|
// textAlign: "left" |
||||
|
// } |
||||
|
] |
||||
|
}, |
||||
|
extra: { |
||||
|
mount: { |
||||
|
type: "triangle", |
||||
|
widthRatio: 1, |
||||
|
borderWidth: 2, |
||||
|
linearType: "custom" |
||||
|
}, |
||||
|
mix: { |
||||
|
column: { |
||||
|
width: 20 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
getServerData() { |
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据 |
||||
|
let res = { |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "一班", |
||||
|
data: 0.75, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res); |
||||
|
}, 50); |
||||
|
}, |
||||
|
drawCharts(id, data) { |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "arcbar", |
||||
|
context: ctx, |
||||
|
width: this.cWidth, |
||||
|
height: this.cHeight, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: ["#FFFF00"], |
||||
|
padding: undefined, |
||||
|
title: { |
||||
|
name: "75%", |
||||
|
fontSize: 30, |
||||
|
color: "#fff", |
||||
|
fontWeight: "bold", |
||||
|
}, |
||||
|
subtitle: { |
||||
|
name: "人流饱和", |
||||
|
fontSize: 12, |
||||
|
color: "#0082FF", |
||||
|
}, |
||||
|
extra: { |
||||
|
arcbar: { |
||||
|
type: "circle", |
||||
|
width: 10, |
||||
|
backgroundColor: "#070A24", |
||||
|
startAngle: 1.5, |
||||
|
endAngle: 0.25, |
||||
|
gap: 2, |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
tap(e) { |
||||
|
uChartsInstance[e.target.id].touchLegend(getH5Offset(e)); |
||||
|
uChartsInstance[e.target.id].showToolTip(getH5Offset(e)); |
||||
|
}, |
||||
|
tap1(e) { |
||||
|
uChartsInstance[e.target.id].touchLegend(getH5Offset(e)); |
||||
|
uChartsInstance[e.target.id].showToolTip(getH5Offset(e)); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.main { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.left { |
||||
|
width: 30%; |
||||
|
height: 75vh; |
||||
|
// border: 1px solid red; |
||||
|
margin-left: 2%; |
||||
|
margin-top: -4%; |
||||
|
.tiyuBla { |
||||
|
width: 100%; |
||||
|
height: 40%; |
||||
|
background-image: url("../../assets/tiyuguan/进馆人流标题.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
color: white; |
||||
|
font-size: 38px; |
||||
|
font-weight: bold; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.tongji { |
||||
|
width: 100%; |
||||
|
height: 35%; |
||||
|
border: 1px solid #019ade; |
||||
|
} |
||||
|
|
||||
|
.bfb { |
||||
|
width: 100%; |
||||
|
height: 25%; |
||||
|
background-image: url("../../assets/tiyuguan/人流饱和度.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: relative; |
||||
|
.renshu { |
||||
|
span{ |
||||
|
margin-right: 5px; |
||||
|
img{ |
||||
|
width: 10px; |
||||
|
height: 12px; |
||||
|
} |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 30%; |
||||
|
left: 10%; |
||||
|
color: #8199bd; |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.num { |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
font-size: 20px; |
||||
|
position: absolute; |
||||
|
top: 45%; |
||||
|
left: 6%; |
||||
|
} |
||||
|
.cntTxt { |
||||
|
width: 20%; |
||||
|
height: 60%; |
||||
|
// border: 1px solid red; |
||||
|
position: absolute; |
||||
|
top: -5%; |
||||
|
left: 30.5%; |
||||
|
text-align: center; |
||||
|
padding-top: 2.5%; |
||||
|
} |
||||
|
.rsType { |
||||
|
width: 30%; |
||||
|
height: 35%; |
||||
|
// border: 1px solid red; |
||||
|
position: absolute; |
||||
|
top: 30%; |
||||
|
right: 4%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.typeItem { |
||||
|
width: 30%; |
||||
|
height: 95%; |
||||
|
text-align: center; |
||||
|
color: #687c9e; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
margin-top: 3%; |
||||
|
width: 65%; |
||||
|
height: 66vh; |
||||
|
// border: 1px solid #019ade; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
// align-items: center; |
||||
|
align-content: center; |
||||
|
justify-content: center; |
||||
|
background-image: url("../../assets/tiyuguan/视频大框.png") ; |
||||
|
background-size:contain; |
||||
|
background-repeat:no-repeat; |
||||
|
.item{ |
||||
|
width: 40%; |
||||
|
height: 40%; |
||||
|
margin-top: 5px; |
||||
|
background-image: url("../../assets/tiyuguan/视频小框.png") ; |
||||
|
background-size:contain; |
||||
|
background-repeat:no-repeat; |
||||
|
} |
||||
|
.item:nth-child(2),.item:nth-child(4){ |
||||
|
margin-right: 60px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.charts { |
||||
|
width: 225px; |
||||
|
height: 150px; |
||||
|
} |
||||
|
.charts1 { |
||||
|
width: 550px; |
||||
|
height: 250px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,479 @@ |
|||||
|
<template> |
||||
|
<div class="hello"> |
||||
|
<div class="main"> |
||||
|
<div class="left"> |
||||
|
<div class="tiyuBla"> |
||||
|
<div style="position: absolute; right: 28%; top: 52%">体育场</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tongji"> |
||||
|
<canvas |
||||
|
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv" |
||||
|
:width="cWidth1" |
||||
|
:height="cHeight1" |
||||
|
class="charts1" |
||||
|
@click="tap1" |
||||
|
/> |
||||
|
<!-- <canvas |
||||
|
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1" |
||||
|
:width="cWidth1" |
||||
|
:height="cHeight1" |
||||
|
class="charts1" |
||||
|
@click="tap1" |
||||
|
/> --> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bfb"> |
||||
|
<div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div> |
||||
|
|
||||
|
<div class="num">24,352,345</div> |
||||
|
|
||||
|
<!-- <div class="cntTxt"> |
||||
|
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div> |
||||
|
<div style="color: #0082FF;font-size: 14px;">人流饱和</div> |
||||
|
</div> --> |
||||
|
|
||||
|
<div class="cntTxt"> |
||||
|
<canvas |
||||
|
id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" |
||||
|
:width="cWidth" |
||||
|
:height="cHeight" |
||||
|
class="charts" |
||||
|
@click="tap" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="rsType"> |
||||
|
<div class="typeItem"> |
||||
|
<div>安静</div> |
||||
|
<img |
||||
|
style="width: 45%; height: 40%; margin-top: 10%" |
||||
|
src="../../assets/tiyuguan/安静.png" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="typeItem"> |
||||
|
<div>舒适</div> |
||||
|
<img |
||||
|
style="width: 45%; height: 40%; margin-top: 10%" |
||||
|
src="../../assets/tiyuguan/舒适.png" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="typeItem"> |
||||
|
<div>拥挤</div> |
||||
|
<img |
||||
|
style="width: 45%; height: 40%; margin-top: 10%" |
||||
|
src="../../assets/tiyuguan/拥挤.png" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="right"> |
||||
|
<div class="item" ></div> |
||||
|
<div class="item"></div> |
||||
|
<div class="item"></div> |
||||
|
<div class="item"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import uCharts from "../../utils/u-charts"; |
||||
|
function getH5Offset(e) { |
||||
|
e.mp = { |
||||
|
changedTouches: [], |
||||
|
}; |
||||
|
e.mp.changedTouches.push({ |
||||
|
x: e.offsetX, |
||||
|
y: e.offsetY, |
||||
|
}); |
||||
|
return e; |
||||
|
} |
||||
|
var uChartsInstance = {}; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
cWidth: 225, |
||||
|
cHeight: 150, |
||||
|
cWidth1: 550, |
||||
|
cHeight1: 250, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getServerData(); |
||||
|
this.getServerData1(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getServerData1() { |
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
||||
|
let res = { |
||||
|
categories: ["2018", "2019", "2020", "2021", "2022", "2023"], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "成交量A", |
||||
|
linearColor: [ |
||||
|
[0, "#1890FF"], |
||||
|
[0.25, "#00B5FF"], |
||||
|
[0.5, "#00D1ED"], |
||||
|
[0.75, "#00E6BB"], |
||||
|
[1, "#90F489"], |
||||
|
], |
||||
|
data: [15, 45, 15, 45, 15, 45], |
||||
|
}, |
||||
|
{ |
||||
|
name: "成交量B", |
||||
|
linearColor: [ |
||||
|
[0, "#91CB74"], |
||||
|
[0.25, "#2BDCA8"], |
||||
|
[0.5, "#2AE3A0"], |
||||
|
[0.75, "#C4D06E"], |
||||
|
[1, "#F2D375"], |
||||
|
], |
||||
|
data: [55, 85, 55, 85, 55, 85], |
||||
|
}, |
||||
|
{ |
||||
|
name: "成交量C", |
||||
|
linearColor: [ |
||||
|
[0, "#FAC858"], |
||||
|
[0.33, "#FFC371"], |
||||
|
[0.66, "#FFC2B2"], |
||||
|
[1, "#FA7D8D"], |
||||
|
], |
||||
|
data: [95, 125, 95, 125, 95, 125], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
let res1 = { |
||||
|
categories: ["2018","2019","2020","2021","2022","2023"], |
||||
|
series: [ |
||||
|
|
||||
|
{ |
||||
|
name: "山峰图", |
||||
|
index: 1, |
||||
|
type: "mount", |
||||
|
data: [70,50,85,130,64,88] |
||||
|
}, |
||||
|
{ |
||||
|
name: "曲线", |
||||
|
type: "line", |
||||
|
style: "curve", |
||||
|
color: "#1890ff", |
||||
|
disableLegend: true, |
||||
|
data: [70,50,85,130,64,88] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res); |
||||
|
this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1); |
||||
|
}, 50); |
||||
|
}, |
||||
|
drawCharts1(id, data) { |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "line", |
||||
|
context: ctx, |
||||
|
width: this.cWidth1, |
||||
|
height: this.cHeight1, |
||||
|
categories: data.categories, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: [ |
||||
|
"#1890FF", |
||||
|
"#91CB74", |
||||
|
"#FAC858", |
||||
|
"#EE6666", |
||||
|
"#73C0DE", |
||||
|
"#3CA272", |
||||
|
"#FC8452", |
||||
|
"#9A60B4", |
||||
|
"#ea7ccc", |
||||
|
], |
||||
|
padding: [15, 10, 0, 15], |
||||
|
dataLabel: false, |
||||
|
dataPointShape: false, |
||||
|
enableScroll: false, |
||||
|
legend: {}, |
||||
|
xAxis: { |
||||
|
disableGrid: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
gridType: "dash", |
||||
|
dashLength: 2, |
||||
|
data: [ |
||||
|
{ |
||||
|
min: 0, |
||||
|
max: 150, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
extra: { |
||||
|
line: { |
||||
|
type: "curve", |
||||
|
width: 2, |
||||
|
activeType: "hollow", |
||||
|
linearType: "custom", |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
drawCharts2(id, data) { |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "mix", |
||||
|
context: ctx, |
||||
|
width: this.cWidth1, |
||||
|
height: this.cHeight1, |
||||
|
categories: data.categories, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], |
||||
|
padding: [15,15,0,15], |
||||
|
enableScroll: false, |
||||
|
legend: {}, |
||||
|
xAxis: { |
||||
|
disableGrid: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
disabled: false, |
||||
|
disableGrid: false, |
||||
|
splitNumber: 5, |
||||
|
gridType: "dash", |
||||
|
dashLength: 4, |
||||
|
gridColor: "#CCCCCC", |
||||
|
padding: 10, |
||||
|
showTitle: true, |
||||
|
data: [ |
||||
|
{ |
||||
|
position: "left", |
||||
|
title: "折线" |
||||
|
}, |
||||
|
{ |
||||
|
position: "left", |
||||
|
title: "山峰图", |
||||
|
min: 0, |
||||
|
max: 200, |
||||
|
}, |
||||
|
// { |
||||
|
// position: "right", |
||||
|
// min: 0, |
||||
|
// max: 200, |
||||
|
// title: "柱状图", |
||||
|
// textAlign: "left" |
||||
|
// }, |
||||
|
// { |
||||
|
// position: "right", |
||||
|
// min: 0, |
||||
|
// max: 200, |
||||
|
// title: "点", |
||||
|
// textAlign: "left" |
||||
|
// } |
||||
|
] |
||||
|
}, |
||||
|
extra: { |
||||
|
mount: { |
||||
|
type: "triangle", |
||||
|
widthRatio: 1, |
||||
|
borderWidth: 2, |
||||
|
linearType: "custom" |
||||
|
}, |
||||
|
mix: { |
||||
|
column: { |
||||
|
width: 20 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
getServerData() { |
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据 |
||||
|
let res = { |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "一班", |
||||
|
data: 0.75, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res); |
||||
|
}, 50); |
||||
|
}, |
||||
|
drawCharts(id, data) { |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "arcbar", |
||||
|
context: ctx, |
||||
|
width: this.cWidth, |
||||
|
height: this.cHeight, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: ["#FFFF00"], |
||||
|
padding: undefined, |
||||
|
title: { |
||||
|
name: "75%", |
||||
|
fontSize: 30, |
||||
|
color: "#fff", |
||||
|
fontWeight: "bold", |
||||
|
}, |
||||
|
subtitle: { |
||||
|
name: "人流饱和", |
||||
|
fontSize: 12, |
||||
|
color: "#0082FF", |
||||
|
}, |
||||
|
extra: { |
||||
|
arcbar: { |
||||
|
type: "circle", |
||||
|
width: 10, |
||||
|
backgroundColor: "#070A24", |
||||
|
startAngle: 1.5, |
||||
|
endAngle: 0.25, |
||||
|
gap: 2, |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
tap(e) { |
||||
|
uChartsInstance[e.target.id].touchLegend(getH5Offset(e)); |
||||
|
uChartsInstance[e.target.id].showToolTip(getH5Offset(e)); |
||||
|
}, |
||||
|
tap1(e) { |
||||
|
uChartsInstance[e.target.id].touchLegend(getH5Offset(e)); |
||||
|
uChartsInstance[e.target.id].showToolTip(getH5Offset(e)); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.main { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.left { |
||||
|
width: 30%; |
||||
|
height: 75vh; |
||||
|
// border: 1px solid red; |
||||
|
margin-left: 2%; |
||||
|
margin-top: -4%; |
||||
|
.tiyuBla { |
||||
|
width: 100%; |
||||
|
height: 40%; |
||||
|
background-image: url("../../assets/tiyuguan/进馆人流标题.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
color: white; |
||||
|
font-size: 38px; |
||||
|
font-weight: bold; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.tongji { |
||||
|
width: 100%; |
||||
|
height: 35%; |
||||
|
border: 1px solid #019ade; |
||||
|
} |
||||
|
|
||||
|
.bfb { |
||||
|
width: 100%; |
||||
|
height: 25%; |
||||
|
background-image: url("../../assets/tiyuguan/人流饱和度.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: relative; |
||||
|
.renshu { |
||||
|
span{ |
||||
|
margin-right: 5px; |
||||
|
img{ |
||||
|
width: 10px; |
||||
|
height: 12px; |
||||
|
} |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 30%; |
||||
|
left: 10%; |
||||
|
color: #8199bd; |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.num { |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
font-size: 20px; |
||||
|
position: absolute; |
||||
|
top: 45%; |
||||
|
left: 6%; |
||||
|
} |
||||
|
.cntTxt { |
||||
|
width: 20%; |
||||
|
height: 60%; |
||||
|
// border: 1px solid red; |
||||
|
position: absolute; |
||||
|
top: -5%; |
||||
|
left: 30.5%; |
||||
|
text-align: center; |
||||
|
padding-top: 2.5%; |
||||
|
} |
||||
|
.rsType { |
||||
|
width: 30%; |
||||
|
height: 35%; |
||||
|
// border: 1px solid red; |
||||
|
position: absolute; |
||||
|
top: 30%; |
||||
|
right: 4%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.typeItem { |
||||
|
width: 30%; |
||||
|
height: 95%; |
||||
|
text-align: center; |
||||
|
color: #687c9e; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
margin-top: 3%; |
||||
|
width: 65%; |
||||
|
height: 66vh; |
||||
|
// border: 1px solid #019ade; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
// align-items: center; |
||||
|
align-content: center; |
||||
|
justify-content: center; |
||||
|
background-image: url("../../assets/tiyuguan/视频大框.png") ; |
||||
|
background-size:contain; |
||||
|
background-repeat:no-repeat; |
||||
|
.item{ |
||||
|
width: 40%; |
||||
|
height: 40%; |
||||
|
margin-top: 5px; |
||||
|
background-image: url("../../assets/tiyuguan/视频小框.png") ; |
||||
|
background-size:contain; |
||||
|
background-repeat:no-repeat; |
||||
|
} |
||||
|
.item:nth-child(2),.item:nth-child(4){ |
||||
|
margin-right: 60px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.charts { |
||||
|
width: 225px; |
||||
|
height: 150px; |
||||
|
} |
||||
|
.charts1 { |
||||
|
width: 550px; |
||||
|
height: 250px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,154 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<canvas id="UKijRCmzReSTcyEAGvEhdEhlfvWfNbtZ" :width="cWidth" :height="cHeight" class="charts" @click="tap"/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 需要在您的项目内执行 npm i @qiun/ucharts |
||||
|
import uCharts from '@qiun/ucharts'; |
||||
|
function getH5Offset(e) { |
||||
|
e.mp = { |
||||
|
changedTouches: [] |
||||
|
}; |
||||
|
e.mp.changedTouches.push({ |
||||
|
x: e.offsetX, |
||||
|
y: e.offsetY |
||||
|
}); |
||||
|
return e; |
||||
|
} |
||||
|
var uChartsInstance = {}; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
cWidth: 750, |
||||
|
cHeight: 500 |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getServerData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getServerData() { |
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
||||
|
let res = { |
||||
|
categories: ["2018","2019","2020","2021","2022","2023"], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "曲面", |
||||
|
type: "area", |
||||
|
style: "curve", |
||||
|
data: [70,50,85,130,64,88] |
||||
|
}, |
||||
|
{ |
||||
|
name: "柱1", |
||||
|
index: 1, |
||||
|
type: "column", |
||||
|
data: [40,{"value":30,"color":"#f04864"},55,110,24,58] |
||||
|
}, |
||||
|
{ |
||||
|
name: "柱2", |
||||
|
index: 1, |
||||
|
type: "column", |
||||
|
data: [50,20,75,60,34,38] |
||||
|
}, |
||||
|
{ |
||||
|
name: "曲线", |
||||
|
type: "line", |
||||
|
style: "curve", |
||||
|
color: "#1890ff", |
||||
|
disableLegend: true, |
||||
|
data: [70,50,85,130,64,88] |
||||
|
}, |
||||
|
{ |
||||
|
name: "折线", |
||||
|
type: "line", |
||||
|
color: "#2fc25b", |
||||
|
data: [120,140,105,170,95,160] |
||||
|
}, |
||||
|
{ |
||||
|
name: "点", |
||||
|
index: 2, |
||||
|
type: "point", |
||||
|
color: "#f04864", |
||||
|
data: [100,80,125,150,112,132] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
this.drawCharts('UKijRCmzReSTcyEAGvEhdEhlfvWfNbtZ', res); |
||||
|
}, 500); |
||||
|
}, |
||||
|
drawCharts(id,data){ |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "mix", |
||||
|
context: ctx, |
||||
|
width: this.cWidth, |
||||
|
height: this.cHeight, |
||||
|
categories: data.categories, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], |
||||
|
padding: [15,15,0,15], |
||||
|
enableScroll: false, |
||||
|
legend: {}, |
||||
|
xAxis: { |
||||
|
disableGrid: true, |
||||
|
title: "单位：年" |
||||
|
}, |
||||
|
yAxis: { |
||||
|
disabled: false, |
||||
|
disableGrid: false, |
||||
|
splitNumber: 5, |
||||
|
gridType: "dash", |
||||
|
dashLength: 4, |
||||
|
gridColor: "#CCCCCC", |
||||
|
padding: 10, |
||||
|
showTitle: true, |
||||
|
data: [ |
||||
|
{ |
||||
|
position: "left", |
||||
|
title: "折线" |
||||
|
}, |
||||
|
{ |
||||
|
position: "right", |
||||
|
min: 0, |
||||
|
max: 200, |
||||
|
title: "柱状图", |
||||
|
textAlign: "left" |
||||
|
}, |
||||
|
{ |
||||
|
position: "right", |
||||
|
min: 0, |
||||
|
max: 200, |
||||
|
title: "点", |
||||
|
textAlign: "left" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
extra: { |
||||
|
mix: { |
||||
|
column: { |
||||
|
width: 20 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
tap(e){ |
||||
|
uChartsInstance[e.target.id].touchLegend(getH5Offset(e)); |
||||
|
uChartsInstance[e.target.id].showToolTip(getH5Offset(e)); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.charts{ |
||||
|
width: 750px; |
||||
|
height: 500px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,479 @@ |
|||||
|
<template> |
||||
|
<div class="hello"> |
||||
|
<div class="main"> |
||||
|
<div class="left"> |
||||
|
<div class="tiyuBla"> |
||||
|
<div style="position: absolute; right: 28%; top: 52%">体育场</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tongji"> |
||||
|
<canvas |
||||
|
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv" |
||||
|
:width="cWidth1" |
||||
|
:height="cHeight1" |
||||
|
class="charts1" |
||||
|
@click="tap1" |
||||
|
/> |
||||
|
<!-- <canvas |
||||
|
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1" |
||||
|
:width="cWidth1" |
||||
|
:height="cHeight1" |
||||
|
class="charts1" |
||||
|
@click="tap1" |
||||
|
/> --> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bfb"> |
||||
|
<div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div> |
||||
|
|
||||
|
<div class="num">24,352,345</div> |
||||
|
|
||||
|
<!-- <div class="cntTxt"> |
||||
|
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div> |
||||
|
<div style="color: #0082FF;font-size: 14px;">人流饱和</div> |
||||
|
</div> --> |
||||
|
|
||||
|
<div class="cntTxt"> |
||||
|
<canvas |
||||
|
id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" |
||||
|
:width="cWidth" |
||||
|
:height="cHeight" |
||||
|
class="charts" |
||||
|
@click="tap" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="rsType"> |
||||
|
<div class="typeItem"> |
||||
|
<div>安静</div> |
||||
|
<img |
||||
|
style="width: 45%; height: 40%; margin-top: 10%" |
||||
|
src="../../assets/tiyuguan/安静.png" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="typeItem"> |
||||
|
<div>舒适</div> |
||||
|
<img |
||||
|
style="width: 45%; height: 40%; margin-top: 10%" |
||||
|
src="../../assets/tiyuguan/舒适.png" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="typeItem"> |
||||
|
<div>拥挤</div> |
||||
|
<img |
||||
|
style="width: 45%; height: 40%; margin-top: 10%" |
||||
|
src="../../assets/tiyuguan/拥挤.png" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="right"> |
||||
|
<div class="item" ></div> |
||||
|
<div class="item"></div> |
||||
|
<div class="item"></div> |
||||
|
<div class="item"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import uCharts from "../../utils/u-charts"; |
||||
|
function getH5Offset(e) { |
||||
|
e.mp = { |
||||
|
changedTouches: [], |
||||
|
}; |
||||
|
e.mp.changedTouches.push({ |
||||
|
x: e.offsetX, |
||||
|
y: e.offsetY, |
||||
|
}); |
||||
|
return e; |
||||
|
} |
||||
|
var uChartsInstance = {}; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
cWidth: 225, |
||||
|
cHeight: 150, |
||||
|
cWidth1: 550, |
||||
|
cHeight1: 250, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getServerData(); |
||||
|
this.getServerData1(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getServerData1() { |
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接 |
||||
|
let res = { |
||||
|
categories: ["2018", "2019", "2020", "2021", "2022", "2023"], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "成交量A", |
||||
|
linearColor: [ |
||||
|
[0, "#1890FF"], |
||||
|
[0.25, "#00B5FF"], |
||||
|
[0.5, "#00D1ED"], |
||||
|
[0.75, "#00E6BB"], |
||||
|
[1, "#90F489"], |
||||
|
], |
||||
|
data: [15, 45, 15, 45, 15, 45], |
||||
|
}, |
||||
|
{ |
||||
|
name: "成交量B", |
||||
|
linearColor: [ |
||||
|
[0, "#91CB74"], |
||||
|
[0.25, "#2BDCA8"], |
||||
|
[0.5, "#2AE3A0"], |
||||
|
[0.75, "#C4D06E"], |
||||
|
[1, "#F2D375"], |
||||
|
], |
||||
|
data: [55, 85, 55, 85, 55, 85], |
||||
|
}, |
||||
|
{ |
||||
|
name: "成交量C", |
||||
|
linearColor: [ |
||||
|
[0, "#FAC858"], |
||||
|
[0.33, "#FFC371"], |
||||
|
[0.66, "#FFC2B2"], |
||||
|
[1, "#FA7D8D"], |
||||
|
], |
||||
|
data: [95, 125, 95, 125, 95, 125], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
let res1 = { |
||||
|
categories: ["2018","2019","2020","2021","2022","2023"], |
||||
|
series: [ |
||||
|
|
||||
|
{ |
||||
|
name: "山峰图", |
||||
|
index: 1, |
||||
|
type: "mount", |
||||
|
data: [70,50,85,130,64,88] |
||||
|
}, |
||||
|
{ |
||||
|
name: "曲线", |
||||
|
type: "line", |
||||
|
style: "curve", |
||||
|
color: "#1890ff", |
||||
|
disableLegend: true, |
||||
|
data: [70,50,85,130,64,88] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res); |
||||
|
this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1); |
||||
|
}, 50); |
||||
|
}, |
||||
|
drawCharts1(id, data) { |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "line", |
||||
|
context: ctx, |
||||
|
width: this.cWidth1, |
||||
|
height: this.cHeight1, |
||||
|
categories: data.categories, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: [ |
||||
|
"#1890FF", |
||||
|
"#91CB74", |
||||
|
"#FAC858", |
||||
|
"#EE6666", |
||||
|
"#73C0DE", |
||||
|
"#3CA272", |
||||
|
"#FC8452", |
||||
|
"#9A60B4", |
||||
|
"#ea7ccc", |
||||
|
], |
||||
|
padding: [15, 10, 0, 15], |
||||
|
dataLabel: false, |
||||
|
dataPointShape: false, |
||||
|
enableScroll: false, |
||||
|
legend: {}, |
||||
|
xAxis: { |
||||
|
disableGrid: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
gridType: "dash", |
||||
|
dashLength: 2, |
||||
|
data: [ |
||||
|
{ |
||||
|
min: 0, |
||||
|
max: 150, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
extra: { |
||||
|
line: { |
||||
|
type: "curve", |
||||
|
width: 2, |
||||
|
activeType: "hollow", |
||||
|
linearType: "custom", |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
drawCharts2(id, data) { |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "mix", |
||||
|
context: ctx, |
||||
|
width: this.cWidth1, |
||||
|
height: this.cHeight1, |
||||
|
categories: data.categories, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], |
||||
|
padding: [15,15,0,15], |
||||
|
enableScroll: false, |
||||
|
legend: {}, |
||||
|
xAxis: { |
||||
|
disableGrid: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
disabled: false, |
||||
|
disableGrid: false, |
||||
|
splitNumber: 5, |
||||
|
gridType: "dash", |
||||
|
dashLength: 4, |
||||
|
gridColor: "#CCCCCC", |
||||
|
padding: 10, |
||||
|
showTitle: true, |
||||
|
data: [ |
||||
|
{ |
||||
|
position: "left", |
||||
|
title: "折线" |
||||
|
}, |
||||
|
{ |
||||
|
position: "left", |
||||
|
title: "山峰图", |
||||
|
min: 0, |
||||
|
max: 200, |
||||
|
}, |
||||
|
// { |
||||
|
// position: "right", |
||||
|
// min: 0, |
||||
|
// max: 200, |
||||
|
// title: "柱状图", |
||||
|
// textAlign: "left" |
||||
|
// }, |
||||
|
// { |
||||
|
// position: "right", |
||||
|
// min: 0, |
||||
|
// max: 200, |
||||
|
// title: "点", |
||||
|
// textAlign: "left" |
||||
|
// } |
||||
|
] |
||||
|
}, |
||||
|
extra: { |
||||
|
mount: { |
||||
|
type: "triangle", |
||||
|
widthRatio: 1, |
||||
|
borderWidth: 2, |
||||
|
linearType: "custom" |
||||
|
}, |
||||
|
mix: { |
||||
|
column: { |
||||
|
width: 20 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
getServerData() { |
||||
|
//模拟从服务器获取数据时的延时 |
||||
|
setTimeout(() => { |
||||
|
//模拟服务器返回数据 |
||||
|
let res = { |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "一班", |
||||
|
data: 0.75, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res); |
||||
|
}, 50); |
||||
|
}, |
||||
|
drawCharts(id, data) { |
||||
|
const ctx = document.getElementById(id).getContext("2d"); |
||||
|
uChartsInstance[id] = new uCharts({ |
||||
|
type: "arcbar", |
||||
|
context: ctx, |
||||
|
width: this.cWidth, |
||||
|
height: this.cHeight, |
||||
|
series: data.series, |
||||
|
animation: true, |
||||
|
background: "#FFFFFF", |
||||
|
color: ["#FFFF00"], |
||||
|
padding: undefined, |
||||
|
title: { |
||||
|
name: "75%", |
||||
|
fontSize: 30, |
||||
|
color: "#fff", |
||||
|
fontWeight: "bold", |
||||
|
}, |
||||
|
subtitle: { |
||||
|
name: "人流饱和", |
||||
|
fontSize: 12, |
||||
|
color: "#0082FF", |
||||
|
}, |
||||
|
extra: { |
||||
|
arcbar: { |
||||
|
type: "circle", |
||||
|
width: 10, |
||||
|
backgroundColor: "#070A24", |
||||
|
startAngle: 1.5, |
||||
|
endAngle: 0.25, |
||||
|
gap: 2, |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
tap(e) { |
||||
|
uChartsInstance[e.target.id].touchLegend(getH5Offset(e)); |
||||
|
uChartsInstance[e.target.id].showToolTip(getH5Offset(e)); |
||||
|
}, |
||||
|
tap1(e) { |
||||
|
uChartsInstance[e.target.id].touchLegend(getH5Offset(e)); |
||||
|
uChartsInstance[e.target.id].showToolTip(getH5Offset(e)); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.main { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.left { |
||||
|
width: 30%; |
||||
|
height: 75vh; |
||||
|
// border: 1px solid red; |
||||
|
margin-left: 2%; |
||||
|
margin-top: -4%; |
||||
|
.tiyuBla { |
||||
|
width: 100%; |
||||
|
height: 40%; |
||||
|
background-image: url("../../assets/tiyuguan/进馆人流标题.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
color: white; |
||||
|
font-size: 38px; |
||||
|
font-weight: bold; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.tongji { |
||||
|
width: 100%; |
||||
|
height: 35%; |
||||
|
border: 1px solid #019ade; |
||||
|
} |
||||
|
|
||||
|
.bfb { |
||||
|
width: 100%; |
||||
|
height: 25%; |
||||
|
background-image: url("../../assets/tiyuguan/人流饱和度.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: relative; |
||||
|
.renshu { |
||||
|
span{ |
||||
|
margin-right: 5px; |
||||
|
img{ |
||||
|
width: 10px; |
||||
|
height: 12px; |
||||
|
} |
||||
|
} |
||||
|
position: absolute; |
||||
|
top: 30%; |
||||
|
left: 10%; |
||||
|
color: #8199bd; |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.num { |
||||
|
color: white; |
||||
|
font-weight: bold; |
||||
|
font-size: 20px; |
||||
|
position: absolute; |
||||
|
top: 45%; |
||||
|
left: 6%; |
||||
|
} |
||||
|
.cntTxt { |
||||
|
width: 20%; |
||||
|
height: 60%; |
||||
|
// border: 1px solid red; |
||||
|
position: absolute; |
||||
|
top: -5%; |
||||
|
left: 30.5%; |
||||
|
text-align: center; |
||||
|
padding-top: 2.5%; |
||||
|
} |
||||
|
.rsType { |
||||
|
width: 30%; |
||||
|
height: 35%; |
||||
|
// border: 1px solid red; |
||||
|
position: absolute; |
||||
|
top: 30%; |
||||
|
right: 4%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.typeItem { |
||||
|
width: 30%; |
||||
|
height: 95%; |
||||
|
text-align: center; |
||||
|
color: #687c9e; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
margin-top: 3%; |
||||
|
width: 65%; |
||||
|
height: 66vh; |
||||
|
// border: 1px solid #019ade; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
// align-items: center; |
||||
|
align-content: center; |
||||
|
justify-content: center; |
||||
|
background-image: url("../../assets/tiyuguan/视频大框.png") ; |
||||
|
background-size:contain; |
||||
|
background-repeat:no-repeat; |
||||
|
.item{ |
||||
|
width: 40%; |
||||
|
height: 40%; |
||||
|
margin-top: 5px; |
||||
|
background-image: url("../../assets/tiyuguan/视频小框.png") ; |
||||
|
background-size:contain; |
||||
|
background-repeat:no-repeat; |
||||
|
} |
||||
|
.item:nth-child(2),.item:nth-child(4){ |
||||
|
margin-right: 60px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.charts { |
||||
|
width: 225px; |
||||
|
height: 150px; |
||||
|
} |
||||
|
.charts1 { |
||||
|
width: 550px; |
||||
|
height: 250px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue