fix: 优化gamma主图表逻辑

This commit is contained in:
Xu Zhimeng 2023-09-27 13:41:51 +08:00
parent ad2a550668
commit bdaf65ca99
4 changed files with 391 additions and 331 deletions

View File

@ -99,6 +99,7 @@ export function findSeriesByName(series, seriesName) {
* 限定数字在一定范围
* @param {Number} min
* @param {Number} max
* @returns {(num: number) => number }
*/
export function rangeNumber(min, max) {
return num => {

View File

@ -119,154 +119,7 @@ import NuclideReviewModal from './components/Modals/AnalyzeInteractiveToolModal/
import CompareFileListModal from './components/Modals/CompareFileListModal.vue'
import ReProcessingModal from './components/Modals/ReProcessingModal/index.vue'
//
const initialOption = {
grid: {
top: 40,
left: 60,
right: 50,
containLabel: true,
},
title: {
text: '',
left: 'center',
bottom: 10,
textStyle: {
color: '#8FD4F8',
rich: {
a: {
padding: [0, 20, 0, 0],
fontSize: 16,
},
},
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#3CAEBB',
width: 1,
type: 'solid',
},
},
formatter: undefined,
className: 'figure-chart-option-tooltip',
},
xAxis: {
name: 'Channel',
nameTextStyle: {
color: '#8FD4F8',
fontSize: 16,
align: 'right',
verticalAlign: 'top',
padding: [30, 0, 0, 0],
},
axisLine: {
lineStyle: {
color: '#ade6ee',
},
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#ade6ee',
},
},
min: 1,
max: 'dataMax',
animation: false,
axisLabel: {
formatter: (value) => {
return parseInt(value)
},
},
},
yAxis: {
name: 'Counts',
type: 'value',
nameTextStyle: {
color: '#8FD4F8',
fontSize: 16,
},
axisLine: {
show: true,
lineStyle: {
color: '#ade6ee',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(173, 230, 238, .2)',
},
},
axisLabel: {
textStyle: {
color: '#ade6ee',
},
},
min: 1,
max: 'dataMax',
animation: false,
axisLabel: {
formatter: (value) => {
return value.toFixed(1)
},
},
},
series: [],
brush: {},
}
//
const thumbnailOption = {
grid: {
top: 0,
left: 5,
right: 5,
bottom: 0,
},
xAxis: {
type: 'category',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
min: 1,
max: 'dataMax',
},
yAxis: {
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
min: 1,
max: 'dataMax',
},
series: [],
}
const graphAssistance = {
axisType: 'Channel',
spectrumType: 'Lines',
Baseline: true,
SCAC: true,
Lc: true,
}
import { GammaOptions, graphAssistance } from './settings'
export default {
props: {
@ -290,19 +143,35 @@ export default {
return {
isLoading: false,
isLoadingNuclide: false,
option: cloneDeep(initialOption),
option: cloneDeep(GammaOptions.option),
opts: {
notMerge: false,
},
thumbnailOption: cloneDeep(thumbnailOption),
thumbnailOption: cloneDeep(GammaOptions.thumbnailOption),
detailedInfomation: [],
qcFlags: [],
graphAssistance: cloneDeep(graphAssistance),
nuclideLibraryVisible: false,
channelPeakGroup: [],
energyPeakGroup: [],
channelData: {
peakGroup: [],
spectrumLine: null,
baseLine: null,
lcLine: null,
scacLine: null,
all: null,
baseLineCP: [],
},
energyData: {
peakGroup: [],
spectrumLine: null,
baseLine: null,
lcLine: null,
scacLine: null,
all: null,
baseLineCP: [],
},
nuclideLibraryList: [], // channel
peakInfomationTooltip: {
@ -326,6 +195,8 @@ export default {
},
created() {
this.option.title.text = '{a|Channel:0} {a|Energy:0} {a|Counts:0} {a|Detectability:0}'
this.option.tooltip.formatter = this.tooltipFormatter
this.$bus.$on('colorChange', this.handleColorChange)
this.$bus.$on('gammaRefresh', this.handleRefresh)
this.$bus.$on('accept', this.handleAccept)
@ -339,6 +210,7 @@ export default {
this.option.brush = { toolbox: [] }
},
methods: {
//
async getSampleDetail() {
const { dbName, sampleId } = this.sample
try {
@ -348,13 +220,7 @@ export default {
// const { success, result, message } = Response
if (this._cancelToken && typeof this._cancelToken == 'function') {
this._cancelToken()
}
const cancelToken = new axios.CancelToken((c) => {
this._cancelToken = c
})
const cancelToken = this.cancelLastRequest()
const { success, result, message } = await getAction(
'/gamma/gammaByDB',
@ -381,9 +247,15 @@ export default {
this.isLoading = true
this.handleResetState()
// const { success, result, message } = Response
const { success, result, message } = await getAction('/gamma/gammaByFile', {
const cancelToken = this.cancelLastRequest()
const { success, result, message } = await getAction(
'/gamma/gammaByFile',
{
fileName,
})
},
cancelToken
)
console.log('%c [ result ]-243', 'font-size:13px; background:pink; color:#bf2c9f;', result)
if (success) {
this.dataProsess(result)
@ -395,6 +267,16 @@ export default {
}
},
cancelLastRequest() {
if (this._cancelToken && typeof this._cancelToken == 'function') {
this._cancelToken()
}
return new axios.CancelToken((c) => {
this._cancelToken = c
})
},
dataProsess(result) {
this.isLoading = false
@ -419,44 +301,40 @@ export default {
this.detailedInfomation = DetailedInformation
this.qcFlags = QCFlag
const channelPeakGroup = allData.filter((item) => item.name == 'Peak' && item.group == 'channel')
const energyPeakGroup = allData.filter((item) => item.name == 'Peak' && item.group == 'energy')
const channelPeakGroup = this.getLineData(allData, 'Peak', 'channel', true)
const energyPeakGroup = this.getLineData(allData, 'Peak', 'energy', true)
const channelBaseLine = allData.find((item) => item.name == 'BaseLine' && item.group == 'channel') || {}
const energyBaseLine = allData.find((item) => item.name == 'BaseLine' && item.group == 'energy')
const channelBaseLine = this.getLineData(allData, 'BaseLine', 'channel')
const energyBaseLine = this.getLineData(allData, 'BaseLine', 'energy')
const channelLcLine = allData.find((item) => item.name == 'Lc' && item.group == 'channel') || {}
const energyLcLine = allData.find((item) => item.name == 'Lc' && item.group == 'energy')
const channelLcLine = this.getLineData(allData, 'Lc', 'channel')
const energyLcLine = this.getLineData(allData, 'Lc', 'energy')
const channelScacLine = allData.find((item) => item.name == 'Scac' && item.group == 'channel') || {}
const energyScacLine = allData.find((item) => item.name == 'Scac' && item.group == 'energy')
const channelScacLine = this.getLineData(allData, 'Scac', 'channel')
const energyScacLine = this.getLineData(allData, 'Scac', 'energy')
this.allEnergy = allData.find((item) => item.name == 'Energy' && item.group == 'energy') || {}
this.allChannel = allData.find((item) => item.name == 'Count' && item.group == 'channel')
const allChannel = this.getLineData(allData, 'Count', 'channel')
const allEnergy = this.getLineData(allData, 'Energy', 'energy')
// Peak Line
this.channelPeakGroup = channelPeakGroup
this.energyPeakGroup = energyPeakGroup
this.channelData = {
peakGroup: channelPeakGroup,
spectrumLine: shadowChannelChart,
baseLine: channelBaseLine,
lcLine: channelLcLine,
scacLine: channelScacLine,
all: allChannel,
baseLineCP: shapeChannelData,
}
// Spectrum Line
this.shadowChannelChart = shadowChannelChart
this.shadowEnergyChart = shadowEnergyChart
// 线
this.channelBaseLine = channelBaseLine
this.energyBaseLine = energyBaseLine
// Lc
this.channelLcLine = channelLcLine
this.energyLcLine = energyLcLine
// Scac
this.channelScacLine = channelScacLine
this.energyScacLine = energyScacLine
// 线
this.shapeChannelData = shapeChannelData
this.shapeEnergyData = shapeEnergyData
this.energyData = {
peakGroup: energyPeakGroup,
spectrumLine: shadowEnergyChart,
baseLine: energyBaseLine,
lcLine: energyLcLine,
scacLine: energyScacLine,
all: allEnergy,
baseLineCP: shapeEnergyData,
}
this.resetThumbnailChartDataMax()
const series = []
@ -465,7 +343,7 @@ export default {
series.push(
buildLineSeries(
'Spectrum',
shadowChannelChart.pointlist && shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
this.transformPointListData(shadowChannelChart.pointlist),
shadowChannelChart.color,
{
symbolSize: 2,
@ -485,65 +363,33 @@ export default {
)
)
// Spectrum Line
this.thumbnailOption.series.push(
buildLineSeries(
// Spectrum Line
this.setSeriesData(
this.thumbnailOption.series,
'Spectrum',
shadowChannelChart.pointlist && shadowChannelChart.pointlist.map(({ x, y }) => [x, y]),
shadowChannelChart.color,
{
silent: true,
markLine: {
silent: true,
symbol: 'none',
label: {
show: false,
},
lineStyle: {
type: 'solid',
color: '#1397a3',
width: 1,
},
data: [],
},
}
)
this.transformPointListData(shadowChannelChart.pointlist),
shadowChannelChart.color
)
// BaseLine
series.push(
buildLineSeries(
'BaseLine',
channelBaseLine.pointlist && channelBaseLine.pointlist.map(({ x, y }) => [x, y]),
channelBaseLine.color,
{
buildLineSeries('BaseLine', this.transformPointListData(channelBaseLine.pointlist), channelBaseLine.color, {
zlevel: 2,
}
)
})
)
// LcLine线
series.push(
buildLineSeries(
'LcLine',
channelLcLine.pointlist && channelLcLine.pointlist.map(({ x, y }) => [x, y]),
channelLcLine.color,
{
buildLineSeries('LcLine', this.transformPointListData(channelLcLine.pointlist), channelLcLine.color, {
zlevel: 3,
}
)
})
)
// Scac线
series.push(
buildLineSeries(
'ScacLine',
channelScacLine.pointlist && channelScacLine.pointlist.map(({ x, y }) => [x, y]),
channelScacLine.color,
{
buildLineSeries('ScacLine', this.transformPointListData(channelScacLine.pointlist), channelScacLine.color, {
zlevel: 4,
}
)
})
)
// 线
@ -571,14 +417,9 @@ export default {
const peakLines = []
channelPeakGroup.forEach((item, index) => {
peakLines.push(
buildLineSeries(
`Peak_${index}`,
item.pointlist.map(({ x, y }) => [x, y]),
item.color,
{
buildLineSeries(`Peak_${index}`, this.transformPointListData(item.pointlist), item.color, {
zlevel: 6,
}
)
})
)
})
series.push(...peakLines)
@ -591,25 +432,26 @@ export default {
)
this.option.series = series
this.option.tooltip.formatter = this.tooltipFormatter
},
// chart tooltip
tooltipFormatter(params) {
let channel = 0
let energy = 0
const value = params[0].value[0]
if (this.isEnergy()) {
const energy = params[0].value[0]
const channel = this.getChannelByEnergy(energy)
energy = value.toFixed(2)
channel = this.getChannelByEnergy(energy)
} else {
const allPointList = this.energyData.all.pointlist
channel = parseInt(value.toFixed())
energy = allPointList && allPointList[channel - 1]
energy = energy ? energy.x.toFixed(2) : undefined
}
return `<div class="channel">Channel: ${channel}</div>
<div class="energy">Energy: ${energy.toFixed(2)}</div>`
} else {
const channel = parseInt(params[0].value[0].toFixed())
const energy = this.allEnergy.pointlist && this.allEnergy.pointlist[channel - 1]
return energy
? `<div class="channel">Channel: ${channel}</div>
<div class="energy">Energy: ${energy.x.toFixed(2)}</div>`
: undefined
}
<div class="energy">Energy: ${energy}</div>`
},
// Graph Assistance
@ -640,19 +482,24 @@ export default {
this.redrawLineBySeriesName(
'BaseLine',
this.energyBaseLine,
this.channelBaseLine,
this.energyData.baseLine,
this.channelData.baseLine,
this.graphAssistance.Baseline
)
this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, this.graphAssistance.Lc)
this.redrawLineBySeriesName(
'LcLine',
this.energyData.lcLine,
this.channelData.lcLine,
this.graphAssistance.Lc
)
this.redrawLineBySeriesName(
'ScacLine',
this.energyScacLine,
this.channelScacLine,
this.energyData.scacLine,
this.channelData.scacLine,
this.graphAssistance.SCAC
)
this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart)
this.redrawLineBySeriesName('Spectrum', this.energyData.spectrumLine, this.channelData.spectrumLine)
this.redrawCtrlPointBySeriesName()
this.redrawPeakLine()
@ -674,7 +521,7 @@ export default {
compareLineSeries.type = 'line'
compareLineSeries.symbol = 'none'
this.redrawLineBySeriesName('Spectrum', this.shadowEnergyChart, this.shadowChannelChart)
this.redrawLineBySeriesName('Spectrum', this.energyData.spectrumLine, this.channelData.spectrumLine)
if (this.channelCompareLine) {
this.redrawLineBySeriesName('Compare', this.energyCompareLine, this.channelCompareLine)
@ -712,13 +559,13 @@ export default {
}
break
case 'Baseline':
this.redrawLineBySeriesName('BaseLine', this.energyBaseLine, this.channelBaseLine, value)
this.redrawLineBySeriesName('BaseLine', this.energyData.baseLine, this.channelData.baseLine, value)
break
case 'Lc':
this.redrawLineBySeriesName('LcLine', this.energyLcLine, this.channelLcLine, value)
this.redrawLineBySeriesName('LcLine', this.energyData.lcLine, this.channelData.lcLine, value)
break
case 'SCAC':
this.redrawLineBySeriesName('ScacLine', this.energyScacLine, this.channelScacLine, value)
this.redrawLineBySeriesName('ScacLine', this.energyData.scacLine, this.channelData.scacLine, value)
break
}
}
@ -730,22 +577,18 @@ export default {
// seriesName线
redrawLineBySeriesName(seriesName, energyData, channelData, isShow = true, color) {
const series = findSeriesByName(this.option.series, seriesName)
if (isShow) {
const data = this.isEnergy() ? energyData : channelData
series.data = data.pointlist.map(({ x, y }) => [x, y])
this.setSeriesData(this.option.series, seriesName, this.transformPointListData(data.pointlist), color)
} else {
series.data = []
}
if (color) {
series.itemStyle.color = color
this.setSeriesData(this.option.series, seriesName, [])
}
},
//
redrawCtrlPointBySeriesName() {
const series = findSeriesByName(this.option.series, 'BaseLine_Ctrl_Point')
const data = this.isEnergy() ? this.shapeEnergyData : this.shapeChannelData
const data = this.isEnergy() ? this.energyData.baseLineCP : this.channelData.baseLineCP
series.data = data.map(({ size, color, point: { x, y } }) => {
return {
value: [x, y],
@ -764,18 +607,13 @@ export default {
return !item.name.includes('Peak_')
})
const data = this.isEnergy() ? this.energyPeakGroup : this.channelPeakGroup
const data = this.isEnergy() ? this.energyData.peakGroup : this.channelData.peakGroup
const peakLines = []
data.forEach((item, index) => {
peakLines.push(
buildLineSeries(
`Peak_${index}`,
item.pointlist.map(({ x, y }) => [x, y]),
item.color,
{
buildLineSeries(`Peak_${index}`, this.transformPointListData(item.pointlist), item.color, {
zlevel: 6,
}
)
})
)
})
@ -785,8 +623,8 @@ export default {
//
redrawThumbnailChart() {
const series = findSeriesByName(this.thumbnailOption.series, 'Spectrum')
const data = this.isEnergy() ? this.shadowEnergyChart : this.shadowChannelChart
series.data = data.pointlist.map(({ x, y }) => [x, y])
const data = this.isEnergy() ? this.energyData.spectrumLine : this.channelData.spectrumLine
series.data = this.transformPointListData(data.pointlist)
},
// 线
@ -801,8 +639,10 @@ export default {
const channel = this.isEnergy() ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed())
const energy = this.isEnergy()
? xAxis.toFixed(2)
: this.allEnergy.pointlist && this.allEnergy.pointlist[channel - 1].x.toFixed(2)
const counts = this.isEnergy() ? this.allEnergy.pointlist[channel - 1] : this.allChannel.pointlist[channel - 1]
: this.energyData.all.pointlist && this.energyData.all.pointlist[channel - 1].x.toFixed(2)
const counts = this.isEnergy()
? this.energyData.all.pointlist[channel - 1]
: this.channelData.all.pointlist[channel - 1]
this.option.title.text = `{a|Channel:${channel}} {a|Energy:${energy}} {a|Counts:${counts.y}} {a|Detectability:0}`
this.getSelPosNuclide(channel)
@ -864,7 +704,7 @@ export default {
const spectrumLineSeries = findSeriesByName(this.option.series, 'Spectrum')
const xAxis = spectrumLineSeries.markLine.data[0].xAxis
const channel = this.isEnergy() ? this.getChannelByEnergy(xAxis) : parseInt(xAxis.toFixed())
const index = this.channelPeakGroup.findIndex((peakItem) => {
const index = this.channelData.peakGroup.findIndex((peakItem) => {
const allX = peakItem.pointlist.map((item) => item.x)
const max = Math.max(...allX)
const min = Math.min(...allX)
@ -887,7 +727,7 @@ export default {
})
if (success) {
const html = result.replaceAll('\n', '<br>')
const currPeak = this.channelPeakGroup[index]
const currPeak = this.channelData.peakGroup[index]
const { x, y } = currPeak.pointlist.reduce((prev, curr) => {
return prev && prev.y > curr.y ? prev : curr
})
@ -919,7 +759,7 @@ export default {
const prevAxis = spectrumLineSeries.markLine.data[0].xAxis
// Channel
const maxXAxises = this.channelPeakGroup.map((item) => {
const maxXAxises = this.channelData.peakGroup.map((item) => {
const allY = item.pointlist.map((item) => item.y)
const max = item.pointlist.find((point) => point.y == Math.max(...allY))
return max.x
@ -978,7 +818,6 @@ export default {
//
chart.dispatchAction({
type: 'takeGlobalCursor',
brushOption: false
})
},
@ -1058,16 +897,16 @@ export default {
const y2 = getAxisMax(chart, 'yAxis')
const channelSpectrumData = {
...this.shadowChannelChart,
...this.channelData.spectrumLine,
pointlist: isReset
? this.pointlistLimitY(this.shadowChannelChart.pointlist)
: this.pointlistLimit(this.shadowChannelChart.pointlist, x1, x2, y1, y2),
? this.pointlistLimitY(this.channelData.spectrumLine.pointlist)
: this.pointlistLimit(this.channelData.spectrumLine.pointlist, x1, x2, y1, y2),
}
const energySpectrumData = {
...this.shadowEnergyChart,
...this.energyData.spectrumLine,
pointlist: isReset
? this.pointlistLimitY(this.shadowEnergyChart.pointlist)
: this.pointlistLimit(this.shadowEnergyChart.pointlist, x1, x2, y1, y2),
? this.pointlistLimitY(this.energyData.spectrumLine.pointlist)
: this.pointlistLimit(this.energyData.spectrumLine.pointlist, x1, x2, y1, y2),
}
this.redrawLineBySeriesName('Spectrum', energySpectrumData, channelSpectrumData)
@ -1171,8 +1010,8 @@ export default {
this.setThumbnailChartRect(xAxis - halfWidth, maxYAxis, xAxis + halfWidth, minYAxis)
if (this.isEnergy()) {
const x1 = parseInt(this.shadowEnergyChart.pointlist[xAxis - halfWidth].x)
const x2 = parseInt(this.shadowEnergyChart.pointlist[xAxis + halfWidth].x)
const x1 = parseInt(this.energyData.spectrumLine.pointlist[xAxis - halfWidth].x)
const x2 = parseInt(this.energyData.spectrumLine.pointlist[xAxis + halfWidth].x)
this.option.xAxis.min = x1
this.option.xAxis.max = x2
@ -1190,7 +1029,9 @@ export default {
}
},
//
/**
* 重置图表
*/
handleResetChart() {
this.option.xAxis.min = 1
this.option.xAxis.max = 'dataMax'
@ -1291,12 +1132,16 @@ export default {
// this.reprocessingModalVisible = true
},
// y
/**
* 重置缩略图表y轴最大值
*/
resetThumbnailChartDataMax() {
this.thumbnailOption.yAxis.max = 'dataMax'
},
//
/**
* 重置图表配置
*/
resetChartOpts() {
this.opts.notMerge = false
this.option.brush = { toolbox: [] }
@ -1318,12 +1163,17 @@ export default {
]
},
/**
* 根据energy获取channel
* @param {number} energy
*/
getChannelByEnergy(energy) {
let channel = 0
for (let index = 1; index < this.allEnergy.pointlist.length; index++) {
const currEnergy = this.allEnergy.pointlist[index].x
const pointlist = this.energyData.all.pointlist
for (let index = 1; index < pointlist.length; index++) {
const currEnergy = pointlist[index].x
if (currEnergy >= energy) {
const prevEnergy = this.allEnergy.pointlist[index - 1].x
const prevEnergy = pointlist[index - 1].x
if (currEnergy - energy > energy - prevEnergy.x) {
channel = index
} else {
@ -1335,13 +1185,16 @@ export default {
return channel
},
//
/**
* 重置页面信息
*/
handleResetState() {
this.handleResetChart()
this.selectedChannel = -1
this.nuclideLibraryList = []
this.closePeakInfomationTooltip()
this.option.series = []
this.thumbnailOption.series = []
this.option.xAxis.name = 'Channel'
this.option.yAxis.type = 'value'
@ -1352,14 +1205,17 @@ export default {
spectrumLineSeries.markLine.lineStyle.width = 2
}
if (this.thumbnailOption.series.length) {
const thumbnailSpectrumLineSeries = findSeriesByName(this.thumbnailOption.series, 'Spectrum')
thumbnailSpectrumLineSeries.type = 'line'
thumbnailSpectrumLineSeries.symbol = 'none'
}
this.graphAssistance = cloneDeep(graphAssistance)
},
/**
* 颜色改变
* @param {*} colorConfig
*/
handleColorChange(colorConfig) {
//
if (this.isLoading) {
@ -1376,22 +1232,22 @@ export default {
const { Color_Spec, Color_Peak, Color_Lc, Color_Base, Color_Scac, Color_Compare, Color_Strip, Color_Fitbase } =
colorConfig
this.shadowChannelChart.color = Color_Spec
this.shadowEnergyChart.color = Color_Spec
this.channelData.spectrumLine.color = Color_Spec
this.energyData.spectrumLine.color = Color_Spec
for (let i = 0; i < this.channelPeakGroup.length; i++) {
this.channelPeakGroup[i].color = Color_Peak
this.energyPeakGroup[i].color = Color_Peak
for (let i = 0; i < this.channelData.peakGroup.length; i++) {
this.channelData.peakGroup[i].color = Color_Peak
this.energyData.peakGroup[i].color = Color_Peak
}
this.channelLcLine.color = Color_Lc
this.energyLcLine.color = Color_Lc
this.channelData.lcLine.color = Color_Lc
this.energyData.lcLine.color = Color_Lc
this.channelBaseLine.color = Color_Base
this.energyBaseLine.color = Color_Base
this.channelData.baseLine.color = Color_Base
this.energyData.baseLine.color = Color_Base
this.channelScacLine.color = Color_Scac
this.energyScacLine.color = Color_Scac
this.channelData.scacLine.color = Color_Scac
this.energyData.scacLine.color = Color_Scac
if (this.channelCompareLine) {
this.channelCompareLine.color = Color_Compare
@ -1409,7 +1265,11 @@ export default {
thumbnailChartSeries.itemStyle.color = Color_Spec
},
// series
/**
* 根据series名修改颜色
* @param {*} seriesName
* @param {*} color
*/
changeColorBySeriesName(seriesName, color) {
const series = findSeriesByName(this.option.series, seriesName)
series.itemStyle.color = color
@ -1439,6 +1299,38 @@ export default {
getThumbnailChart() {
return this.$refs.thumbnailChartRef.getChartInstance()
},
/**
* 设置图表数据和颜色
*/
setSeriesData(series, seriesName, data, color) {
const find = findSeriesByName(series, seriesName)
find.data = data
if (color) {
find.itemStyle.color = color
}
},
/**
* 转换pointlist类型数据到series的data可用的数据
*/
transformPointListData(pointlist) {
if (!pointlist) {
return []
}
return pointlist.map(({ x, y }) => [x, y])
},
/**
* 在返回的allData中查找指定的数据
* @param {Array} allData
* @param {*} name
* @param {*} group
*/
getLineData(allData, name, group, isList = false) {
const arrFunc = isList ? Array.prototype.filter : Array.prototype.find
return arrFunc.call(allData, (item) => item.name == name && item.group == group) || {}
},
},
watch: {
sample: {

View File

@ -432,7 +432,7 @@ export default {
})
arr.forEach((item) => {
item.dbName = ''
item.sampleId = ''
item.sampleId = null
item.inputFileName = item.sampleFileName
item.sampleType = item.sampleSystemType
})

View File

@ -0,0 +1,167 @@
import { buildLineSeries } from "@/utils/chartHelper"
export const GammaOptions = {
option: {
grid: {
top: 40,
left: 60,
right: 50,
containLabel: true
},
title: {
text: '',
left: 'center',
bottom: 10,
textStyle: {
color: '#8FD4F8',
rich: {
a: {
padding: [0, 20, 0, 0],
fontSize: 16
}
}
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#3CAEBB',
width: 1,
type: 'solid'
}
},
formatter: undefined,
className: 'figure-chart-option-tooltip'
},
xAxis: {
name: 'Channel',
nameTextStyle: {
color: '#8FD4F8',
fontSize: 16,
align: 'right',
verticalAlign: 'top',
padding: [30, 0, 0, 0]
},
axisLine: {
lineStyle: {
color: '#ade6ee'
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#ade6ee'
}
},
min: 1,
max: 'dataMax',
animation: false,
axisLabel: {
formatter: value => {
return parseInt(value)
}
}
},
yAxis: {
name: 'Counts',
type: 'value',
nameTextStyle: {
color: '#8FD4F8',
fontSize: 16
},
axisLine: {
show: true,
lineStyle: {
color: '#ade6ee'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(173, 230, 238, .2)'
}
},
axisLabel: {
textStyle: {
color: '#ade6ee'
}
},
min: 1,
max: 'dataMax',
animation: false,
axisLabel: {
formatter: value => {
return value.toFixed(1)
}
}
},
series: [],
brush: {}
},
// 缩略图配置
thumbnailOption: {
grid: {
top: 0,
left: 5,
right: 5,
bottom: 0
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
min: 1,
max: 'dataMax'
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
min: 1,
max: 'dataMax'
},
series: [
buildLineSeries('Spectrum', [], '#fff', {
silent: true,
markLine: {
silent: true,
symbol: 'none',
label: {
show: false
},
lineStyle: {
type: 'solid',
color: '#1397a3',
width: 1
},
data: []
}
})
]
}
}
export const graphAssistance = {
axisType: 'Channel',
spectrumType: 'Lines',
Baseline: true,
SCAC: true,
Lc: true,
}