169 lines
3.1 KiB
Vue
169 lines
3.1 KiB
Vue
|
<template>
|
||
|
<div class="beta-gamma-spectrum-chart">
|
||
|
<div class="beta-gamma-spectrum-chart-operators">
|
||
|
<span
|
||
|
v-for="(item, index) in buttons"
|
||
|
:key="item"
|
||
|
:class="active == index ? 'active' : ''"
|
||
|
@click="handleChange(index)"
|
||
|
>
|
||
|
{{ item }}
|
||
|
</span>
|
||
|
</div>
|
||
|
<div class="beta-gamma-spectrum-chart-main">
|
||
|
<CustomChart key="1" ref="roiLimitsRef" :option="roiLimitsOption" />
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import CustomChart from '@/components/CustomChart/index.vue'
|
||
|
const buttons = ['ROI1', 'ROI2', 'ROI3', 'ROI4']
|
||
|
// 折线图配置
|
||
|
const roiLimitsOption = {
|
||
|
grid: {
|
||
|
top: 15,
|
||
|
left: 55,
|
||
|
right: 18,
|
||
|
bottom: 45,
|
||
|
},
|
||
|
tooltip: {},
|
||
|
xAxis: {
|
||
|
type: 'category',
|
||
|
boundaryGap: false,
|
||
|
splitLine: {
|
||
|
show: true,
|
||
|
interval: 'auto',
|
||
|
lineStyle: {
|
||
|
color: 'rgba(119, 181, 213, .3)',
|
||
|
},
|
||
|
},
|
||
|
axisTick: {
|
||
|
show: false,
|
||
|
},
|
||
|
axisLine: {
|
||
|
lineStyle: {
|
||
|
color: 'rgba(119, 181, 213, .3)',
|
||
|
},
|
||
|
},
|
||
|
axisLabel: {
|
||
|
fontSize: 12,
|
||
|
color: '#ade6ee',
|
||
|
},
|
||
|
},
|
||
|
yAxis: {
|
||
|
type: 'value',
|
||
|
splitLine: {
|
||
|
lineStyle: {
|
||
|
color: 'rgba(119, 181, 213, .3)',
|
||
|
},
|
||
|
},
|
||
|
axisTick: {
|
||
|
show: false,
|
||
|
},
|
||
|
axisLine: {
|
||
|
lineStyle: {
|
||
|
color: 'rgba(119, 181, 213, .3)',
|
||
|
},
|
||
|
},
|
||
|
axisLabel: {
|
||
|
fontSize: 12,
|
||
|
color: '#ade6ee',
|
||
|
},
|
||
|
},
|
||
|
series: {
|
||
|
type: 'line',
|
||
|
smooth: true,
|
||
|
showSymbol: false,
|
||
|
symbol: 'circle',
|
||
|
symbolSize: 6,
|
||
|
data: [],
|
||
|
itemStyle: {
|
||
|
normal: {
|
||
|
color: '#baaa3d',
|
||
|
},
|
||
|
},
|
||
|
lineStyle: {
|
||
|
normal: {
|
||
|
width: 2,
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
}
|
||
|
export default {
|
||
|
components: {
|
||
|
CustomChart,
|
||
|
},
|
||
|
props: {
|
||
|
ROILists: {
|
||
|
type: Array,
|
||
|
default: () => [],
|
||
|
},
|
||
|
},
|
||
|
watch: {
|
||
|
ROILists: {
|
||
|
handler(newVal) {
|
||
|
const [ROIOneList, ...lists] = newVal
|
||
|
this.buildOneLineList(ROIOneList)
|
||
|
},
|
||
|
immediate: true,
|
||
|
},
|
||
|
},
|
||
|
data() {
|
||
|
this.buttons = buttons
|
||
|
return {
|
||
|
active: 0,
|
||
|
roiLimitsOption,
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
buildOneLineList(val) {
|
||
|
const currSeries = this.roiLimitsOption.series
|
||
|
currSeries.data = val.map((item) => [item.x, item.y])
|
||
|
},
|
||
|
// 点击改变Beta-Gamma Spectrum: Sample图表类型
|
||
|
handleChange(index) {
|
||
|
this.active = index
|
||
|
this.buildOneLineList(this.ROILists[index])
|
||
|
},
|
||
|
},
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="less" scoped>
|
||
|
.beta-gamma-spectrum-chart {
|
||
|
height: 100%;
|
||
|
&-operators {
|
||
|
text-align: right;
|
||
|
overflow: auto;
|
||
|
height: 26px;
|
||
|
display: flex;
|
||
|
justify-content: flex-end;
|
||
|
gap: 9px;
|
||
|
|
||
|
.ant-space-item:first-child {
|
||
|
span {
|
||
|
width: 70px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
span {
|
||
|
text-align: center;
|
||
|
height: 100%;
|
||
|
line-height: 26px;
|
||
|
width: 100px;
|
||
|
background-color: #406979;
|
||
|
cursor: pointer;
|
||
|
user-select: none;
|
||
|
|
||
|
&.active {
|
||
|
background-color: #1397a3;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
&-main {
|
||
|
height: calc(100% - 40px);
|
||
|
margin-top: 15px;
|
||
|
}
|
||
|
}
|
||
|
</style>
|