feat: 知识报送审批，统计分析页面开发
parent
d031087ddc
commit
601ade4309
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 512 B |
@ -0,0 +1,64 @@
|
|||||||
|
<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>
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
<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>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
<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 {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: "5%",
|
||||||
|
left: "center"
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Access From",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["40%", "70%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center"
|
||||||
|
},
|
||||||
|
color: ["#15D5FF", "#3BF0FF"],
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontSize: 28,
|
||||||
|
fontWeight: "600"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: "待审批" },
|
||||||
|
{ value: 735, name: "已审批" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="elChart" style="width: 100%; height: 100%" />
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted, onUpdated, onUnmounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
option: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const elChart = ref();
|
||||||
|
let chart: any = null;
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
chart && chart.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
if (chart) {
|
||||||
|
chart.setOption(props.option);
|
||||||
|
} else {
|
||||||
|
clear();
|
||||||
|
chart = echarts.init(elChart.value);
|
||||||
|
chart.setOption(props.option);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(draw);
|
||||||
|
onUpdated(draw);
|
||||||
|
onUnmounted(clear);
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue