|
|
|
@ -1,16 +1,47 @@ |
|
|
|
<template> |
|
|
|
<a-row type="flex" style="height: 92%"> |
|
|
|
<a-col :span="8"> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */ |
|
|
|
width: 98%; |
|
|
|
height: 96%; |
|
|
|
margin: 2%; |
|
|
|
"> |
|
|
|
<a-radio-group |
|
|
|
v-model:value="mode" |
|
|
|
@change="changeMode" |
|
|
|
style="padding-bottom: 10px; width: 40%; height: 4%; padding-left: 30px; padding-top: 10px"> |
|
|
|
style=" |
|
|
|
padding-bottom: 10px; |
|
|
|
width: 40%; |
|
|
|
height: 4%; |
|
|
|
padding-left: 30px; |
|
|
|
padding-top: 10px; |
|
|
|
"> |
|
|
|
<a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button> |
|
|
|
<a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button> |
|
|
|
</a-radio-group> |
|
|
|
<div ref="analysisGraphchart" style="width: 100%; height: 95%"></div> |
|
|
|
</div> |
|
|
|
</a-col> |
|
|
|
<a-col :span="16"> |
|
|
|
<div |
|
|
|
ref="analysisGraphRingchart" |
|
|
|
style=" |
|
|
|
width: 98%; |
|
|
|
height: 38%; |
|
|
|
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); |
|
|
|
margin: 1%; |
|
|
|
"></div> |
|
|
|
<div |
|
|
|
ref="analysisGraphBarchart" |
|
|
|
style=" |
|
|
|
width: 98%; |
|
|
|
height: 58%; |
|
|
|
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); |
|
|
|
margin: 1%; |
|
|
|
"></div> |
|
|
|
</a-col> |
|
|
|
<a-col :span="16" /> |
|
|
|
</a-row> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -52,11 +83,24 @@ |
|
|
|
); |
|
|
|
const changeMode = () => {}; |
|
|
|
const analysisGraphchart = ref(null); |
|
|
|
const analysisGraphRingchart = ref(null); |
|
|
|
const analysisGraphBarchart = ref(null); |
|
|
|
|
|
|
|
// 左侧柱状图 |
|
|
|
let chartInstance: echarts.ECharts | null = null; |
|
|
|
// 圆环图 |
|
|
|
let chartRight1: echarts.ECharts | null = null; |
|
|
|
|
|
|
|
// 右下角柱状图 |
|
|
|
let chartRight2: echarts.ECharts | null = null; |
|
|
|
|
|
|
|
const draw = () => { |
|
|
|
data.value = pageData.analysisGraphList; |
|
|
|
// 绘制左侧图 |
|
|
|
drawLeft(); |
|
|
|
drawRight1(); |
|
|
|
}; |
|
|
|
const drawLeft = () => { |
|
|
|
if (data.value && data.value.length > 0) { |
|
|
|
if (chartInstance) { |
|
|
|
chartInstance.dispose(); |
|
|
|
@ -65,7 +109,6 @@ |
|
|
|
|
|
|
|
var seriesdata = []; |
|
|
|
var dateX = []; |
|
|
|
// var legendList: string | any[] = []; |
|
|
|
for (let i = 0; i < data.value.length; i++) { |
|
|
|
dateX.push(data.value[i].name); |
|
|
|
|
|
|
|
@ -81,26 +124,39 @@ |
|
|
|
show: true, |
|
|
|
formatter: '{b}', |
|
|
|
}, |
|
|
|
barWidth: '25%', |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
const option = { |
|
|
|
// tooltip: { |
|
|
|
// trigger: 'axis', |
|
|
|
// formatter: (params: any) => { |
|
|
|
// const date = params[0].name; |
|
|
|
// const values = params |
|
|
|
// .map((param: any) => { |
|
|
|
// const unit = data.value.find((d) => d.name === date)?.unit || ''; |
|
|
|
// return `<tr> |
|
|
|
// <td>${param.marker}${param.seriesName}</td> |
|
|
|
// <td style="text-align: right;">${param.value} ${unit}</td> |
|
|
|
// </tr>`; |
|
|
|
// }) |
|
|
|
// .join(''); |
|
|
|
// return `<div>${date}</div><table style="width: 100%;">${values}</table>`; |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
grid: { |
|
|
|
top: 60, |
|
|
|
bottom: 20, |
|
|
|
}, |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
show: true, |
|
|
|
type: 'slider', |
|
|
|
zoomLock: true, |
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
endValue: 4, |
|
|
|
showDetail: false, |
|
|
|
width: 5, |
|
|
|
yAxisIndex: [0, 1], // 控制y轴滚动对象 |
|
|
|
}, |
|
|
|
{ |
|
|
|
show: true, |
|
|
|
type: 'inside', |
|
|
|
// width: 0, |
|
|
|
startValue: 0, |
|
|
|
endValue: 10, |
|
|
|
minValueSpan: 10, |
|
|
|
yAxisIndex: [0], |
|
|
|
zoomOnMouseWheel: false, // 关闭滚轮缩放 |
|
|
|
moveOnMouseWheel: true, // 开启滚轮平移 |
|
|
|
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移 |
|
|
|
}, |
|
|
|
], |
|
|
|
yAxis: { |
|
|
|
type: 'category', |
|
|
|
axisLine: { show: false }, |
|
|
|
@ -125,6 +181,233 @@ |
|
|
|
chartInstance.setOption(option); |
|
|
|
} |
|
|
|
}; |
|
|
|
const drawRight1 = () => { |
|
|
|
if (data.value && data.value.length > 0) { |
|
|
|
if (chartRight1) { |
|
|
|
chartRight1.dispose(); |
|
|
|
} |
|
|
|
chartRight1 = echarts.init(analysisGraphRingchart.value); |
|
|
|
|
|
|
|
var seriesdata = []; |
|
|
|
var dateX = []; |
|
|
|
// var legendList: string | any[] = []; |
|
|
|
for (let i = 0; i < data.value.length; i++) { |
|
|
|
dateX.push(data.value[i].name); |
|
|
|
|
|
|
|
seriesdata.push({ value: data.value[i].ringValue, name: data.value[i].name }); |
|
|
|
} |
|
|
|
var seriesList = [ |
|
|
|
{ |
|
|
|
// name: data.value[0].energyType, |
|
|
|
data: seriesdata, |
|
|
|
type: 'pie', |
|
|
|
// 圆环内径和外径 |
|
|
|
radius: ['70%', '90%'], |
|
|
|
center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高 |
|
|
|
// 显示折线 |
|
|
|
labelLine: { |
|
|
|
show: true, |
|
|
|
length: 10, // 调整第一个折线段的长度 |
|
|
|
length2: 30, // 调整第二个折线段的长度 |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
// formatter: '{b}', |
|
|
|
position: 'outside', // 确保标签在环形图外部 |
|
|
|
// alignTo: 'edge', |
|
|
|
formatter: '{c}' + data.value[0].energyUnit + '\n{d}%', |
|
|
|
alignTo: 'labelLine', |
|
|
|
distanceToLabelLine: 5, // 调整标签和引导线之间的距离 |
|
|
|
distance: 10, // 调整标签距离图形的距离 |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
// 白色间距 |
|
|
|
borderWidth: 2, |
|
|
|
borderColor: '#ffffff', |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
const option = { |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
}, |
|
|
|
|
|
|
|
// 图例 |
|
|
|
legend: { |
|
|
|
top: 'center', |
|
|
|
left: '60%', |
|
|
|
// 排列方式 垂直 |
|
|
|
orient: 'vertical', |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'category', |
|
|
|
axisLine: { show: false }, |
|
|
|
axisLabel: { show: false }, |
|
|
|
axisTick: { show: false }, |
|
|
|
splitLine: { show: false }, |
|
|
|
data: dateX, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'value', |
|
|
|
position: 'top', |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
type: 'dashed', |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: seriesList, |
|
|
|
}; |
|
|
|
|
|
|
|
chartRight1 = echarts.init(analysisGraphRingchart.value); |
|
|
|
chartRight1.setOption(option); |
|
|
|
|
|
|
|
// 默认点击第一个 |
|
|
|
if (seriesdata.length > 0) { |
|
|
|
drawRight2(seriesdata[0]); |
|
|
|
} |
|
|
|
chartRight1.on('click', function (params) { |
|
|
|
// 控制台输出数据的名称 |
|
|
|
console.log(params.name + ' 被点击了'); |
|
|
|
drawRight2(params); |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
// 右下角柱状图 |
|
|
|
// chartRight2 |
|
|
|
// analysisGraphBarchart |
|
|
|
const drawRight2 = (auxiliary: any) => { |
|
|
|
if (chartRight2) { |
|
|
|
chartRight2.dispose(); |
|
|
|
} |
|
|
|
// 辅助线 |
|
|
|
var compareData: any[] = []; |
|
|
|
// 展示数据 |
|
|
|
var showData: any[] = []; |
|
|
|
// X轴 |
|
|
|
var dateX: any[] = []; |
|
|
|
data.value.forEach((item) => { |
|
|
|
if (item.name !== auxiliary.name) { |
|
|
|
dateX.push(item.name); |
|
|
|
showData.push(item.ringValue); |
|
|
|
compareData.push(auxiliary.value); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
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, |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'shadow', |
|
|
|
lineStyle: { |
|
|
|
color: 'red', // 设置 tooltip 的线颜色 |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
top: 20, |
|
|
|
bottom: 60, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
axisLine: { show: false }, |
|
|
|
axisLabel: { show: true }, |
|
|
|
axisTick: { show: false }, |
|
|
|
splitLine: { show: false }, |
|
|
|
data: dateX, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
position: 'top', |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
type: 'dashed', |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
show: true, |
|
|
|
type: 'slider', |
|
|
|
zoomLock: true, |
|
|
|
startValue: 0, // 从头开始。 |
|
|
|
endValue: 5, |
|
|
|
bottom: '0%', |
|
|
|
height: 10, |
|
|
|
showDetail: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
show: true, |
|
|
|
type: 'inside', |
|
|
|
xAxisIndex: 0, |
|
|
|
zoomOnMouseWheel: false, // 滚轮是否触发缩放 |
|
|
|
moveOnMouseMove: true, // 鼠标滚轮触发滚动 |
|
|
|
moveOnMouseWheel: true, |
|
|
|
}, |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '对比值', |
|
|
|
type: 'bar', |
|
|
|
stack: 'Total', |
|
|
|
label: { |
|
|
|
// show: true, |
|
|
|
position: 'right', |
|
|
|
formatter: '{b}', |
|
|
|
}, |
|
|
|
data: showData, |
|
|
|
barWidth: 30, // 设置柱状图的宽度 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '参考线', |
|
|
|
type: 'line', |
|
|
|
data: compareData, |
|
|
|
markLine: { |
|
|
|
symbol: 'none', |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
type: 'dashed', |
|
|
|
color: 'red', |
|
|
|
}, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
color: 'red', // 设置参考线的小圆点颜色 |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
itemStyle: { |
|
|
|
opacity: 0, // 隐藏鼠标悬停时的节点 |
|
|
|
}, |
|
|
|
}, |
|
|
|
showSymbol: false, // 隐藏数据点 |
|
|
|
lineStyle: { |
|
|
|
type: 'dashed', // 虚线样式 |
|
|
|
color: 'red', |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
chartRight2 = echarts.init(analysisGraphBarchart.value); |
|
|
|
chartRight2.setOption(option); |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
draw(); |
|
|
|
}); |
|
|
|
@ -145,6 +428,8 @@ |
|
|
|
|
|
|
|
return { |
|
|
|
analysisGraphchart, |
|
|
|
analysisGraphRingchart, |
|
|
|
analysisGraphBarchart, |
|
|
|
downloadChart, |
|
|
|
mode, |
|
|
|
changeMode, |
|
|
|
|
fks-xuxinyue
4 months ago