feat: 违规总量
JINGYJ
1 year ago
parent
f563e0cf1f
commit
0acca1af27
@ -0,0 +1,310 @@
|
||||
<script setup lang="ts">
|
||||
import { useDark, useECharts } from "@pureadmin/utils";
|
||||
import { type PropType, ref, computed, watch, nextTick } from "vue";
|
||||
import * as echarts from "echarts/core";
|
||||
|
||||
const props = defineProps({
|
||||
requireData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
},
|
||||
questionData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const { isDark } = useDark();
|
||||
|
||||
const theme = computed(() => (isDark.value ? "dark" : "light"));
|
||||
|
||||
const chartRef = ref();
|
||||
const { setOptions } = useECharts(chartRef, {
|
||||
theme
|
||||
});
|
||||
|
||||
const name = [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
"11月",
|
||||
"12月"
|
||||
];
|
||||
const value = [100, 500, 400, 600, 700, 200, 450, 670, 900, 450, 670, 900];
|
||||
// const toolTims = null;
|
||||
const offsetX = 16;
|
||||
const offsetY = 8;
|
||||
// 绘制左侧面
|
||||
const CubeLeft = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x, shape.y];
|
||||
const c1 = [shape.x - offsetX, shape.y - offsetY];
|
||||
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
||||
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
}
|
||||
});
|
||||
// 绘制右侧面
|
||||
const CubeRight = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c1 = [shape.x, shape.y];
|
||||
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
||||
const c4 = [shape.x + offsetX, shape.y - offsetY];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
}
|
||||
});
|
||||
// 绘制顶面
|
||||
const CubeTop = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const c1 = [shape.x, shape.y];
|
||||
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
|
||||
const c3 = [shape.x, shape.y - offsetX];
|
||||
const c4 = [shape.x - offsetX, shape.y - offsetY];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
}
|
||||
});
|
||||
// 注册三个面图形
|
||||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
|
||||
watch(
|
||||
() => props,
|
||||
async () => {
|
||||
await nextTick(); // 确保DOM更新完成后再执行
|
||||
setOptions({
|
||||
container: ".bar-card",
|
||||
// color: ["#41b6ff", "#e85f33"],
|
||||
// backgroundColor: "#010d3a",
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
},
|
||||
formatter: function (params) {
|
||||
const item = params[1];
|
||||
return `${item.name}:${item.value}人`;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
containLabel: true
|
||||
},
|
||||
// legend: {
|
||||
// data: ["需求人数", "提问数量"],
|
||||
// textStyle: {
|
||||
// color: "#606266",
|
||||
// fontSize: "0.875rem"
|
||||
// },
|
||||
// bottom: 0
|
||||
// },
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: name,
|
||||
// X
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
type: "dashed",
|
||||
color: "#666"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
interval: 0
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
// name: "人数",
|
||||
type: "value",
|
||||
// y
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
fontSize: 12,
|
||||
color: "#666666"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
// y-line
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
type: "dashed",
|
||||
color: "#DCDCDC"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 14
|
||||
}
|
||||
// name: "单位: 个"
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
// name: "",
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
{
|
||||
type: "CubeLeft",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0])
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#417EFD"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#0044D2"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "CubeRight",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0])
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#417EFD"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#0044D2"
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "CubeTop",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0])
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#0044D2"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#417EFD"
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
data: value
|
||||
},
|
||||
{
|
||||
// name: "",
|
||||
type: "bar",
|
||||
label: {
|
||||
// normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
formatter: e => {
|
||||
return `${e.value}人`;
|
||||
},
|
||||
fontSize: 16,
|
||||
color: "#43C4F1",
|
||||
offset: [0, -15]
|
||||
// }
|
||||
},
|
||||
itemStyle: {
|
||||
color: "transparent"
|
||||
},
|
||||
tooltip: {},
|
||||
data: value
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="chartRef" style="width: 100%" />
|
||||
</template>
|
||||
@ -0,0 +1 @@
|
||||
export { default as barChart } from "./bar.vue";
|
||||
Loading…
Reference in New Issue