93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<border4 ref="refborder4">
|
||
|
|
<template v-slot>
|
||
|
|
<div ref="power"></div>
|
||
|
|
</template>
|
||
|
|
</border4>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang='ts'>
|
||
|
|
import { getCurrentInstance, onMounted, reactive, ref,watch,onUpdated } from "vue"
|
||
|
|
import border4 from "@/components/borderBox/border6.vue"
|
||
|
|
const { proxy } = getCurrentInstance() as any;
|
||
|
|
let props = defineProps<{
|
||
|
|
title: string,
|
||
|
|
series: any,
|
||
|
|
listName:string[]
|
||
|
|
}>()
|
||
|
|
|
||
|
|
let power = ref()
|
||
|
|
let Ebox = null
|
||
|
|
function init() {
|
||
|
|
Ebox = proxy.$echarts.init(power.value, "dark");
|
||
|
|
let option = {
|
||
|
|
title: {
|
||
|
|
text: props.title,
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 20
|
||
|
|
},
|
||
|
|
top: '3%',
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
axisPointer: {
|
||
|
|
// Use axis to trigger tooltip
|
||
|
|
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
|
||
|
|
axis: 'auto',
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// color:color,
|
||
|
|
legend: {
|
||
|
|
type: 'scroll',
|
||
|
|
// width:400,
|
||
|
|
// right:20,
|
||
|
|
top: '11%',
|
||
|
|
// itemStyle:{
|
||
|
|
// data:yue
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: "20%",
|
||
|
|
left: "3%",
|
||
|
|
right: "10%",
|
||
|
|
bottom: "3%",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'value',
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: props.listName
|
||
|
|
},
|
||
|
|
series: props.series
|
||
|
|
};
|
||
|
|
Ebox.setOption(option)
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(props,(newVal)=>{
|
||
|
|
|
||
|
|
},{deep:true})
|
||
|
|
|
||
|
|
onMounted(()=>{
|
||
|
|
init()
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
</style>
|