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.
65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<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 * as echarts from "echarts";
|
|
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
month_data: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
day_data: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const total_data = computed(() => {
|
|
if (!props.data || props.data.length === 0) {
|
|
return 0;
|
|
} else {
|
|
return props.data.reduce(function (sum, item: any) {
|
|
return sum + item.value;
|
|
}, 0);
|
|
}
|
|
});
|
|
// function customLabelFormatter(params) {
|
|
// const text = params.value.toString();
|
|
// const coloredText = text.replace(
|
|
// /\d+/g,
|
|
// '<span style="color: blue;">$&</span>'
|
|
// ); // 正则表达式匹配数字并设置为蓝色
|
|
// return coloredText;
|
|
// }
|
|
|
|
const chartOption = computed(() => {
|
|
return {
|
|
xAxis: {
|
|
type: "category",
|
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
|
|
},
|
|
yAxis: {
|
|
type: "value"
|
|
},
|
|
series: [
|
|
{
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|
type: "bar"
|
|
}
|
|
]
|
|
};
|
|
});
|
|
</script>
|