切换谱数据之后标题没有改名称
beta 散点图放大之后，切换其他图，右侧曲线图要还原
This commit is contained in:
parent
9f6575ff04
commit
2ab2dd1b1e
|
|
@ -26,7 +26,7 @@
|
|||
<!-- 左侧图表 -->
|
||||
<div class="beta-gamma-spectrum-sample">
|
||||
<beta-gamma-chart-container>
|
||||
<template slot="title"> Beta-Gamma Spectrum: Sample </template>
|
||||
<template slot="title"> Beta-Gamma Spectrum: {{ currSpectrum }} </template>
|
||||
<beta-gamma-spectrum-chart
|
||||
ref="betaGammaChartRef"
|
||||
:histogramDataList="histogramDataList"
|
||||
|
|
@ -191,6 +191,7 @@ export default {
|
|||
this.SampleType = SampleType
|
||||
|
||||
return {
|
||||
currSpectrum: '',
|
||||
// analyseCurrentSpectrum: {},
|
||||
qcFlags: {},
|
||||
|
||||
|
|
@ -386,6 +387,11 @@ export default {
|
|||
if (val === 'qc' && !this.sampleDetail.qc) {
|
||||
this.$message.warning('No qc spectrum file!')
|
||||
} else {
|
||||
if (val == 'sample') this.currSpectrum = 'Sample'
|
||||
if (val == 'gasBg') this.currSpectrum = 'Gas'
|
||||
if (val == 'detBg') this.currSpectrum = 'Det'
|
||||
if (val == 'qc') this.currSpectrum = 'QC'
|
||||
|
||||
const {
|
||||
betaOriginalData,
|
||||
betaProjectedData,
|
||||
|
|
|
|||
|
|
@ -57,11 +57,11 @@ const twoDOption = {
|
|||
top: 15,
|
||||
left: 55,
|
||||
right: 10,
|
||||
bottom: 45
|
||||
bottom: 45,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: params => {
|
||||
formatter: (params) => {
|
||||
const [b, g, c] = params.value
|
||||
return `Beta: ${b}<br>Gamma: ${g}<br>Count: ${c}`
|
||||
},
|
||||
|
|
@ -69,69 +69,69 @@ const twoDOption = {
|
|||
animation: false,
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
name: 'Beta Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 30,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ade6ee',
|
||||
fontSize: 12
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
yAxis: {
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
},
|
||||
nameLocation: 'center',
|
||||
nameGap: 35,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ade6ee',
|
||||
fontSize: 12
|
||||
fontSize: 12,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -139,12 +139,12 @@ const twoDOption = {
|
|||
symbolSize: 4,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
],
|
||||
brush: {},
|
||||
animation: false
|
||||
animation: false,
|
||||
}
|
||||
|
||||
//3D Surface 配置
|
||||
|
|
@ -155,66 +155,66 @@ const threeDSurfaceOption = {
|
|||
formatter: ({ value: [x, y, z] }) => {
|
||||
// 自定义 tooltip 的内容
|
||||
return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
|
||||
}
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 0,
|
||||
inRange: {
|
||||
color: ['#0DCF38', '#B5475E']
|
||||
}
|
||||
color: ['#0DCF38', '#B5475E'],
|
||||
},
|
||||
},
|
||||
grid3D: {
|
||||
axisLabel: {
|
||||
color: '#ade6ee'
|
||||
color: '#ade6ee',
|
||||
},
|
||||
axisPointer: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
name: 'Beta Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
yAxis3D: {
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
zAxis3D: {
|
||||
name: 'Count',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
max: 0
|
||||
max: 0,
|
||||
},
|
||||
series: {
|
||||
type: 'surface',
|
||||
data: []
|
||||
}
|
||||
data: [],
|
||||
},
|
||||
}
|
||||
|
||||
// 3D Scatter 配置
|
||||
|
|
@ -224,92 +224,92 @@ const threeDScatterOption = {
|
|||
formatter: ({ value: [x, y, z] }) => {
|
||||
// 自定义 tooltip 的内容
|
||||
return `Beta Channel:${x} Count:${z} Gamma Channel: ${y}`
|
||||
}
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 0,
|
||||
inRange: {
|
||||
color: ['#0DCF38', '#B5475E']
|
||||
}
|
||||
color: ['#0DCF38', '#B5475E'],
|
||||
},
|
||||
},
|
||||
grid3D: {
|
||||
axisLabel: {
|
||||
color: '#ade6ee'
|
||||
color: '#ade6ee',
|
||||
},
|
||||
axisPointer: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)'
|
||||
}
|
||||
}
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
name: 'Beta Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
yAxis3D: {
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
min: 0,
|
||||
max: 256,
|
||||
interval: 64
|
||||
interval: 64,
|
||||
},
|
||||
zAxis3D: {
|
||||
name: 'Count',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
max: 0
|
||||
max: 0,
|
||||
},
|
||||
series: {
|
||||
type: 'scatter3D',
|
||||
symbolSize: 5,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
data: []
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {
|
||||
histogramDataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
histogramDataDList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
boundary: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CustomChart,
|
||||
ColorPalette
|
||||
ColorPalette,
|
||||
},
|
||||
data() {
|
||||
this.buttons = buttons
|
||||
|
|
@ -323,8 +323,8 @@ export default {
|
|||
threeDScatterOption,
|
||||
showROI: true,
|
||||
opts: {
|
||||
notMerge: false
|
||||
}
|
||||
notMerge: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -340,6 +340,7 @@ export default {
|
|||
// 点击改变Beta-Gamma Spectrum: Sample图表类型
|
||||
handleChange(index) {
|
||||
this.active = index
|
||||
this.handleUnzoom()
|
||||
|
||||
// 因第一个二维的图表采用的v-show(为了响应Unzoom事件)，而在该图表不显示的时候，且改变了浏览器大小触发resize时，大小会变为0, 故在切换回来的时候resize一下
|
||||
if (this.active == 0) {
|
||||
|
|
@ -388,8 +389,8 @@ export default {
|
|||
key: 'brush',
|
||||
brushOption: {
|
||||
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
|
||||
brushType: 'rect'
|
||||
}
|
||||
brushType: 'rect',
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -404,12 +405,12 @@ export default {
|
|||
// 清理刷选的范围
|
||||
chart.dispatchAction({
|
||||
type: 'brush',
|
||||
areas: []
|
||||
areas: [],
|
||||
})
|
||||
|
||||
// 改为不可刷选状态
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor'
|
||||
type: 'takeGlobalCursor',
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -421,8 +422,8 @@ export default {
|
|||
const range = areas.range
|
||||
const [[minX, maxX], [minY, maxY]] = range
|
||||
|
||||
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map(num => parseInt(num.toFixed()))
|
||||
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map(num => parseInt(num.toFixed()))
|
||||
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
|
||||
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
|
||||
|
||||
const [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
|
||||
|
||||
|
|
@ -444,7 +445,7 @@ export default {
|
|||
buildScatterList() {
|
||||
const {
|
||||
xAxis: { min: minX, max: maxX },
|
||||
yAxis: { min: minY, max: maxY }
|
||||
yAxis: { min: minY, max: maxY },
|
||||
} = this.twoDOption
|
||||
|
||||
this.twoDOption.series[0].data = this.histogramDataDList
|
||||
|
|
@ -458,8 +459,8 @@ export default {
|
|||
return {
|
||||
value: [xAxis, yAxis],
|
||||
itemStyle: {
|
||||
color: `rgb(${r}, ${g}, ${b})`
|
||||
}
|
||||
color: `rgb(${r}, ${g}, ${b})`,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -498,16 +499,16 @@ export default {
|
|||
[maxX, minY],
|
||||
[maxX, maxY],
|
||||
[minX, maxY],
|
||||
[minX, minY]
|
||||
[minX, minY],
|
||||
]
|
||||
|
||||
rectList.push(this.drawOneRect(rect, color))
|
||||
})
|
||||
}
|
||||
const lineSeries = rectList.map(rect => ({
|
||||
const lineSeries = rectList.map((rect) => ({
|
||||
type: 'line',
|
||||
...rect,
|
||||
zlevel: 11
|
||||
zlevel: 11,
|
||||
}))
|
||||
|
||||
this.opts.notMerge = true
|
||||
|
|
@ -527,8 +528,8 @@ export default {
|
|||
data: rect,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color
|
||||
}
|
||||
color,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -549,7 +550,7 @@ export default {
|
|||
const g = color1.g + (color2.g - color1.g) * percentage
|
||||
const b = color1.b + (color2.b - color1.b) * percentage
|
||||
return { r, g, b }
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 2D 图表
|
||||
|
|
@ -558,22 +559,22 @@ export default {
|
|||
this.active = 0
|
||||
this.buildScatterList()
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
// 3D 图表
|
||||
histogramDataDList: {
|
||||
handler(newVal) {
|
||||
const maxCount = Math.max(...newVal.map(item => item.c))
|
||||
const maxCount = Math.max(...newVal.map((item) => item.c))
|
||||
this.threeDSurfaceOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
|
||||
this.threeDSurfaceOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D surface数据
|
||||
this.threeDSurfaceOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D surface数据
|
||||
this.threeDSurfaceOption.visualMap.max = maxCount
|
||||
|
||||
this.threeDScatterOption.zAxis3D.max = Math.ceil(maxCount * 1.2)
|
||||
this.threeDScatterOption.series.data = newVal.map(item => [item.b, item.g, item.c]) // 设置3D scatter数据
|
||||
this.threeDScatterOption.series.data = newVal.map((item) => [item.b, item.g, item.c]) // 设置3D scatter数据
|
||||
this.threeDScatterOption.visualMap.max = maxCount
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
// 2D 图表 上的 矩形
|
||||
|
|
@ -585,16 +586,16 @@ export default {
|
|||
this.boundaryData = newVal
|
||||
this.reDrawRect()
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
|
||||
currCount: {
|
||||
handler() {
|
||||
this.buildScatterList()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user