110 lines
2.2 KiB
Vue
110 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<border6 ref="refborder6">
|
|
<template v-slot>
|
|
<div ref="instatus" class="box"></div>
|
|
</template>
|
|
</border6>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
|
import { EDataPerson, EDataPersonItem } from "@/type/Mechanics";
|
|
import border6 from "@/components/borderBox/border6.vue";
|
|
const { proxy } = getCurrentInstance() as any;
|
|
let props = defineProps<{
|
|
title: string;
|
|
}>();
|
|
let instatus = ref();
|
|
|
|
let refborder6 = ref();
|
|
|
|
const echartsData = reactive<EDataPerson>({
|
|
contrast: {
|
|
div: null,
|
|
data: null,
|
|
title: "",
|
|
box: null,
|
|
},
|
|
});
|
|
|
|
const setData = (value: any) => {
|
|
let time = value.value.map((item: any) => {
|
|
return (item / 60).toFixed(1);
|
|
});
|
|
|
|
echartsData.contrast!.div = instatus.value;
|
|
echartsData.contrast!.title = props.title;
|
|
echartsData.contrast!.data = {
|
|
title: {
|
|
text: echartsData.contrast!.title,
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 20
|
|
}
|
|
},
|
|
grid: {
|
|
top: '8%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value} 分钟',
|
|
rotate: 30, //倾斜角度
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: value.title
|
|
},
|
|
series: [
|
|
{
|
|
data: value.value,
|
|
type: 'bar',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
|
}
|
|
}
|
|
]
|
|
};;
|
|
|
|
change(echartsData.contrast);
|
|
};
|
|
const change = (item: EDataPersonItem) => {
|
|
let Ebox = proxy.$echarts.init(item.div, "dark");
|
|
Ebox.setOption(item.data);
|
|
item.box = Ebox;
|
|
};
|
|
|
|
function setchartWH(width: any, height: any) {
|
|
instatus.value.style.height = height - 40 + "px";
|
|
instatus.value.style.width = width - 30 + "px";
|
|
|
|
refborder6.value.resetWH();
|
|
if (echartsData.contrast.box) {
|
|
echartsData.contrast.box.resize();
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
});
|
|
|
|
// return{setchartWH}
|
|
defineExpose({
|
|
setchartWH,
|
|
setData
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.box {
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
|