|
|
|
@ -1,9 +1,10 @@ |
|
|
|
<template> |
|
|
|
<a-row type="flex" style="height: 90%"> |
|
|
|
<a-row type="flex" style="height: 100%"> |
|
|
|
<a-col :span="8" style="height: 100%"> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */ |
|
|
|
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2); |
|
|
|
border-radius: 10px; |
|
|
|
width: 98%; |
|
|
|
height: 96%; |
|
|
|
margin: 2%; |
|
|
|
@ -32,7 +33,8 @@ |
|
|
|
style=" |
|
|
|
width: 98%; |
|
|
|
height: 38%; |
|
|
|
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); |
|
|
|
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2); |
|
|
|
border-radius: 10px; |
|
|
|
margin: 1%; |
|
|
|
"></div> |
|
|
|
<div |
|
|
|
@ -40,7 +42,8 @@ |
|
|
|
style=" |
|
|
|
width: 98%; |
|
|
|
height: 57%; |
|
|
|
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); |
|
|
|
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2); |
|
|
|
border-radius: 10px; |
|
|
|
margin: 1%; |
|
|
|
"></div> |
|
|
|
</a-col> |
|
|
|
@ -242,7 +245,9 @@ |
|
|
|
var seriesdata = []; |
|
|
|
var dateX = []; |
|
|
|
// var legendList: string | any[] = []; |
|
|
|
let sum = 0; |
|
|
|
for (let i = 0; i < data.value.length; i++) { |
|
|
|
sum += data.value[i].value; |
|
|
|
dateX.push(data.value[i].name); |
|
|
|
|
|
|
|
seriesdata.push({ |
|
|
|
@ -262,7 +267,7 @@ |
|
|
|
clockwise: '10', |
|
|
|
// hoverAnimation: true, |
|
|
|
// 圆环内径和外径 |
|
|
|
radius: ['70%', '90%'], |
|
|
|
radius: ['60%', '80%'], |
|
|
|
center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高 |
|
|
|
// 显示折线 |
|
|
|
labelLine: { |
|
|
|
@ -294,6 +299,29 @@ |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
}, |
|
|
|
graphic: [ |
|
|
|
{ |
|
|
|
type: 'text', |
|
|
|
left: '28%', |
|
|
|
top: '33%', |
|
|
|
style: { |
|
|
|
text: '总计', |
|
|
|
fill: '#000', |
|
|
|
fontSize: 14, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'text', |
|
|
|
left: sum > 100 ? '24%' : '30%', |
|
|
|
top: '50%', |
|
|
|
style: { |
|
|
|
text: sum, |
|
|
|
fill: '#000', |
|
|
|
fontSize: 30, |
|
|
|
fontWeight: 700, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
|
|
|
|
// 图例 |
|
|
|
legend: { |
|
|
|
@ -334,7 +362,9 @@ |
|
|
|
chartRight1.on('click', function (params) { |
|
|
|
// 控制台输出数据的名称 |
|
|
|
console.log(params.name + ' 被点击了'); |
|
|
|
drawRight2(params); |
|
|
|
if (params.name && params.name != '') { |
|
|
|
drawRight2(params); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
@ -360,18 +390,18 @@ |
|
|
|
}); |
|
|
|
const option = { |
|
|
|
// 图例 |
|
|
|
legend: { |
|
|
|
data: [ |
|
|
|
{ name: '对比值', icon: 'rect' }, // 对比值使用矩形图标 |
|
|
|
{ |
|
|
|
name: '参考线', |
|
|
|
icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z', |
|
|
|
}, // 参考线使用自定义路径图标，只显示线条 |
|
|
|
], |
|
|
|
orient: 'horizontal', |
|
|
|
bottom: 10, |
|
|
|
left: 60, |
|
|
|
}, |
|
|
|
// legend: { |
|
|
|
// data: [ |
|
|
|
// { name: '对比值', icon: 'rect' }, // 对比值使用矩形图标 |
|
|
|
// { |
|
|
|
// name: '参考线', |
|
|
|
// icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z', |
|
|
|
// }, // 参考线使用自定义路径图标，只显示线条 |
|
|
|
// ], |
|
|
|
// orient: 'horizontal', |
|
|
|
// bottom: 10, |
|
|
|
// left: 60, |
|
|
|
// }, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
@ -409,7 +439,7 @@ |
|
|
|
zoomLock: true, |
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
endValue: 5, |
|
|
|
bottom: '0%', |
|
|
|
bottom: 20, |
|
|
|
height: 10, |
|
|
|
showDetail: false, |
|
|
|
}, |
|
|
|
|
fks-yangshouda
3 months ago
