处理echarts图表,对数轴数据渲染的问题

This commit is contained in:
renpy 2023-08-02 10:44:50 +08:00
parent 373dfd87b0
commit 9d0e6e04b6

View File

@ -564,7 +564,7 @@ export default {
this.dataSourceSpectrumX_B = this.allData.bspectrumBlock&&this.allData.bspectrumBlock.bspectrumSubBlock.map((item, index) => { this.dataSourceSpectrumX_B = this.allData.bspectrumBlock&&this.allData.bspectrumBlock.bspectrumSubBlock.map((item, index) => {
return index return index
}) })
this.allData.histogramBlock.histogramSubBlock.forEach(item => { this.allData.histogramBlock&&this.allData.histogramBlock.histogramSubBlock.forEach(item => {
if (item.c === 1) { if (item.c === 1) {
this.dataSourceHistogray.level_1.push(item) this.dataSourceHistogray.level_1.push(item)
} else if (item.c <= 5 && item.c > 1) { } else if (item.c <= 5 && item.c > 1) {
@ -647,9 +647,26 @@ export default {
getUid() { getUid() {
return (Math.random()+new Date().getTime()).toString(32).slice(0,8) return (Math.random()+new Date().getTime()).toString(32).slice(0,8)
}, },
changeData(data) {
let arr = data.map(item => {
if (item==0) {
return 1
} else {
return item
}
})
return arr
},
yLogChange(e,str) { yLogChange(e,str) {
let yAxisType = e.target.checked ? "log" : "value" let yAxisType = e.target.checked ? "log" : "value"
str==="G"?this.yAxisType_g = yAxisType:this.yAxisType_b = yAxisType str === "G" ? this.yAxisType_g = yAxisType : this.yAxisType_b = yAxisType
let dataArr =[]
if (e.target.checked) {
dataArr = this.changeData(str === "G"?this.dataSourceSpectrum_G:this.dataSourceSpectrum_B)
} else {
dataArr = str === "G"?this.dataSourceSpectrum_G:this.dataSourceSpectrum_B
}
let options = { let options = {
yAxis: { yAxis: {
type: str==="G"?this.yAxisType_g:this.yAxisType_b, type: str==="G"?this.yAxisType_g:this.yAxisType_b,
@ -658,8 +675,25 @@ export default {
lineStyle: { lineStyle: {
color: "rgbA(64, 105, 121, 0.2)" color: "rgbA(64, 105, 121, 0.2)"
} }
} },
axisLabel: {
formatter: function (value) {
if (e.target.checked) {
return value == 1 ? 0 : value
} else {
return value
}
}
},
scale: false
}, },
series: [
{
type: 'line',
itemStyle: { normal: { color: '#0656ff' } },
data: dataArr
}
]
} }
if (str === "G") { if (str === "G") {
this.spectrumChart_G.setOption(options) this.spectrumChart_G.setOption(options)
@ -743,7 +777,7 @@ export default {
dataZoom: [ dataZoom: [
{ {
start: 0, start: 0,
end: 255 end: 100
} }
], ],
series: [ series: [
@ -759,14 +793,14 @@ export default {
this.spectrumChart_G = echarts.init(document.getElementById("spectrumChartRef_G")) this.spectrumChart_G = echarts.init(document.getElementById("spectrumChartRef_G"))
this.spectrumChart_G.setOption(this.getOptions("G")) this.spectrumChart_G.setOption(this.getOptions("G"))
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
spectrumChart_G.resize(); this,spectrumChart_G.resize();
}); });
}, },
drawSpectrumChart_B() { drawSpectrumChart_B() {
this.spectrumChart_B = echarts.init(document.getElementById("spectrumChartRef_B")) this.spectrumChart_B = echarts.init(document.getElementById("spectrumChartRef_B"))
this.spectrumChart_B.setOption(this.getOptions("B")) this.spectrumChart_B.setOption(this.getOptions("B"))
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
spectrumChart_B.resize(); this.spectrumChart_B.resize();
}); });
}, },
drawHistogramChart() { drawHistogramChart() {
@ -832,7 +866,7 @@ export default {
series series
}) })
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
histogramChart.resize(); this.histogramChart.resize();
}); });
} }
} }