You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
479 lines
12 KiB
479 lines
12 KiB
<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/rliu.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/quiet.png"
|
|
/>
|
|
</div>
|
|
<div class="typeItem">
|
|
<div>舒适</div>
|
|
<img
|
|
style="width: 45%; height: 40%; margin-top: 10%"
|
|
src="../../assets/tiyuguan/soft.png"
|
|
/>
|
|
</div>
|
|
<div class="typeItem">
|
|
<div>拥挤</div>
|
|
<img
|
|
style="width: 45%; height: 40%; margin-top: 10%"
|
|
src="../../assets/tiyuguan/crowd.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/ins_title_bg.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/vbig_bg.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>
|