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