-
+
-
+
@@ -50,17 +38,17 @@ const buttons = ['Beta-Gamma', 'Gamma', 'Beta']
// Beta-Gamma 的配置
const twoDOption = {
grid: {
- top: 15,
+ top: 10,
left: 60,
- right: 20,
+ right: 70,
bottom: 45,
},
tooltip: {
trigger: 'item',
- formatter: (params) => {
- const [b, g, c] = params.value
- return `Beta: ${b}
Gamma: ${g}
Count: ${c}`
- },
+ // formatter: (params) => {
+ // const [b, g, c] = params.value
+ // return `Beta: ${b}
Gamma: ${g}
Count: ${c}`
+ // },
axisPointer: {
animation: false,
type: 'cross',
@@ -138,6 +126,7 @@ const twoDOption = {
{
type: 'scatterGL',
symbolSize: 4,
+ zlevel: 4,
data: [],
itemStyle: {
color: '#fff',
@@ -146,10 +135,36 @@ const twoDOption = {
{
type: 'line',
data: [],
- itemStyle: { color: '#99CA53' },
+ itemStyle: { color: '#0CB4C1' },
+ zlevel: 14,
+ showSymbol: false,
+ areaStyle: {}
+ },
+ {
+ type: 'line',
+ data: [],
+ itemStyle: { color: '#1B88E5' },
+ zlevel: 13,
+ showSymbol: false,
+ areaStyle: {}
+ },
+ {
+ type: 'line',
+ data: [],
+ itemStyle: { color: '#43960C' },
+ zlevel: 12,
+ showSymbol: false,
+ areaStyle: {}
+ },
+ {
+ type: 'line',
+ data: [],
+ itemStyle: { color: '#D09324' },
zlevel: 11,
showSymbol: false,
+ areaStyle: {}
},
+
],
brush: {},
animation: false,
@@ -402,11 +417,10 @@ export default {
// 2D 图表 上的 矩形
boundary: {
handler(newVal) {
- newVal.forEach((item, index) => {
- item.color = '#99CA53'
- })
- this.boundaryData = newVal[this.currIdx]
- this.reDrawRect()
+ // newVal.forEach((item, index) => {
+ // item.color = '#99CA53'
+ // })
+ // this.boundaryData = newVal[this.currIdx]
},
// immediate: true,
},
@@ -418,7 +432,7 @@ export default {
},
currIdx: {
handler(newVal) {
- this.boundaryData = this.boundary[newVal]
+ // this.boundaryData = this.boundary[newVal]
this.reDrawRect()
},
// immediate: true,
@@ -433,6 +447,7 @@ export default {
const _this = this
this.myChart = this.$refs.chartTwoDRef.getChartInstance()
let graphicHeight = this.$refs.TwoChartRef.clientHeight
+
graphic1.shape.height = graphicHeight
let minleft = this.myChart.convertToPixel({ xAxisId: '2' }, 0)
let maxRight = this.myChart.convertToPixel({ xAxisId: '2' }, 512)
@@ -451,7 +466,8 @@ export default {
[_this.startChannel, maxY],
[_this.startChannel, minY],
]
- lineSeries.data = _this.drawOneRect(rect, color).data
+ lineSeries.
+ lineSeries.data = _this.drawOneRect(rect, color).data
// const lineSeries = {
// type: 'line',
// ..._this.drawOneRect(rect, color),
@@ -509,6 +525,9 @@ export default {
})
},
methods: {
+ handleTooltipFormat() {
+ console.log(111111)
+ },
// Gamma 的折线图数据
buildGammaLineList(val) {
const gammaSeries = this.gammaOption.series
@@ -521,7 +540,6 @@ export default {
},
// 构造scatter列表
buildScatterList() {
- console.log(this.twoDOption)
const {
xAxis: { min: minX, max: maxX },
yAxis: { min: minY, max: maxY },
@@ -529,23 +547,36 @@ export default {
//点大小
this.twoDOption.series[0].symbolSize = 5
- //
- this.twoDOption.visualMap = {
- min: 512,
- max: minY,
- dimension: 1,
- orient: 'vertical',
- right: 10,
- top: 'center',
- text: ['HIGH', 'LOW'],
- calculable: true,
- inRange: {
- color: ['#ffffff', '#ff0000']
- }
- },
this.twoDOption.series[0].data = this.histogramDataList
.filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
.map(({ b, g, c }) => this.buildScatterItem(b, g, c))
+
+
+ this.$nextTick(() => {
+ var _h = this.$refs.TwoChartRef.clientHeight - 80
+ this.twoDOption.visualMap = {
+ type: 'continuous',
+ min: maxY,
+ max: minY,
+ itemWidth: 12,
+ itemHeight: _h,
+ dimension: 1,
+ seriesIndex: 0,
+ zlevel: 0,
+ orient: 'vertical',
+ right: 0,
+ bottom: 20,
+ text: [maxY, minY],
+ textStyle: {
+ color: '#8EC0C8'
+ },
+ calculable: true,
+ inRange: {
+ color: ['#ffffff', '#ff0000']
+ }
+ }
+ })
+
},
// 构造一个scatter 的点
@@ -560,21 +591,22 @@ export default {
},
// 重绘矩形框区域
reDrawRect() {
- const rectList = []
- let [a, lineSeries] = this.twoDOption.series
if (this.showROI) {
- const { minX, maxX, minY, maxY, color } = this.boundaryData
// rect 遵循 左下 右下 右上 左上 左下 的顺序
- const rect = [
- [minX, minY],
- [maxX, minY],
- [maxX, maxY],
- [minX, maxY],
- [minX, minY],
- ]
- lineSeries.data = this.drawOneRect(rect, color).data
+ const colors = ['#0CB4C1', '#1B88E5', '#43960C', '#D09324']
+ for (var i = 0; i < 4; i++) {
+ const data = this.boundary[i]
+ if(data)
+ {
+ const rect = [[data.minX, data.minY], [data.maxX, data.minY], [data.maxX, data.maxY], [data.minX, data.maxY], [data.minX, data.minY],]
+ this.twoDOption.series[i + 1].data = this.drawOneRect(rect, colors[i]).data
+ }
+ }
+ // lineSeries2.data = this.drawOneRect(rect2, color2).data
} else {
- lineSeries.data = []
+ for (var i = 0; i < 4; i++) {
+ this.twoDOption.series[i + 1].data = []
+ }
}
},
/**
@@ -584,10 +616,6 @@ export default {
drawOneRect(rect, color) {
return {
data: rect,
- symbol: 'none',
- itemStyle: {
- color,
- },
}
},
// 点击改变 ROI LIMITS
@@ -618,6 +646,7 @@ export default {
]
myChart.setOption(this.dragOption)
})
+
},
// 鼠标按下时开启可刷选状态
handleMouseDown() {
@@ -729,8 +758,7 @@ export default {
const { inputFileName } = this.sampleData
try {
const { success, result, message } = await putAction(
- `/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${
- this.endChannel
+ `/selfStation/updateROI?sampleFileName=${inputFileName}&startChannel=${this.startChannel}&endChannel=${this.endChannel
}&ROINum=${this.currIdx + 1}`
)
if (success) {
@@ -755,7 +783,6 @@ export default {
maxX: obj.stop,
minY: 0,
maxY: 4096,
- color: '#99CA53',
}
// this.reDrawRect()
} else {
@@ -776,6 +803,7 @@ export default {
const b = color1.b + (color2.b - color1.b) * percentage
return { r, g, b }
},
+
},
}
@@ -783,6 +811,7 @@ export default {
\ No newline at end of file