feat: 3d柱状图和饼图echarts开发
JINGYJ
1 year ago
parent
fcce0dfcad
commit
87ff2d8f9e
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,12 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_389_519)">
|
||||
<path d="M3.19998 6.11671e-06C3.04281 -0.00050621 2.8872 0.0311704 2.74273 0.0930842C2.59826 0.154998 2.46801 0.245838 2.35998 0.360006C2.14 0.600006 2.00001 0.900006 2.00001 1.20001V22.8C1.99949 22.9572 2.03117 23.1128 2.09308 23.2572C2.155 23.4017 2.24584 23.532 2.36001 23.64C2.46921 23.7526 2.5997 23.8425 2.74389 23.9043C2.88809 23.9661 3.04313 23.9986 3.20001 24H20.8C20.9571 24.0005 21.1128 23.9688 21.2572 23.9069C21.4017 23.845 21.5319 23.7542 21.64 23.64C21.7526 23.5308 21.8424 23.4003 21.9042 23.2561C21.966 23.1119 21.9986 22.9569 22 22.8V6.80002L15.2 6.11671e-06H3.19998Z" fill="#00B632"/>
|
||||
<path d="M22.0002 6.79999H16.4002C16.0844 6.7923 15.7836 6.6634 15.5602 6.44001C15.3368 6.21661 15.2079 5.91583 15.2002 5.59999V0L22.0002 6.79999Z" fill="#7FDA98"/>
|
||||
<path d="M10.5119 13.8316L6.09546 7.80469H9.14805L12.0375 12.1188L15.0595 7.80469H18.0148L13.4987 13.8316L18.2402 20.2439H15.1571L11.9718 15.6725L8.7945 20.2734H5.77148L10.5119 13.8316Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_389_519">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,5 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.59974 1.99999C7.59974 2.33136 7.33111 2.59999 6.99974 2.59999C6.11562 2.59999 4.9273 2.89854 3.97064 3.70803C3.03506 4.49967 2.26641 5.82535 2.26641 7.99999C2.26641 10.1746 3.03506 11.5003 3.97064 12.292C4.9273 13.1014 6.11562 13.4 6.99974 13.4C7.33111 13.4 7.59974 13.6686 7.59974 14C7.59974 14.3314 7.33111 14.6 6.99974 14.6C5.88386 14.6 4.40551 14.2319 3.19551 13.208C1.96442 12.1663 1.06641 10.492 1.06641 7.99999C1.06641 5.50797 1.96442 3.83365 3.19551 2.79196C4.40551 1.76811 5.88386 1.39999 6.99974 1.39999C7.33111 1.39999 7.59974 1.66862 7.59974 1.99999Z" fill="#5070F2"/>
|
||||
<path d="M14.8995 8.00259C14.8995 8.33396 14.6309 8.60259 14.2995 8.60259H4.99971C4.66834 8.60259 4.39971 8.33396 4.39971 8.00259C4.39971 7.67122 4.66834 7.40259 4.99971 7.40259H14.2995C14.6309 7.40259 14.8995 7.67122 14.8995 8.00259Z" fill="#5070F2"/>
|
||||
<path d="M14.7573 7.57573C14.9917 7.81004 14.9917 8.18994 14.7573 8.42426L10.7573 12.4243C10.523 12.6586 10.1431 12.6586 9.90881 12.4243C9.67449 12.1899 9.67449 11.81 9.90881 11.5757L13.4845 7.99999L9.90881 4.42426C9.67449 4.18994 9.67449 3.81004 9.90881 3.57573C10.1431 3.34142 10.523 3.34142 10.7573 3.57573L14.7573 7.57573Z" fill="#5070F2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@ -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 accountChartBar = ref();
|
||||
const { setOptions } = useECharts(accountChartBar);
|
||||
|
||||
// 定义 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 = [
|
||||
["#3B9FFE", "#5070F2", "#5070F2"],
|
||||
["#FFAC06", "#FFDA8D", "#FFB114"]
|
||||
];
|
||||
|
||||
const seriesArr: number[][] = [];
|
||||
const xAxisData: string[] = [];
|
||||
const seriesData: any[] = [];
|
||||
|
||||
// 生成数据
|
||||
for (let d = 0; d < 6; d++) {
|
||||
xAxisData.push("2023年" + d + 1 + "月");
|
||||
}
|
||||
|
||||
for (let i = 0; i < 2; i++) {
|
||||
seriesArr[i] = [];
|
||||
for (let x = 0; x < 6; 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];
|
||||
const yData2 = [10, 50, 20, 30, 50, 100];
|
||||
|
||||
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 (accountChartBar.value.requestFullScreen) {
|
||||
// HTML W3C 提议
|
||||
accountChartBar.value.requestFullScreen();
|
||||
} else if (accountChartBar.value.msRequestFullscreen) {
|
||||
// IE11
|
||||
accountChartBar.value.msRequestFullScreen();
|
||||
} else if (accountChartBar.value.webkitRequestFullScreen) {
|
||||
// Webkit
|
||||
accountChartBar.value.webkitRequestFullScreen();
|
||||
} else if (accountChartBar.value.mozRequestFullScreen) {
|
||||
// Firefox
|
||||
accountChartBar.value.mozRequestFullScreen();
|
||||
}
|
||||
// 退出全屏
|
||||
if (accountChartBar.value.requestFullScreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (accountChartBar.value.msRequestFullScreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (accountChartBar.value.webkitRequestFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if (accountChartBar.value.mozRequestFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
}
|
||||
},
|
||||
saveAsImage: {
|
||||
show: false,
|
||||
title: "保存"
|
||||
} // 导出图片
|
||||
}
|
||||
},
|
||||
color: ["#5070F2", "#FFAC06", "#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, 20],
|
||||
// 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: "#00B58C"
|
||||
},
|
||||
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: "#082FF8"
|
||||
},
|
||||
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="accountChartBar" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
@ -0,0 +1,176 @@
|
||||
<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 accountChartPie = ref();
|
||||
const { setOptions } = useECharts(accountChartPie);
|
||||
|
||||
// 定义 random 函数
|
||||
const random = (min: number, max: number): number => {
|
||||
return Math.floor(Math.random() * (max - min)) + min;
|
||||
};
|
||||
const yData = [
|
||||
{ value: "36", name: "银联入账" },
|
||||
{ value: "48", name: "支付机构提现" },
|
||||
{ value: "31", name: "电子汇入" },
|
||||
{ value: "29", name: "消费" },
|
||||
{ value: "59", name: "转账存入" }
|
||||
];
|
||||
const yData2 = [10, 50, 20, 30, 50, 100];
|
||||
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 60,
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 40,
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["20%", "60%"],
|
||||
center: ["50%", "50%"],
|
||||
itemStyle: {
|
||||
// borderRadius: 10,
|
||||
// borderWidth: 2,
|
||||
color: function (params) {
|
||||
const colorList = [
|
||||
{
|
||||
c1: "#FFCC4A",
|
||||
c2: "#FF7C09"
|
||||
},
|
||||
{
|
||||
c1: "#028FF5",
|
||||
c2: "#0032FF"
|
||||
},
|
||||
{
|
||||
c1: "#06EA7C",
|
||||
c2: "#04FFF2"
|
||||
},
|
||||
{
|
||||
c1: "#FF7D05",
|
||||
c2: "#FF0103"
|
||||
},
|
||||
{
|
||||
c1: "#D19EFF",
|
||||
c2: "#8500FF"
|
||||
}
|
||||
];
|
||||
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorList[params.dataIndex].c1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorList[params.dataIndex].c2
|
||||
}
|
||||
]);
|
||||
}
|
||||
},
|
||||
label: {
|
||||
lineHeight: 25,
|
||||
formatter: function (params) {
|
||||
console.log(params);
|
||||
return (
|
||||
"{title|" +
|
||||
params.name +
|
||||
"}\n" +
|
||||
"{value|" +
|
||||
params.value +
|
||||
"元" +
|
||||
"}"
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
title: {
|
||||
fontSize: 14,
|
||||
fontFamily: "PingFang SC",
|
||||
fontWeight: 500,
|
||||
color: "#333"
|
||||
},
|
||||
value: {
|
||||
fontSize: 14,
|
||||
fontFamily: "PingFang SC",
|
||||
fontWeight: 500,
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
edgeDistance: 10
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length2: 10,
|
||||
length: 30
|
||||
},
|
||||
data: yData as any
|
||||
}
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="accountChartPie" style="width: 100%; height: 100%" />
|
||||
</template>
|
||||
@ -0,0 +1,2 @@
|
||||
export { default as AccountChartBar } from "./AccountChartBar.vue";
|
||||
export { default as AccountChartPie } from "./AccountChartPie.vue";
|
||||
Loading…
Reference in New Issue