You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
1 year ago
|
<template>
|
||
|
<div style="width: 100%; height: 100%">
|
||
|
<div class="chart-style" style="width: 100%; height: 100%">
|
||
|
<vue-chart :option="chartOption" style="width: 100%; height: 100%" />
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script lang="ts" setup>
|
||
|
import VueChart from "./VueChart.vue";
|
||
|
import { computed } from "vue";
|
||
|
|
||
|
const props = defineProps({
|
||
|
month_data: {
|
||
|
type: Array,
|
||
|
default: () => []
|
||
|
},
|
||
|
day_data: {
|
||
|
type: Array,
|
||
|
default: () => []
|
||
|
},
|
||
|
data: {
|
||
|
type: Array,
|
||
|
default: () => []
|
||
|
}
|
||
|
});
|
||
|
|
||
|
const name_list = computed(() => {
|
||
|
return props.data.map((item: any) => {
|
||
|
return item.name;
|
||
|
});
|
||
|
});
|
||
|
|
||
|
const value_list = computed(() => {
|
||
|
return props.data.map((item: any) => {
|
||
|
return item.value;
|
||
|
});
|
||
|
});
|
||
|
|
||
|
const chartOption = computed(() => {
|
||
|
return {
|
||
|
xAxis: {
|
||
|
type: "category",
|
||
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
|
||
|
},
|
||
|
yAxis: {
|
||
|
type: "value"
|
||
|
},
|
||
|
series: [
|
||
|
{
|
||
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||
|
type: "line",
|
||
|
smooth: true
|
||
|
}
|
||
|
]
|
||
|
};
|
||
|
});
|
||
|
</script>
|