feat: 一户一档UI样式走查修改
JINGYJ
11 months ago
parent
87ff2d8f9e
commit
4a4bcb1e5d
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 3.7 KiB |
@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_155_260)">
|
||||
<path d="M13.7163 7.14805H12.502V3.14805C12.502 1.88555 11.4788 0.862335 10.2163 0.862335H5.78774C4.52524 0.862335 3.50202 1.88555 3.50202 3.14805V7.14805H2.28774C1.97167 7.14805 1.71631 7.40341 1.71631 7.71948V14.5766C1.71631 14.8927 1.97167 15.1481 2.28774 15.1481H13.7163C14.0324 15.1481 14.2877 14.8927 14.2877 14.5766V7.71948C14.2877 7.40341 14.0324 7.14805 13.7163 7.14805ZM4.78774 3.14805C4.78774 2.59626 5.23595 2.14805 5.78774 2.14805H10.2163C10.7681 2.14805 11.2163 2.59626 11.2163 3.14805V7.14805H4.78774V3.14805ZM13.002 13.8623H3.00202V8.43376H13.002V13.8623ZM7.50202 11.3802V12.3266C7.50202 12.4052 7.56631 12.4695 7.64488 12.4695H8.35917C8.43774 12.4695 8.50202 12.4052 8.50202 12.3266V11.3802C8.64943 11.2744 8.75945 11.1245 8.81626 10.9521C8.87306 10.7798 8.87372 10.5939 8.81813 10.4211C8.76254 10.2484 8.65358 10.0978 8.50692 9.9909C8.36027 9.88403 8.18349 9.82645 8.00202 9.82645C7.82056 9.82645 7.64378 9.88403 7.49713 9.9909C7.35047 10.0978 7.24151 10.2484 7.18592 10.4211C7.13033 10.5939 7.13099 10.7798 7.18779 10.9521C7.2446 11.1245 7.35462 11.2744 7.50202 11.3802Z" fill="#CCCCCC"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_155_260">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.1889 12.4937C13.8521 11.6958 13.3632 10.9711 12.7497 10.3598C12.1379 9.74679 11.4133 9.25803 10.6157 8.92053C10.6086 8.91695 10.6014 8.91517 10.5943 8.9116C11.7068 8.10803 12.43 6.7991 12.43 5.32231C12.43 2.87588 10.4479 0.893738 8.00144 0.893738C5.55501 0.893738 3.57287 2.87588 3.57287 5.32231C3.57287 6.7991 4.29608 8.10803 5.40858 8.91338C5.40144 8.91695 5.3943 8.91874 5.38715 8.92231C4.58715 9.25981 3.8693 9.74374 3.25323 10.3616C2.64021 10.9733 2.15145 11.698 1.81394 12.4955C1.48237 13.2763 1.30355 14.1135 1.28715 14.9616C1.28668 14.9807 1.29002 14.9996 1.29699 15.0174C1.30395 15.0351 1.3144 15.0513 1.32771 15.0649C1.34103 15.0786 1.35694 15.0894 1.3745 15.0968C1.39207 15.1042 1.41095 15.108 1.43001 15.108H2.50144C2.58001 15.108 2.64251 15.0455 2.6443 14.9687C2.68001 13.5902 3.23358 12.2991 4.21215 11.3205C5.22465 10.308 6.5693 9.75088 8.00144 9.75088C9.43358 9.75088 10.7782 10.308 11.7907 11.3205C12.7693 12.2991 13.3229 13.5902 13.3586 14.9687C13.3604 15.0473 13.4229 15.108 13.5014 15.108H14.5729C14.5919 15.108 14.6108 15.1042 14.6284 15.0968C14.6459 15.0894 14.6619 15.0786 14.6752 15.0649C14.6885 15.0513 14.6989 15.0351 14.7059 15.0174C14.7129 14.9996 14.7162 14.9807 14.7157 14.9616C14.6979 14.108 14.5211 13.2777 14.1889 12.4937ZM8.00144 8.39374C7.1818 8.39374 6.41037 8.0741 5.83001 7.49374C5.24965 6.91338 4.93001 6.14195 4.93001 5.32231C4.93001 4.50267 5.24965 3.73124 5.83001 3.15088C6.41037 2.57052 7.1818 2.25088 8.00144 2.25088C8.82108 2.25088 9.59251 2.57052 10.1729 3.15088C10.7532 3.73124 11.0729 4.50267 11.0729 5.32231C11.0729 6.14195 10.7532 6.91338 10.1729 7.49374C9.59251 8.0741 8.82108 8.39374 8.00144 8.39374Z" fill="#CCCCCC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
@ -0,0 +1,5 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5 9C18.0523 9 18.5 9.44772 18.5 10V17.5C18.5 18.0523 18.0523 18.5 17.5 18.5H2.5C1.94772 18.5 1.5 18.0523 1.5 17.5V10.0035C1.5 9.45117 1.94772 9.00346 2.5 9.00346C3.05228 9.00346 3.5 9.45117 3.5 10.0035V16.5H16.5V10C16.5 9.44772 16.9477 9 17.5 9Z" fill="#5070F2"/>
|
||||
<path d="M5.54289 8.87623C5.93342 8.4857 6.56658 8.4857 6.95711 8.87623L10 11.9191L13.0429 8.87623C13.4334 8.4857 14.0666 8.4857 14.4571 8.87623C14.8476 9.26675 14.8476 9.89992 14.4571 10.2904L10.7071 14.0404C10.3166 14.431 9.68342 14.431 9.29289 14.0404L5.54289 10.2904C5.15237 9.89992 5.15237 9.26675 5.54289 8.87623Z" fill="#5070F2"/>
|
||||
<path d="M9.99654 1.5C10.5488 1.5 10.9965 1.94772 10.9965 2.5V13.3333C10.9965 13.8856 10.5488 14.3333 9.99654 14.3333C9.44426 14.3333 8.99654 13.8856 8.99654 13.3333V2.5C8.99654 1.94772 9.44426 1.5 9.99654 1.5Z" fill="#5070F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 947 B |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 498 B |
@ -0,0 +1,9 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.5 2.5C18.5 1.94772 18.0523 1.5 17.5 1.5H12.5C11.9477 1.5 11.5 1.94772 11.5 2.5C11.5 3.05228 11.9477 3.5 12.5 3.5H15.0855L11.3759 7.20956C10.9854 7.60008 10.9854 8.23325 11.3759 8.62377C11.7664 9.0143 12.3996 9.0143 12.7901 8.62377L16.5 4.91389V7.5C16.5 8.05228 16.9477 8.5 17.5 8.5C18.0523 8.5 18.5 8.05228 18.5 7.5V2.5Z" fill="#5070F2"/>
|
||||
<path d="M2.5 1.5C1.94772 1.5 1.5 1.94772 1.5 2.5V7.5C1.5 8.05228 1.94772 8.5 2.5 8.5C3.05228 8.5 3.5 8.05228 3.5 7.5V3.5H7.5C8.05228 3.5 8.5 3.05228 8.5 2.5C8.5 1.94772 8.05228 1.5 7.5 1.5H2.5Z" fill="#5070F2"/>
|
||||
<path d="M17.5 11.5C18.0523 11.5 18.5 11.9477 18.5 12.5V17.5C18.5 18.0523 18.0523 18.5 17.5 18.5H12.5C11.9477 18.5 11.5 18.0523 11.5 17.5C11.5 16.9477 11.9477 16.5 12.5 16.5H16.5V12.5C16.5 11.9477 16.9477 11.5 17.5 11.5Z" fill="#5070F2"/>
|
||||
<path d="M3.5 12.5C3.5 11.9477 3.05228 11.5 2.5 11.5C1.94772 11.5 1.5 11.9477 1.5 12.5V17.5C1.5 17.6345 1.52656 17.7628 1.57472 17.88C1.62353 17.999 1.69625 18.1105 1.79289 18.2071C1.89182 18.306 2.00632 18.3799 2.1285 18.4287C2.22825 18.4687 2.33594 18.493 2.44854 18.4987C2.46558 18.4996 2.48274 18.5 2.5 18.5" fill="#5070F2"/>
|
||||
<path d="M3.5 12.5V15.0858Z" fill="#5070F2"/>
|
||||
<path d="M4.91422 16.5L8.62377 12.7905C9.0143 12.3999 9.0143 11.7668 8.62377 11.3762C8.23325 10.9857 7.60008 10.9857 7.20956 11.3762L3.5 15.0858" fill="#5070F2"/>
|
||||
<path d="M2.50449 18.5H7.5C8.05228 18.5 8.5 18.0523 8.5 17.5C8.5 16.9477 8.05228 16.5 7.5 16.5H4.91422" fill="#5070F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,511 @@
|
||||
<script setup lang="ts">
|
||||
import { 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 accountChartBarDate = ref();
|
||||
const { setOptions } = useECharts(accountChartBarDate);
|
||||
|
||||
// 定义 random 函数
|
||||
const random = (min: number, max: number): number => {
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
};
|
||||
|
||||
// 注册形状绘制函数
|
||||
const registerShapeFun = () => {
|
||||
const offsetX = 10;
|
||||
const offsetY = 5;
|
||||
|
||||
// 绘制左侧面
|
||||
const CubeLeft = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: (
|
||||
ctx: CanvasRenderingContext2D,
|
||||
shape: { xAxisPoint: number[]; x: number; y: number }
|
||||
) => {
|
||||
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]);
|
||||
ctx.lineTo(c1[0], c1[1]);
|
||||
ctx.lineTo(c2[0], c2[1]);
|
||||
ctx.lineTo(c3[0], c3[1]);
|
||||
ctx.closePath();
|
||||
}
|
||||
});
|
||||
|
||||
// 绘制右侧面
|
||||
const CubeRight = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: (
|
||||
ctx: CanvasRenderingContext2D,
|
||||
shape: { xAxisPoint: number[]; x: number; y: number }
|
||||
) => {
|
||||
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]);
|
||||
ctx.lineTo(c2[0], c2[1]);
|
||||
ctx.lineTo(c3[0], c3[1]);
|
||||
ctx.lineTo(c4[0], c4[1]);
|
||||
ctx.closePath();
|
||||
}
|
||||
});
|
||||
|
||||
// 绘制顶面
|
||||
const CubeTop = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: (
|
||||
ctx: CanvasRenderingContext2D,
|
||||
shape: { x: number; y: number }
|
||||
) => {
|
||||
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]);
|
||||
ctx.lineTo(c2[0], c2[1]);
|
||||
ctx.lineTo(c3[0], c3[1]);
|
||||
ctx.lineTo(c4[0], c4[1]);
|
||||
ctx.closePath();
|
||||
}
|
||||
});
|
||||
|
||||
return [CubeLeft, CubeRight, CubeTop];
|
||||
};
|
||||
|
||||
// 生成形状函数
|
||||
const [CubeLeft, CubeRight, CubeTop] = registerShapeFun();
|
||||
// 注册三个面图形
|
||||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
|
||||
// 数据
|
||||
const colorArr = [
|
||||
["#F84A13", "#FFB240", "#F84A13"],
|
||||
["#2832F3", "#757AFF", "#2832F3"]
|
||||
];
|
||||
|
||||
const seriesArr: number[][] = [];
|
||||
const xAxisData: string[] = [];
|
||||
const seriesData: any[] = [];
|
||||
|
||||
// 生成数据
|
||||
for (let d = 0; d < 20; d++) {
|
||||
xAxisData.push(d + 1 + "日");
|
||||
}
|
||||
|
||||
for (let i = 0; i < 2; i++) {
|
||||
seriesArr[i] = [];
|
||||
for (let x = 0; x < 20; x++) {
|
||||
seriesArr[i].push(random(10, 80));
|
||||
}
|
||||
}
|
||||
|
||||
for (let index = 0; index < 2; index++) {
|
||||
seriesData.push({
|
||||
type: "custom",
|
||||
name: index === 0 ? "出账金额" : "进账金额",
|
||||
renderItem: (params: any, api: any) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
return {
|
||||
type: "group",
|
||||
x: index === 1 ? 18 : -12,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
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: colorArr[index][0]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[index][1]
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
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: colorArr[index][0]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[index][1]
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
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: colorArr[index][2]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
data: seriesArr[index]
|
||||
});
|
||||
}
|
||||
const yData1 = [
|
||||
100, 70, 20, 90, 50, 180, 10, 50, 20, 30, 50, 100, 20, 30, 50, 100, 100, 70,
|
||||
20, 90
|
||||
];
|
||||
const yData2 = [
|
||||
10, 50, 20, 30, 50, 100, 100, 70, 20, 90, 50, 180, 20, 90, 50, 180, 10, 50,
|
||||
20, 30
|
||||
];
|
||||
|
||||
watch(
|
||||
() => props,
|
||||
async () => {
|
||||
await nextTick(); // 确保DOM更新完成后再执行
|
||||
setOptions({
|
||||
// container: ".bar-card",
|
||||
// backgroundColor: "rgba(154,174,255,0.1)",
|
||||
tooltip: {
|
||||
// show: false
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
fontSize: 20 // 字体大小
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
right: 15,
|
||||
feature: {
|
||||
// dataZoom: { yAxisIndex: "none" }, // 数据区域缩放
|
||||
// restore: { show: true }, // 重置
|
||||
myFull: {
|
||||
// 全屏
|
||||
show: false,
|
||||
title: "全屏",
|
||||
icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
|
||||
onclick: e => {
|
||||
// 全屏查看
|
||||
if (accountChartBarDate.value.requestFullScreen) {
|
||||
// HTML W3C 提议
|
||||
accountChartBarDate.value.requestFullScreen();
|
||||
} else if (accountChartBarDate.value.msRequestFullscreen) {
|
||||
// IE11
|
||||
accountChartBarDate.value.msRequestFullScreen();
|
||||
} else if (accountChartBarDate.value.webkitRequestFullScreen) {
|
||||
// Webkit
|
||||
accountChartBarDate.value.webkitRequestFullScreen();
|
||||
} else if (accountChartBarDate.value.mozRequestFullScreen) {
|
||||
// Firefox
|
||||
accountChartBarDate.value.mozRequestFullScreen();
|
||||
}
|
||||
// 退出全屏
|
||||
if (accountChartBarDate.value.requestFullScreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (accountChartBarDate.value.msRequestFullScreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (accountChartBarDate.value.webkitRequestFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if (accountChartBarDate.value.mozRequestFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
}
|
||||
},
|
||||
saveAsImage: {
|
||||
show: false,
|
||||
title: "保存"
|
||||
} // 导出图片
|
||||
}
|
||||
},
|
||||
color: ["#0BAF54", "#0240E0", "#00B58C", "#082FF8"],
|
||||
legend: {
|
||||
show: true,
|
||||
// right: 30,
|
||||
bottom: 6,
|
||||
itemGap: 30,
|
||||
itemWidth: 12,
|
||||
itemHeight: 8,
|
||||
data: ["出账金额", "进账金额", "出账笔数", "进账笔数"],
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#666"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 60,
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(80,112,242,1)"
|
||||
}
|
||||
},
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
inside: false,
|
||||
interval: 0,
|
||||
rotate: 0,
|
||||
// textStyle: {
|
||||
color: "#8C8C8C",
|
||||
fontWeight: 400,
|
||||
fontSize: 12,
|
||||
// },
|
||||
margin: 15
|
||||
},
|
||||
data: xAxisData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: `{a|} {b|交易时间特征(日)}`,
|
||||
nameTextStyle: {
|
||||
color: "#333",
|
||||
// align: "center",
|
||||
padding: [15, 0, 0, 70],
|
||||
// fontSize: 16,
|
||||
// fontWeight: "bold",
|
||||
verticalAlign: "middle",
|
||||
rich: {
|
||||
a: {
|
||||
backgroundColor: "#5070F2",
|
||||
width: 2,
|
||||
height: 17,
|
||||
verticalAlign: "middle"
|
||||
},
|
||||
b: {
|
||||
padding: [2, 0, 0, 0],
|
||||
fontSize: 16,
|
||||
fontWeight: "bold"
|
||||
}
|
||||
}
|
||||
},
|
||||
nameGap: 40,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(80,112,242,0.3)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
color: "#8C8C8C",
|
||||
fontWeight: 400,
|
||||
fontSize: 12,
|
||||
// },
|
||||
formatter: "{value}",
|
||||
margin: 15
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// name: "%",
|
||||
nameGap: 30,
|
||||
position: "right",
|
||||
nameTextStyle: {
|
||||
color: "#ffffff",
|
||||
fontWeight: 400,
|
||||
fontSize: 16
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "rgba(239, 247, 253, .1)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(239, 247, 253, .1)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: "#8C8C8C"
|
||||
},
|
||||
min: 0,
|
||||
max: Math.ceil(Math.max.apply(null, yData1) / 5) * 5,
|
||||
interval: Math.ceil(Math.max.apply(null, yData1) / 4)
|
||||
}
|
||||
],
|
||||
series: [
|
||||
...seriesData,
|
||||
{
|
||||
type: "bar",
|
||||
name: "出账金额",
|
||||
itemStyle: {
|
||||
color: "transparent"
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
data: seriesArr[0]
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
color: "transparent"
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
data: seriesArr[1]
|
||||
},
|
||||
{
|
||||
name: "出账笔数",
|
||||
type: "line",
|
||||
showSymbol: true,
|
||||
// smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "#03E54F"
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// areaStyle: {
|
||||
// normal: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(67, 239, 255, .3)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(1, 17, 49, .3)"
|
||||
// }
|
||||
// ])
|
||||
// }
|
||||
// },
|
||||
data: yData1
|
||||
},
|
||||
{
|
||||
name: "进账笔数",
|
||||
type: "line",
|
||||
showSymbol: true,
|
||||
// smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "#AD00FF"
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// areaStyle: {
|
||||
// normal: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(67, 239, 255, .3)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(1, 17, 49, .3)"
|
||||
// }
|
||||
// ])
|
||||
// }
|
||||
// },
|
||||
data: yData2
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="accountChartBarDate" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
@ -0,0 +1,505 @@
|
||||
<script setup lang="ts">
|
||||
import { 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 accountChartBarMonth = ref();
|
||||
const { setOptions } = useECharts(accountChartBarMonth);
|
||||
|
||||
// 定义 random 函数
|
||||
const random = (min: number, max: number): number => {
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
};
|
||||
|
||||
// 注册形状绘制函数
|
||||
const registerShapeFun = () => {
|
||||
const offsetX = 10;
|
||||
const offsetY = 5;
|
||||
|
||||
// 绘制左侧面
|
||||
const CubeLeft = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: (
|
||||
ctx: CanvasRenderingContext2D,
|
||||
shape: { xAxisPoint: number[]; x: number; y: number }
|
||||
) => {
|
||||
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]);
|
||||
ctx.lineTo(c1[0], c1[1]);
|
||||
ctx.lineTo(c2[0], c2[1]);
|
||||
ctx.lineTo(c3[0], c3[1]);
|
||||
ctx.closePath();
|
||||
}
|
||||
});
|
||||
|
||||
// 绘制右侧面
|
||||
const CubeRight = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: (
|
||||
ctx: CanvasRenderingContext2D,
|
||||
shape: { xAxisPoint: number[]; x: number; y: number }
|
||||
) => {
|
||||
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]);
|
||||
ctx.lineTo(c2[0], c2[1]);
|
||||
ctx.lineTo(c3[0], c3[1]);
|
||||
ctx.lineTo(c4[0], c4[1]);
|
||||
ctx.closePath();
|
||||
}
|
||||
});
|
||||
|
||||
// 绘制顶面
|
||||
const CubeTop = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
buildPath: (
|
||||
ctx: CanvasRenderingContext2D,
|
||||
shape: { x: number; y: number }
|
||||
) => {
|
||||
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]);
|
||||
ctx.lineTo(c2[0], c2[1]);
|
||||
ctx.lineTo(c3[0], c3[1]);
|
||||
ctx.lineTo(c4[0], c4[1]);
|
||||
ctx.closePath();
|
||||
}
|
||||
});
|
||||
|
||||
return [CubeLeft, CubeRight, CubeTop];
|
||||
};
|
||||
|
||||
// 生成形状函数
|
||||
const [CubeLeft, CubeRight, CubeTop] = registerShapeFun();
|
||||
// 注册三个面图形
|
||||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
|
||||
// 数据
|
||||
const colorArr = [
|
||||
["#0BAF54", "#2AE87E", "#0BAF54"],
|
||||
["#146FF7", "#0240E0", "#0240E0"]
|
||||
];
|
||||
|
||||
const seriesArr: number[][] = [];
|
||||
const xAxisData: string[] = [];
|
||||
const seriesData: any[] = [];
|
||||
|
||||
// 生成数据
|
||||
for (let d = 0; d < 12; d++) {
|
||||
xAxisData.push("2023年" + (d + 1) + "月");
|
||||
}
|
||||
|
||||
for (let i = 0; i < 2; i++) {
|
||||
seriesArr[i] = [];
|
||||
for (let x = 0; x < 12; x++) {
|
||||
seriesArr[i].push(random(10, 80));
|
||||
}
|
||||
}
|
||||
|
||||
for (let index = 0; index < 2; index++) {
|
||||
seriesData.push({
|
||||
type: "custom",
|
||||
name: index === 0 ? "出账金额" : "进账金额",
|
||||
renderItem: (params: any, api: any) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
return {
|
||||
type: "group",
|
||||
x: index === 1 ? 18 : -12,
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
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: colorArr[index][0]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[index][1]
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
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: colorArr[index][0]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[index][1]
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
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: colorArr[index][2]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
data: seriesArr[index]
|
||||
});
|
||||
}
|
||||
const yData1 = [100, 70, 20, 90, 50, 180, 10, 50, 20, 30, 50, 100];
|
||||
const yData2 = [10, 50, 20, 30, 50, 100, 100, 70, 20, 90, 50, 180];
|
||||
|
||||
watch(
|
||||
() => props,
|
||||
async () => {
|
||||
await nextTick(); // 确保DOM更新完成后再执行
|
||||
setOptions({
|
||||
// container: ".bar-card",
|
||||
// backgroundColor: "rgba(154,174,255,0.1)",
|
||||
tooltip: {
|
||||
// show: false
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
fontSize: 20 // 字体大小
|
||||
},
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
right: 15,
|
||||
feature: {
|
||||
// dataZoom: { yAxisIndex: "none" }, // 数据区域缩放
|
||||
// restore: { show: true }, // 重置
|
||||
myFull: {
|
||||
// 全屏
|
||||
show: false,
|
||||
title: "全屏",
|
||||
icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
|
||||
onclick: e => {
|
||||
// 全屏查看
|
||||
if (accountChartBarMonth.value.requestFullScreen) {
|
||||
// HTML W3C 提议
|
||||
accountChartBarMonth.value.requestFullScreen();
|
||||
} else if (accountChartBarMonth.value.msRequestFullscreen) {
|
||||
// IE11
|
||||
accountChartBarMonth.value.msRequestFullScreen();
|
||||
} else if (accountChartBarMonth.value.webkitRequestFullScreen) {
|
||||
// Webkit
|
||||
accountChartBarMonth.value.webkitRequestFullScreen();
|
||||
} else if (accountChartBarMonth.value.mozRequestFullScreen) {
|
||||
// Firefox
|
||||
accountChartBarMonth.value.mozRequestFullScreen();
|
||||
}
|
||||
// 退出全屏
|
||||
if (accountChartBarMonth.value.requestFullScreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (accountChartBarMonth.value.msRequestFullScreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (accountChartBarMonth.value.webkitRequestFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if (accountChartBarMonth.value.mozRequestFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
}
|
||||
},
|
||||
saveAsImage: {
|
||||
show: false,
|
||||
title: "保存"
|
||||
} // 导出图片
|
||||
}
|
||||
},
|
||||
color: ["#0BAF54", "#0240E0", "#00B58C", "#082FF8"],
|
||||
legend: {
|
||||
show: true,
|
||||
// right: 30,
|
||||
bottom: 6,
|
||||
itemGap: 30,
|
||||
itemWidth: 12,
|
||||
itemHeight: 8,
|
||||
data: ["出账金额", "进账金额", "出账笔数", "进账笔数"],
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#666"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 60,
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(80,112,242,1)"
|
||||
}
|
||||
},
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
inside: false,
|
||||
interval: 0,
|
||||
rotate: 0,
|
||||
// textStyle: {
|
||||
color: "#8C8C8C",
|
||||
fontWeight: 400,
|
||||
fontSize: 12,
|
||||
// },
|
||||
margin: 15
|
||||
},
|
||||
data: xAxisData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: `{a|} {b|交易时间特征(月)}`,
|
||||
nameTextStyle: {
|
||||
color: "#333",
|
||||
// align: "center",
|
||||
padding: [15, 0, 0, 70],
|
||||
// fontSize: 16,
|
||||
// fontWeight: "bold",
|
||||
verticalAlign: "middle",
|
||||
rich: {
|
||||
a: {
|
||||
backgroundColor: "#5070F2",
|
||||
width: 2,
|
||||
height: 17,
|
||||
verticalAlign: "middle"
|
||||
},
|
||||
b: {
|
||||
padding: [2, 0, 0, 0],
|
||||
fontSize: 16,
|
||||
fontWeight: "bold"
|
||||
}
|
||||
}
|
||||
},
|
||||
nameGap: 40,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(80,112,242,0.3)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
color: "#8C8C8C",
|
||||
fontWeight: 400,
|
||||
fontSize: 12,
|
||||
// },
|
||||
formatter: "{value}",
|
||||
margin: 15
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// name: "%",
|
||||
nameGap: 30,
|
||||
position: "right",
|
||||
nameTextStyle: {
|
||||
color: "#ffffff",
|
||||
fontWeight: 400,
|
||||
fontSize: 16
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "rgba(239, 247, 253, .1)"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(239, 247, 253, .1)"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: "#8C8C8C"
|
||||
},
|
||||
min: 0,
|
||||
max: Math.ceil(Math.max.apply(null, yData1) / 5) * 5,
|
||||
interval: Math.ceil(Math.max.apply(null, yData1) / 4)
|
||||
}
|
||||
],
|
||||
series: [
|
||||
...seriesData,
|
||||
{
|
||||
type: "bar",
|
||||
name: "出账金额",
|
||||
itemStyle: {
|
||||
color: "transparent"
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
data: seriesArr[0]
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
color: "transparent"
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
data: seriesArr[1]
|
||||
},
|
||||
{
|
||||
name: "出账笔数",
|
||||
type: "line",
|
||||
showSymbol: true,
|
||||
// smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "#FFA800"
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// areaStyle: {
|
||||
// normal: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(67, 239, 255, .3)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(1, 17, 49, .3)"
|
||||
// }
|
||||
// ])
|
||||
// }
|
||||
// },
|
||||
data: yData1
|
||||
},
|
||||
{
|
||||
name: "进账笔数",
|
||||
type: "line",
|
||||
showSymbol: true,
|
||||
// smooth: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "#6F47FF"
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
// areaStyle: {
|
||||
// normal: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(67, 239, 255, .3)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(1, 17, 49, .3)"
|
||||
// }
|
||||
// ])
|
||||
// }
|
||||
// },
|
||||
data: yData2
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="accountChartBarMonth" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
@ -0,0 +1,263 @@
|
||||
<script setup lang="ts">
|
||||
import { useECharts } from "@pureadmin/utils";
|
||||
import { type PropType, ref, computed, watch, nextTick } from "vue";
|
||||
import * as echarts from "echarts/core";
|
||||
import resultDefaultAvatar from "../../../assets/home/resultDefaultAvatar.png";
|
||||
import excelIcon from "@/assets/home/excel_icon.svg?component";
|
||||
|
||||
const props = defineProps({
|
||||
requireData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
},
|
||||
questionData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const accountChartBehaviorGraph = ref();
|
||||
const { setOptions } = useECharts(accountChartBehaviorGraph);
|
||||
const symbol = "image:///asset/get/s/data-1616488906907-TTcSsT2dL.png";
|
||||
|
||||
const dataNum = [
|
||||
{
|
||||
name: "节点1",
|
||||
x: 300,
|
||||
y: 80,
|
||||
value: 200,
|
||||
category: 0
|
||||
},
|
||||
{
|
||||
name: "节点2",
|
||||
x: 300,
|
||||
y: 220,
|
||||
value: 30,
|
||||
category: 0
|
||||
},
|
||||
{
|
||||
name: "节点3",
|
||||
x: 550,
|
||||
y: 150,
|
||||
value: 40,
|
||||
category: 1
|
||||
},
|
||||
{
|
||||
name: "节点4",
|
||||
x: 750,
|
||||
y: 80,
|
||||
value: 25,
|
||||
category: 2
|
||||
},
|
||||
{
|
||||
name: "节点5",
|
||||
x: 750,
|
||||
y: 150,
|
||||
value: 25,
|
||||
category: 2
|
||||
},
|
||||
{
|
||||
name: "节点6",
|
||||
x: 750,
|
||||
y: 220,
|
||||
value: 25,
|
||||
category: 2
|
||||
}
|
||||
];
|
||||
const linkData = [
|
||||
{
|
||||
source: "节点3",
|
||||
target: "节点1",
|
||||
lineStyle: {
|
||||
// normal: {
|
||||
color: "#5070F2",
|
||||
curveness: 0.1
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
source: "节点3",
|
||||
target: "节点2",
|
||||
lineStyle: {
|
||||
// normal: {
|
||||
curveness: -0.1,
|
||||
color: "#5070F2"
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
source: "节点3",
|
||||
target: "节点4",
|
||||
lineStyle: {
|
||||
// normal: {
|
||||
curveness: -0.1,
|
||||
color: "#FFAC06"
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
source: "节点3",
|
||||
target: "节点5",
|
||||
lineStyle: {
|
||||
// normal: {
|
||||
curveness: 0,
|
||||
color: "#FFAC06"
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
source: "节点3",
|
||||
target: "节点6",
|
||||
lineStyle: {
|
||||
// normal: {
|
||||
curveness: 0.1,
|
||||
color: "#FFAC06"
|
||||
// }
|
||||
}
|
||||
}
|
||||
];
|
||||
watch(
|
||||
() => props,
|
||||
async () => {
|
||||
await nextTick(); // 确保DOM更新完成后再执行
|
||||
setOptions({
|
||||
// container: ".bar-card",
|
||||
// backgroundColor: "rgba(154,174,255,0.1)",
|
||||
// tooltip: {
|
||||
// show: false,
|
||||
// trigger: "item",
|
||||
// formatter: function (params) {
|
||||
// console.log(params);
|
||||
// return params.name + ":" + params.value + "元";
|
||||
// }
|
||||
// },
|
||||
// title: {
|
||||
// text: "{a|} {b|资金流}",
|
||||
// left: 20,
|
||||
// top: 12,
|
||||
// textStyle: {
|
||||
// lineHeight: 24,
|
||||
// rich: {
|
||||
// a: {
|
||||
// backgroundColor: "#5070F2",
|
||||
// width: 2,
|
||||
// height: 17,
|
||||
// verticalAlign: "middle"
|
||||
// },
|
||||
// b: {
|
||||
// padding: [2, 0, 0, 0],
|
||||
// fontSize: 16,
|
||||
// color: "#333",
|
||||
// // color: "333",
|
||||
// fontWeight: "bold"
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// center: [600, 185],
|
||||
// grid: {
|
||||
// top: 0,
|
||||
// left: 0,
|
||||
// right: 0,
|
||||
// bottom: 0,
|
||||
// containLabel: true
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
type: "graph",
|
||||
layout: "none",
|
||||
symbolSize: 48,
|
||||
coordinateSystem: null,
|
||||
label: {
|
||||
// normal: {
|
||||
show: false,
|
||||
position: "bottom",
|
||||
color: "#ffffff"
|
||||
// }
|
||||
},
|
||||
edgeSymbol: ["none", "arrow"],
|
||||
edgeSymbolSize: 5,
|
||||
categories: [
|
||||
{
|
||||
name: "资本",
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#3B9FFE"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#5070F2"
|
||||
}
|
||||
])
|
||||
// }
|
||||
},
|
||||
label: {
|
||||
// normal: {
|
||||
fontSize: "14"
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "大公司",
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#2832F3"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#757AFF"
|
||||
}
|
||||
])
|
||||
// }
|
||||
},
|
||||
label: {
|
||||
// normal: {
|
||||
fontSize: "20"
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "小公司",
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#FFAC06"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#FFDA8D"
|
||||
}
|
||||
])
|
||||
// }
|
||||
},
|
||||
label: {
|
||||
// normal: {
|
||||
fontSize: "14"
|
||||
// }
|
||||
}
|
||||
}
|
||||
],
|
||||
data: dataNum,
|
||||
links: linkData
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="accountChartBehaviorGraph" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
@ -0,0 +1,226 @@
|
||||
<script setup lang="ts">
|
||||
import { useECharts } from "@pureadmin/utils";
|
||||
import { type PropType, ref, computed, watch, nextTick } from "vue";
|
||||
import * as echarts from "echarts/core";
|
||||
import { fa } from "element-plus/es/locale/index.mjs";
|
||||
|
||||
const props = defineProps({
|
||||
requireData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
},
|
||||
questionData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const accountChartBoxPlot = ref();
|
||||
const { setOptions } = useECharts(accountChartBoxPlot);
|
||||
|
||||
watch(
|
||||
() => props,
|
||||
async () => {
|
||||
await nextTick(); // 确保DOM更新完成后再执行
|
||||
setOptions({
|
||||
// container: ".bar-card",
|
||||
// backgroundColor: "rgba(154,174,255,0.1)",
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
title: {
|
||||
text: "{a|} {b|交易金额特征}",
|
||||
show: false,
|
||||
left: 18,
|
||||
top: 12,
|
||||
textStyle: {
|
||||
lineHeight: 24,
|
||||
rich: {
|
||||
a: {
|
||||
backgroundColor: "#5070F2",
|
||||
width: 2,
|
||||
height: 17,
|
||||
verticalAlign: "middle"
|
||||
},
|
||||
b: {
|
||||
padding: [2, 0, 0, 0],
|
||||
fontSize: 16,
|
||||
color: "#333",
|
||||
// color: "333",
|
||||
fontWeight: "bold"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 80,
|
||||
left: 20,
|
||||
right: 50,
|
||||
bottom: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
// name: "充电起止SOC区间",
|
||||
// nameTextStyle: {
|
||||
// color: "#999",
|
||||
// padding: [0, 0, -20, 0],
|
||||
// verticalAlign: "bottom"
|
||||
// },
|
||||
// nameGap: -40,
|
||||
data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#EFF0F1"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#DCDCDC"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// textStyle: {
|
||||
color: "#999"
|
||||
// },
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: "数量",
|
||||
min: 0,
|
||||
max: 200,
|
||||
nameTextStyle: {
|
||||
color: "#999",
|
||||
padding: [-15, 0, 0, -33]
|
||||
// verticalAlign: "top"
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(80,112,242,0.2)",
|
||||
type: "dashed"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#DCDCDC"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// textStyle: {
|
||||
color: "#999"
|
||||
// },
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
min: 0,
|
||||
max: 120,
|
||||
nameTextStyle: {
|
||||
color: "#999",
|
||||
padding: [-15, 0, 0, 0],
|
||||
verticalAlign: "top"
|
||||
},
|
||||
position: "right",
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
// textStyle: {
|
||||
color: "#999"
|
||||
// },
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
yAxisIndex: 0,
|
||||
type: "boxplot",
|
||||
silent: true,
|
||||
boxWidth: [28, 28],
|
||||
// hoverAnimation: false,
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
borderColor: "#1E7FF1",
|
||||
borderWidth: 1,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(30, 127, 241, 0.7)" },
|
||||
{ offset: 1, color: "rgba(30, 127, 241, 0)" }
|
||||
]),
|
||||
color0: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "rgba(30, 127, 241, 0)" },
|
||||
{ offset: 1, color: "rgba(30, 127, 241, 0.7)" }
|
||||
])
|
||||
// },
|
||||
},
|
||||
data: [
|
||||
[50, 70, 85, 100, 120], // [min, Q1, median (or Q2), Q3, max]
|
||||
[25, 38, 56, 70, 85],
|
||||
[35, 45, 60, 86, 100],
|
||||
[40, 50, 75, 90, 110],
|
||||
[25, 38, 56, 70, 85],
|
||||
[50, 70, 85, 100, 120],
|
||||
[10, 50, 60, 70, 80]
|
||||
]
|
||||
}
|
||||
// {
|
||||
// name: "充电电流",
|
||||
// yAxisIndex: 1,
|
||||
// type: "boxplot",
|
||||
// silent: true,
|
||||
// boxWidth: [28, 28],
|
||||
// // hoverAnimation: false,
|
||||
// itemStyle: {
|
||||
// // normal: {
|
||||
// borderColor: "#15D0FC",
|
||||
// borderWidth: 1,
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: "rgba(21, 208, 252, 0.7)" },
|
||||
// { offset: 1, color: "rgba(21, 208, 252, 0)" }
|
||||
// ]),
|
||||
// color0: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: "rgba(21, 208, 252, 0)" },
|
||||
// { offset: 1, color: "rgba(21, 208, 252, 0.7)" }
|
||||
// ])
|
||||
// // }
|
||||
// },
|
||||
// data: [
|
||||
// [50, 70, 85, 100, 120], // [min, Q1, median (or Q2), Q3, max]
|
||||
// [25, 38, 56, 70, 85],
|
||||
// [35, 45, 60, 86, 100],
|
||||
// [40, 50, 75, 90, 110]
|
||||
// ]
|
||||
// }
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="accountChartBoxPlot" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
@ -0,0 +1,165 @@
|
||||
<script setup lang="ts">
|
||||
import { useECharts } from "@pureadmin/utils";
|
||||
import { type PropType, ref, computed, watch, nextTick } from "vue";
|
||||
import * as echarts from "echarts/core";
|
||||
import resultDefaultAvatar from "../../../assets/home/resultDefaultAvatar.png";
|
||||
import excelIcon from "@/assets/home/excel_icon.svg?component";
|
||||
|
||||
const props = defineProps({
|
||||
requireData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
},
|
||||
questionData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const accountChartGraph = ref();
|
||||
const { setOptions } = useECharts(accountChartGraph);
|
||||
const symbol = "image:///asset/get/s/data-1616488906907-TTcSsT2dL.png";
|
||||
|
||||
const dataNum = [
|
||||
{
|
||||
name: "张三三",
|
||||
value: { num: 55, type: 0 },
|
||||
draggable: false,
|
||||
x: 600,
|
||||
y: 185,
|
||||
symbolSize: 48,
|
||||
fixed: true,
|
||||
symbol: "image://" + resultDefaultAvatar
|
||||
},
|
||||
{
|
||||
name: "张芳芳",
|
||||
value: { num: 55, type: 1 },
|
||||
category: 1,
|
||||
draggable: false,
|
||||
x: 500,
|
||||
y: 184
|
||||
},
|
||||
{
|
||||
name: "李四1",
|
||||
value: { num: 55, type: 2 },
|
||||
category: 1,
|
||||
draggable: false,
|
||||
x: 700,
|
||||
y: 168
|
||||
},
|
||||
{
|
||||
name: "李四2",
|
||||
value: { num: 55, type: 3 },
|
||||
category: 1,
|
||||
draggable: false,
|
||||
x: 700,
|
||||
y: 198
|
||||
}
|
||||
];
|
||||
const linkData = [
|
||||
{ source: 0, target: 1, value: "出账金额" },
|
||||
{ source: 0, target: 2, value: "出账金额" },
|
||||
{ source: 0, target: 3, value: "出账金额" }
|
||||
];
|
||||
watch(
|
||||
() => props,
|
||||
async () => {
|
||||
await nextTick(); // 确保DOM更新完成后再执行
|
||||
setOptions({
|
||||
// container: ".bar-card",
|
||||
// backgroundColor: "rgba(154,174,255,0.1)",
|
||||
// tooltip: {
|
||||
// trigger: "item",
|
||||
// formatter: function (params) {
|
||||
// console.log(params);
|
||||
// return params.name + ":" + params.value + "元";
|
||||
// }
|
||||
// },
|
||||
title: {
|
||||
text: "{a|} {b|资金流}",
|
||||
left: 20,
|
||||
top: 12,
|
||||
textStyle: {
|
||||
lineHeight: 24,
|
||||
rich: {
|
||||
a: {
|
||||
backgroundColor: "#5070F2",
|
||||
width: 2,
|
||||
height: 17,
|
||||
verticalAlign: "middle"
|
||||
},
|
||||
b: {
|
||||
padding: [2, 0, 0, 0],
|
||||
fontSize: 16,
|
||||
color: "#333",
|
||||
// color: "333",
|
||||
fontWeight: "bold"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
center: [600, 185],
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "graph",
|
||||
layout: "none", // 图的布局
|
||||
symbol: "image://" + resultDefaultAvatar, // 默认是「未感染」
|
||||
symbolSize: 48,
|
||||
categories: [
|
||||
{ name: "未感染" },
|
||||
{ name: "无症状感染" },
|
||||
{ name: "确诊病例" }
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
align: "center",
|
||||
fontSize: 14,
|
||||
color: "#666",
|
||||
formatter: params => {
|
||||
return `\n\n\n\n\n\n\n${params.name}`;
|
||||
},
|
||||
rich: {
|
||||
a0: {
|
||||
color: "#fff",
|
||||
padding: [4, 5],
|
||||
backgroundColor: "rgba(255, 86, 76, .45)"
|
||||
},
|
||||
a1: {
|
||||
color: "#fff",
|
||||
padding: [4, 5],
|
||||
backgroundColor: "rgba(255, 86, 76, .35)"
|
||||
}
|
||||
}
|
||||
},
|
||||
edgeSymbol: ["circle", "arrow"],
|
||||
edgeSymbolSize: [4, 8],
|
||||
edgeLabel: { show: true, formatter: "{c}" },
|
||||
data: dataNum,
|
||||
links: linkData,
|
||||
lineStyle: {
|
||||
opacity: 0.9,
|
||||
width: 1,
|
||||
curveness: 0,
|
||||
color: "#5070F2"
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="accountChartGraph" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
@ -0,0 +1,214 @@
|
||||
<script setup lang="ts">
|
||||
import { useECharts } from "@pureadmin/utils";
|
||||
import { type PropType, ref, computed, watch, nextTick } from "vue";
|
||||
import * as echarts from "echarts/core";
|
||||
import { fa } from "element-plus/es/locale/index.mjs";
|
||||
|
||||
const props = defineProps({
|
||||
requireData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
},
|
||||
questionData: {
|
||||
type: Array as PropType<Array<number>>,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const accountChartScatter = ref();
|
||||
const { setOptions } = useECharts(accountChartScatter);
|
||||
|
||||
// var getname = ["SCI", "SSCI", "EI", "ISTP", "AHCI", "ISSHP", "其他"]; //期刊类别名称
|
||||
// var getvalue = [1811, 868, 320, 208, 190, 120, 100]; //发表论文总数
|
||||
const getamount = [200, 100, 500, 400, 600, 1000, 900]; //人均发表篇数
|
||||
const getorderCount = [10, 15, 20, 30, 48, 50, 70]; //总被引用数
|
||||
|
||||
//2020年
|
||||
// var getname2 = ["SCI", "SSCI", "EI", "ISTP", "AHCI", "ISSHP", "其他"]; //期刊类别名称
|
||||
// var getvalue2 = [2811, 1568, 420, 308, 290, 220, 190]; //发表论文总数
|
||||
const getamount2 = [100, 300, 500, 700, 900, 1200, 1500]; // 交易金额
|
||||
const getorderCount2 = [3, 10, 70, 48, 42, 65, 30]; //总被引用数
|
||||
|
||||
let datas = [];
|
||||
for (let i = 0; i < getamount.length; i++) {
|
||||
datas.push({
|
||||
// name: getname[i],
|
||||
// value: getvalue[i],
|
||||
amount: getamount[i],
|
||||
orderCount: getorderCount[i]
|
||||
});
|
||||
}
|
||||
|
||||
let datas2 = [];
|
||||
for (let i = 0; i < getamount2.length; i++) {
|
||||
datas2.push({
|
||||
// name: getname2[i],
|
||||
// value: getvalue2[i],
|
||||
amount: getamount2[i],
|
||||
orderCount: getorderCount2[i]
|
||||
});
|
||||
}
|
||||
function packDatas(datas) {
|
||||
let packedDatas = datas.map(data => {
|
||||
// let name = data["name"];
|
||||
let dispathCount = data["orderCount"];
|
||||
let refs = data["amount"];
|
||||
// let avt = data["value"];
|
||||
return [dispathCount, refs];
|
||||
});
|
||||
|
||||
return packedDatas;
|
||||
}
|
||||
function packDatas2(datas2) {
|
||||
let packedDatas2 = datas2.map(data => {
|
||||
// let name = data["name"];
|
||||
let dispathCount = data["orderCount"];
|
||||
let refs = data["amount"];
|
||||
// let avt = data["value"];
|
||||
return [dispathCount, refs];
|
||||
});
|
||||
|
||||
return packedDatas2;
|
||||
}
|
||||
let packedDatas = packDatas(datas);
|
||||
let packedDatas2 = packDatas2(datas2);
|
||||
|
||||
watch(
|
||||
() => props,
|
||||
async () => {
|
||||
await nextTick(); // 确保DOM更新完成后再执行
|
||||
setOptions({
|
||||
// container: ".bar-card",
|
||||
// backgroundColor: "rgba(154,174,255,0.1)",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: function (params) {
|
||||
console.log(params);
|
||||
return params.value + "元";
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: "{a|} {b|交易金额特征}",
|
||||
left: 18,
|
||||
top: 12,
|
||||
textStyle: {
|
||||
lineHeight: 24,
|
||||
rich: {
|
||||
a: {
|
||||
backgroundColor: "#5070F2",
|
||||
width: 2,
|
||||
height: 17,
|
||||
verticalAlign: "middle"
|
||||
},
|
||||
b: {
|
||||
padding: [2, 0, 0, 0],
|
||||
fontSize: 16,
|
||||
color: "#333",
|
||||
// color: "333",
|
||||
fontWeight: "bold"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 80,
|
||||
left: 20,
|
||||
right: 50,
|
||||
bottom: 40,
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
name: "交易金额",
|
||||
nameTextStyle: {
|
||||
color: "#666",
|
||||
padding: [0, 26, 0, 0]
|
||||
},
|
||||
nameGap: 15,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(80,112,242,0.2)",
|
||||
type: "dashed"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#999"
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#DCDCDC"
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
name: "次数",
|
||||
nameTextStyle: {
|
||||
color: "#666"
|
||||
},
|
||||
// data: ["10", "20", "30", "40", "50"],
|
||||
axisLabel: {
|
||||
color: "#999"
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#DCDCDC"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "rgba(80,112,242,0.2)",
|
||||
type: "dashed"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: false,
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "2010",
|
||||
symbolSize: function (data) {
|
||||
return data[1] / 20;
|
||||
},
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
color: "#9CC8FF",
|
||||
borderColor: "#4B95F3",
|
||||
borderWidth: 2
|
||||
// }
|
||||
},
|
||||
data: packedDatas,
|
||||
type: "scatter"
|
||||
},
|
||||
{
|
||||
name: "2020",
|
||||
symbolSize: function (data) {
|
||||
return data[1] / 20;
|
||||
},
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
color: "#FFD291",
|
||||
borderColor: "#F3B14B",
|
||||
borderWidth: 2
|
||||
// }
|
||||
},
|
||||
data: packedDatas2,
|
||||
type: "scatter"
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="accountChartScatter" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
@ -1,2 +1,8 @@
|
||||
export { default as AccountChartBar } from "./AccountChartBar.vue";
|
||||
export { default as AccountChartPie } from "./AccountChartPie.vue";
|
||||
export { default as AccountChartGraph } from "./AccountChartGraph.vue";
|
||||
export { default as AccountChartBarMonth } from "./AccountChartBarMonth.vue";
|
||||
export { default as AccountChartBarDate } from "./AccountChartBarDate.vue";
|
||||
export { default as AccountChartScatter } from "./AccountChartScatter.vue";
|
||||
export { default as AccountChartBoxPlot } from "./AccountChartBoxPlot.vue";
|
||||
export { default as AccountChartBehaviorGraph } from "./AccountChartBehaviorGraph.vue";
|
||||
|
||||
Loading…
Reference in New Issue