forked from kongfp/Tp_Web2.0
feat: 首页图表开发
JINGYJ
1 year ago
parent
fff9fc175c
commit
4daa662ef3
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,10 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="16" cy="16" r="16" fill="url(#paint0_linear_1959_23869)"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3993 8.80005C9.51566 8.80005 8.79932 9.51641 8.79932 10.4V21.6C8.79932 22.4837 9.51566 23.2 10.3993 23.2H21.5993C22.483 23.2 23.1993 22.4837 23.1993 21.6V10.4C23.1993 9.51641 22.483 8.80005 21.5993 8.80005H10.3993ZM12.7993 16.8C12.7993 16.3582 12.4411 16 11.9993 16C11.5575 16 11.1993 16.3582 11.1993 16.8V20C11.1993 20.4419 11.5575 20.8 11.9993 20.8C12.4411 20.8 12.7993 20.4419 12.7993 20V16.8ZM15.9993 13.6C16.4411 13.6 16.7993 13.9582 16.7993 14.4V20C16.7993 20.4419 16.4411 20.8 15.9993 20.8C15.5575 20.8 15.1993 20.4419 15.1993 20V14.4C15.1993 13.9582 15.5575 13.6 15.9993 13.6ZM20.7993 12C20.7993 11.5582 20.4411 11.2 19.9993 11.2C19.5575 11.2 19.1993 11.5582 19.1993 12V20C19.1993 20.4419 19.5575 20.8 19.9993 20.8C20.4411 20.8 20.7993 20.4419 20.7993 20V12Z" fill="white"/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_1959_23869" x1="16" y1="0" x2="16" y2="32" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#FFBC43"/>
|
||||||
|
<stop offset="1" stop-color="#FF850C"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,22 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="32" height="32" fill="#EEEEEE"/>
|
||||||
|
<g clip-path="url(#clip)">
|
||||||
|
<rect width="1440" height="900" transform="translate(-1048 -108)" fill="#F5F5F5"/>
|
||||||
|
<rect x="-16" y="-16" width="384" height="156" rx="8" fill="white"/>
|
||||||
|
<circle cx="16" cy="16" r="16" fill="url(#linear)"/>
|
||||||
|
<path d="M22.6668 9.66675H9.3335V18.3334H22.6668V9.66675Z" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M15.3335 12.6667L17.3335 14.0001L15.3335 15.3334V12.6667Z" fill="white" stroke="#2ED7D7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M11.6667 21.3333H10" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M13.6665 21.3333H21.9998" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M13.6665 21.3333C13.6665 21.8856 13.2188 22.3333 12.6665 22.3333C12.1142 22.3333 11.6665 21.8856 11.6665 21.3333C11.6665 20.781 12.1142 20.3333 12.6665 20.3333C13.2188 20.3333 13.6665 20.781 13.6665 21.3333Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
<defs id="linear">
|
||||||
|
<linearGradient id="linear" x1="4.5" y1="7" x2="27.5" y2="30" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#5FFCFC"/>
|
||||||
|
<stop offset="1" stop-color="#13C2C2"/>
|
||||||
|
</linearGradient>
|
||||||
|
<clipPath id="clip">
|
||||||
|
<rect width="1440" height="900" fill="white" transform="translate(-1048 -108)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,32 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="32" height="32" fill="#EEEEEE"/>
|
||||||
|
<g id="首页" clip-path="url(#clip0_111_2646)">
|
||||||
|
<rect width="1440" height="900" transform="translate(-648 -108)" fill="#F5F5F5"/>
|
||||||
|
<g id="Group 427319220">
|
||||||
|
<g id="Group 427319136">
|
||||||
|
<rect id="Rectangle 34624181" x="-16" y="-16" width="384" height="156" rx="8" fill="white"/>
|
||||||
|
<g id="Frame 427318917">
|
||||||
|
<g id="Frame 427318916">
|
||||||
|
<g id="Icon">
|
||||||
|
<circle id="Ellipse 3" cx="16" cy="16" r="16" fill="url(#paint0_linear_111_2646)"/>
|
||||||
|
<g id="Frame">
|
||||||
|
<path id="Vector" d="M15.9999 17.1668L12.1111 14.8335L8.22217 17.1668V21.8335L12.1111 24.1668L15.9999 21.8335V17.1668Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path id="Vector_2" d="M23.7778 17.1668L19.8889 14.8335L16 17.1668V21.8335L19.8889 24.1668L23.7778 21.8335V17.1668Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path id="Vector_3" d="M19.8891 10.1668L16.0002 7.8335L12.1113 10.1668V14.8335L16.0002 17.1668L19.8891 14.8335V10.1668Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_111_2646" x1="16" y1="0" x2="16" y2="32" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#7399FB"/>
|
||||||
|
<stop offset="1" stop-color="#1A59F8"/>
|
||||||
|
</linearGradient>
|
||||||
|
<clipPath id="clip0_111_2646">
|
||||||
|
<rect width="1440" height="900" fill="white" transform="translate(-648 -108)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 411 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 636 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 37 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -1,6 +1,9 @@
|
|||||||
import bg from "@/assets/login/bg.png";
|
import bg from "@/assets/login/bg.png";
|
||||||
|
import bg_cz from "@/assets/login/bg_cz.png";
|
||||||
|
import leftLogo from "@/assets/login/leftLogo.svg?component";
|
||||||
|
import leftLogo_cz from "@/assets/login/leftLogo_cz.svg?component";
|
||||||
import avatar from "@/assets/login/avatar.svg?component";
|
import avatar from "@/assets/login/avatar.svg?component";
|
||||||
import illustration from "@/assets/login/illustration.svg?component";
|
|
||||||
import logo from "@/assets/login/logo.svg?component";
|
import logo from "@/assets/login/logo.svg?component";
|
||||||
|
import illustration from "@/assets/login/illustration.svg?component";
|
||||||
|
|
||||||
export { bg, avatar, illustration, logo };
|
export { bg, avatar, illustration, leftLogo, logo, bg_cz, leftLogo_cz };
|
||||||
|
|||||||
@ -0,0 +1,117 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, watch, type Ref } from "vue";
|
||||||
|
import { useAppStoreHook } from "@/store/modules/app";
|
||||||
|
import {
|
||||||
|
delay,
|
||||||
|
useDark,
|
||||||
|
useECharts,
|
||||||
|
type EchartOptions
|
||||||
|
} from "@pureadmin/utils";
|
||||||
|
import * as echarts from "echarts/core";
|
||||||
|
|
||||||
|
const { isDark } = useDark();
|
||||||
|
|
||||||
|
const theme: EchartOptions["theme"] = computed(() => {
|
||||||
|
return isDark.value ? "dark" : "light";
|
||||||
|
});
|
||||||
|
|
||||||
|
const barChartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
|
||||||
|
theme
|
||||||
|
});
|
||||||
|
|
||||||
|
setOptions(
|
||||||
|
{
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "5%",
|
||||||
|
right: "0%",
|
||||||
|
top: "5%",
|
||||||
|
bottom: "6%"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
//@ts-expect-error
|
||||||
|
right: true,
|
||||||
|
data: ["watchers", "fork", "star"]
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0
|
||||||
|
// width: "70",
|
||||||
|
// overflow: "truncate"
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
"1月",
|
||||||
|
"2月",
|
||||||
|
"3月",
|
||||||
|
"4月",
|
||||||
|
"5月",
|
||||||
|
"6月",
|
||||||
|
"7月",
|
||||||
|
"8月",
|
||||||
|
"9月",
|
||||||
|
"10月",
|
||||||
|
"11月",
|
||||||
|
"12月"
|
||||||
|
],
|
||||||
|
triggerEvent: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
triggerEvent: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "违规数量",
|
||||||
|
type: "bar",
|
||||||
|
barWidth: "30%",
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#0463F2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#0463F2"
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
data: [200, 320, 800, 700, 320, 600, 500, 320, 400, 1200, 20, 80]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
addTooltip: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "click",
|
||||||
|
callback: params => {
|
||||||
|
console.log("click", params);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => useAppStoreHook().getSidebarStatus,
|
||||||
|
() => {
|
||||||
|
delay(600).then(() => resize());
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div ref="barChartRef" style="width: 100%; height: 35vh" />
|
||||||
|
</template>
|
||||||
@ -0,0 +1,171 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
// import { useIntervalFn } from "@vueuse/core";
|
||||||
|
import { ref, computed, watch, type Ref } from "vue";
|
||||||
|
import { useAppStoreHook } from "@/store/modules/app";
|
||||||
|
import {
|
||||||
|
delay,
|
||||||
|
useDark,
|
||||||
|
useECharts,
|
||||||
|
type EchartOptions
|
||||||
|
} from "@pureadmin/utils";
|
||||||
|
|
||||||
|
const { isDark } = useDark();
|
||||||
|
|
||||||
|
const theme: EchartOptions["theme"] = computed(() => {
|
||||||
|
return isDark.value ? "dark" : "default";
|
||||||
|
});
|
||||||
|
|
||||||
|
const lineChartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
const { setOptions, resize } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
|
||||||
|
theme
|
||||||
|
});
|
||||||
|
|
||||||
|
const xData = (() => {
|
||||||
|
const data: any[] = [];
|
||||||
|
for (let i = 1; i < 31; i++) {
|
||||||
|
data.push(`${i}日`);
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
})();
|
||||||
|
|
||||||
|
setOptions(
|
||||||
|
{
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "6%",
|
||||||
|
right: "2%",
|
||||||
|
top: "5%",
|
||||||
|
bottom: "9%"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
//@ts-expect-error
|
||||||
|
right: true,
|
||||||
|
data: ["fork", "star"]
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
triggerEvent: true,
|
||||||
|
type: "category",
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: xData
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
triggerEvent: true,
|
||||||
|
type: "value",
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
// 分隔线
|
||||||
|
type: "dashed", // 线的类型
|
||||||
|
color: "#E0E0E0" // 分隔线颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
//Y轴数值可添加百分号
|
||||||
|
formatter: "{value}h"
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: "slider",
|
||||||
|
show: false,
|
||||||
|
realtime: true,
|
||||||
|
startValue: 0,
|
||||||
|
endValue: 29
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "耗费时长",
|
||||||
|
type: "line",
|
||||||
|
symbolSize: 6,
|
||||||
|
symbol: "circle",
|
||||||
|
color: "#477BFF",
|
||||||
|
markPoint: {
|
||||||
|
label: {
|
||||||
|
color: "#fff"
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: "max",
|
||||||
|
name: "最大值"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "min",
|
||||||
|
name: "最小值"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
10, 9, 2, 2, 2, 3, 4, 5, 7, 9, 11, 20, 14, 12, 7, 3, 4, 5, 8, 2, 6, 3,
|
||||||
|
2, 10, 9, 5, 10, 9, 4, 8
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
addTooltip: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "click",
|
||||||
|
callback: params => {
|
||||||
|
console.log("click", params);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "contextmenu",
|
||||||
|
callback: params => {
|
||||||
|
console.log("contextmenu", params);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 点击空白处
|
||||||
|
{
|
||||||
|
type: "zrender",
|
||||||
|
name: "click",
|
||||||
|
callback: params => {
|
||||||
|
console.log("点击空白处", params);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// const a = 1;
|
||||||
|
// useIntervalFn(() => {
|
||||||
|
// if (a == xData.length - 24) {
|
||||||
|
// a = 0;
|
||||||
|
// }
|
||||||
|
// getInstance()!.dispatchAction({
|
||||||
|
// type: "dataZoom",
|
||||||
|
// startValue: a,
|
||||||
|
// endValue: a + 24
|
||||||
|
// });
|
||||||
|
// a++;
|
||||||
|
// }, 2000);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => useAppStoreHook().getSidebarStatus,
|
||||||
|
() => {
|
||||||
|
delay(600).then(() => resize());
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div ref="lineChartRef" style="width: 100%; height: 25vh" />
|
||||||
|
</template>
|
||||||
@ -0,0 +1,180 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, watch, type Ref } from "vue";
|
||||||
|
import { useAppStoreHook } from "@/store/modules/app";
|
||||||
|
import {
|
||||||
|
delay,
|
||||||
|
useDark,
|
||||||
|
useECharts,
|
||||||
|
type EchartOptions
|
||||||
|
} from "@pureadmin/utils";
|
||||||
|
|
||||||
|
const { isDark } = useDark();
|
||||||
|
|
||||||
|
const theme: EchartOptions["theme"] = computed(() => {
|
||||||
|
return isDark.value ? "dark" : "light";
|
||||||
|
});
|
||||||
|
|
||||||
|
const pieChartRef = ref<HTMLDivElement | null>(null);
|
||||||
|
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
|
||||||
|
theme
|
||||||
|
});
|
||||||
|
const trafficWay = [
|
||||||
|
{ value: 1600, name: "正常视频" },
|
||||||
|
{ value: 400, name: "无效视频" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const mapData = [];
|
||||||
|
const color = ["#FFAB00", "#3B3EFF"];
|
||||||
|
const ColorCs = () => {
|
||||||
|
for (let i = 0; i < trafficWay.length; i++) {
|
||||||
|
mapData.push({
|
||||||
|
value: trafficWay[i].value,
|
||||||
|
name: trafficWay[i].name,
|
||||||
|
label: {
|
||||||
|
rich: {
|
||||||
|
percent: {
|
||||||
|
color: color[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return mapData;
|
||||||
|
};
|
||||||
|
|
||||||
|
setOptions(
|
||||||
|
{
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
icon: "circle",
|
||||||
|
//@ts-expect-error
|
||||||
|
right: true
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "视频分析",
|
||||||
|
type: "pie",
|
||||||
|
top: "10%",
|
||||||
|
bottom: "10%",
|
||||||
|
radius: "80%",
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
color: ["#FFAB00", "#3B3EFF"],
|
||||||
|
// roseType: "radius",
|
||||||
|
label: {
|
||||||
|
formatter: function (params) {
|
||||||
|
let percent = "0";
|
||||||
|
let total = 0;
|
||||||
|
for (let i = 0; i < trafficWay.length; i++) {
|
||||||
|
total += trafficWay[i].value;
|
||||||
|
}
|
||||||
|
percent = (((params.value as any) / total) * 100).toFixed(0);
|
||||||
|
if (params.name !== "") {
|
||||||
|
// return params.name + '\n' + percent + '%';
|
||||||
|
return (
|
||||||
|
"{percent|" + percent + "%}" + "\n{name|" + params.name + "}"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
padding: [0, -55],
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
fontSize: 12,
|
||||||
|
padding: [5, 0],
|
||||||
|
align: "left"
|
||||||
|
},
|
||||||
|
percent: {
|
||||||
|
fontSize: 14,
|
||||||
|
align: "left",
|
||||||
|
fontWeight: "bolder",
|
||||||
|
padding: [5, 0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
length: 30,
|
||||||
|
length2: 90 //第二条线
|
||||||
|
},
|
||||||
|
data: ColorCs()
|
||||||
|
// emphasis: {
|
||||||
|
// itemStyle: {
|
||||||
|
// shadowBlur: 10,
|
||||||
|
// shadowOffsetX: 0,
|
||||||
|
// shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "pie",
|
||||||
|
color: ["#155BD4", "rgba(255,255,255,0)"],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
radius: ["76%", "78%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
// hoverAnimation: false,
|
||||||
|
tooltip: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center"
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
//选中的样式
|
||||||
|
label: {
|
||||||
|
show: true //选中时不显示数据标签
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true, //选中时不显示数据标签引导线
|
||||||
|
// length: 50,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
type: "solid"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
// normal: {
|
||||||
|
show: false
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
data: new Array(80).fill(10).map(() => {
|
||||||
|
return {
|
||||||
|
name: "",
|
||||||
|
value: 60
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "click",
|
||||||
|
callback: params => {
|
||||||
|
console.log("click", params);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 点击空白处
|
||||||
|
{
|
||||||
|
type: "zrender",
|
||||||
|
name: "click",
|
||||||
|
callback: params => {
|
||||||
|
console.log("点击空白处", params);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => useAppStoreHook().getSidebarStatus,
|
||||||
|
() => {
|
||||||
|
delay(600).then(() => resize());
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div ref="pieChartRef" style="width: 100%; height: 25vh" />
|
||||||
|
</template>
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import abnormal from "@/assets/home/abnormal.svg?component";
|
||||||
|
import resource from "@/assets/home/resource.svg?component";
|
||||||
|
import analysis from "@/assets/home/analysis.svg?component";
|
||||||
|
|
||||||
|
export { abnormal, resource, analysis };
|
||||||
Loading…
Reference in New Issue