106 lines
1.9 KiB
Vue
106 lines
1.9 KiB
Vue
|
<!--
|
||
|
|
* @FilePath: Center.vue
|
||
|
|
* @Author: zz
|
||
|
|
* @Date: 2024-07-19 11:04:25
|
||
|
|
* @LastEditors: Please set LastEditors
|
||
|
|
* @LastEditTime: 2024-07-19 11:11:38
|
||
|
|
* @Descripttion:
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<Border class="center">
|
||
|
|
<v-chart :option="options" class="line"></v-chart>
|
||
|
|
</Border>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import Border from "./Border.vue";
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
onMounted,
|
||
|
|
onUnmounted,
|
||
|
|
getCurrentInstance,
|
||
|
|
onUpdated,
|
||
|
|
defineProps,
|
||
|
|
computed,
|
||
|
|
} from "vue";
|
||
|
|
const { proxy } = getCurrentInstance() as any;
|
||
|
|
|
||
|
|
let lineRef = ref();
|
||
|
|
let lineChart = null;
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
default: [],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
// 折线图配置
|
||
|
|
|
||
|
|
let options = computed(() => {
|
||
|
|
return {
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
},
|
||
|
|
backgroundColor: "transparent",
|
||
|
|
legend: {
|
||
|
|
data: ["日耗电曲线"],
|
||
|
|
icon: "none",
|
||
|
|
right: "10px",
|
||
|
|
textStyle: {
|
||
|
|
color: "#ff7b12",
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: "bold",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: "3%",
|
||
|
|
right: "4%",
|
||
|
|
bottom: "3%",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: "category",
|
||
|
|
boundaryGap: false,
|
||
|
|
// data: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
|
||
|
|
data: props.data.x,
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: "value",
|
||
|
|
axisLabel: {
|
||
|
|
formatter: "{value} ",
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
type: "dashed",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "日耗电曲线",
|
||
|
|
type: "line",
|
||
|
|
stack: "Total",
|
||
|
|
lineStyle: {
|
||
|
|
color: "#ff7b12",
|
||
|
|
},
|
||
|
|
// data: [120, 135, 101, 134, 90, 230, 210],
|
||
|
|
data: props.data.y,
|
||
|
|
symbol: "none",
|
||
|
|
smooth: true,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.center {
|
||
|
|
height: 30%;
|
||
|
|
width: 94%;
|
||
|
|
margin: 2% 3%;
|
||
|
|
}
|
||
|
|
.line {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|