update
This commit is contained in:
parent
430b4048e7
commit
e03f9e5178
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
BIN
src/assets/images/box-title-r.png
Normal file
BIN
src/assets/images/box-title-r.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
@ -142,13 +142,15 @@ function addMarks(text) {
|
|||||||
|
|
||||||
|
|
||||||
/** CSS3D */
|
/** CSS3D */
|
||||||
const label = new CSS3DObject(document.createElement('div'));
|
const label = new CSS3DObject(document.createElement('div'));
|
||||||
label.position.set(0, 50, 40);
|
label.position.set(0, 50, 40);
|
||||||
label.scale.set(0.5, 0.5, 0.5);
|
label.scale.set(0.5, 0.5, 0.5);
|
||||||
label.element.style.backgroundColor = '#fff';
|
label.element.style.backgroundColor = '#fff';
|
||||||
label.element.innerText = text;
|
label.element.innerText = text;
|
||||||
scene.add(label);
|
scene.add(label);
|
||||||
|
// 调整显示方向
|
||||||
|
// 假设我们要将HTML元素旋转90度绕Y轴,使其从正前方指向右方
|
||||||
|
label.rotation.set(-Math.PI / 4,0, 0);
|
||||||
|
|
||||||
//定义标记点
|
//定义标记点
|
||||||
var radius = 0.5, segemnt = 16, rings = 16;
|
var radius = 0.5, segemnt = 16, rings = 16;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="item-container">
|
<div class="item-container">
|
||||||
<div class="box-title">{{ prop.title }}</div>
|
<div class="box-title" :class="[prop.pos == 'left'?'pos-l':'pos-r']">{{ prop.title }}</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
@ -14,6 +14,10 @@ const prop = defineProps({
|
|||||||
type: String,
|
type: String,
|
||||||
default: '标题'
|
default: '标题'
|
||||||
},
|
},
|
||||||
|
pos: {
|
||||||
|
type: String,
|
||||||
|
default: 'left'
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -29,7 +33,14 @@ const prop = defineProps({
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: url('/src/assets/images/box-title.png') no-repeat center center / 100% 100%;
|
}
|
||||||
|
.pos-l {
|
||||||
|
background: url('/src/assets/images/box-title-l.png') no-repeat center center / 100% 100%;
|
||||||
|
}
|
||||||
|
.pos-r {
|
||||||
|
background: url('/src/assets/images/box-title-r.png') no-repeat center center / 100% 100%;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 25px;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -62,8 +62,8 @@ option = {
|
|||||||
type: 'pictorialBar',
|
type: 'pictorialBar',
|
||||||
symbolClip: true,
|
symbolClip: true,
|
||||||
symbolBoundingData: bodyMax,
|
symbolBoundingData: bodyMax,
|
||||||
symbolRepeat: true, //图形是否重复
|
symbolRepeat: true, //图形是否重复
|
||||||
symbolSize: [25, 6], //图形元素的尺寸
|
symbolSize: [25, 6], //图形元素的尺寸
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 80,
|
value: 80,
|
||||||
@ -80,24 +80,22 @@ option = {
|
|||||||
symbolBoundingData: bodyMax,
|
symbolBoundingData: bodyMax,
|
||||||
label: labelSetting,
|
label: labelSetting,
|
||||||
animationDuration: 0,
|
animationDuration: 0,
|
||||||
symbolRepeat: true, //图形是否重复
|
symbolRepeat: true, //图形是否重复
|
||||||
symbolSize: [25, 6], //图形元素的尺寸
|
symbolSize: [25, 6], //图形元素的尺寸
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: '#ccc'
|
color: '#ccc'
|
||||||
},
|
},
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: 100,
|
value: 100,
|
||||||
},{
|
}, {
|
||||||
value: 100,
|
value: 100,
|
||||||
}
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
@ -41,16 +41,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="r-box">
|
<div class="r-box">
|
||||||
<div class="rbox-item">
|
<div class="rbox-item">
|
||||||
<ItemVue title="温湿度">
|
<ItemVue title="温湿度" pos="right">
|
||||||
<LineChart />
|
<LineChart />
|
||||||
</ItemVue>
|
</ItemVue>
|
||||||
</div>
|
</div>
|
||||||
<div class="rbox-item">
|
<div class="rbox-item">
|
||||||
<ItemVue title="温湿度">
|
<ItemVue title="温湿度" pos="right">
|
||||||
</ItemVue>
|
</ItemVue>
|
||||||
</div>
|
</div>
|
||||||
<div class="rbox-item">
|
<div class="rbox-item">
|
||||||
<ItemVue title="温湿度">
|
<ItemVue title="温湿度" pos="right">
|
||||||
</ItemVue>
|
</ItemVue>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user