fix: 修改VisualMap

This commit is contained in:
Xu Zhimeng 2024-07-26 14:27:05 +08:00
parent 56aada9e3c
commit 7f3f3b95d1

View File

@ -15,7 +15,6 @@
@mouseleave="handleBorderMouseLeave" @mouseleave="handleBorderMouseLeave"
@mouseup="handleBorderMouseLeave" @mouseup="handleBorderMouseLeave"
> >
<!-- 2D 图表为了相应Unzoom采用的v-show -->
<div class="_2d-chart" ref="TwoChartRef"> <div class="_2d-chart" ref="TwoChartRef">
<CustomChart <CustomChart
ref="chartTwoDRef" ref="chartTwoDRef"
@ -165,17 +164,16 @@ const twoDOption = {
animation: false, animation: false,
visualMap: { visualMap: {
type: 'continuous', type: 'continuous',
min: 4096, min: 0,
max: 0, max: 0,
itemWidth: 12, itemWidth: 12,
itemHeight: 0, itemHeight: 0,
dimension: 1, dimension: 2,
seriesIndex: 0, seriesIndex: 0,
zlevel: 0, zlevel: 0,
orient: 'vertical', orient: 'vertical',
right: 0, right: 0,
bottom: 20, bottom: 20,
text: [4096, 0],
textStyle: { textStyle: {
color: '#8EC0C8', color: '#8EC0C8',
}, },
@ -236,6 +234,7 @@ export default {
histogramDataList: { histogramDataList: {
handler() { handler() {
this.buildScatterList() this.buildScatterList()
this.setVisialMapParams()
}, },
immediate: true, immediate: true,
}, },
@ -282,7 +281,6 @@ export default {
methods: { methods: {
// scatter // scatter
buildScatterList() { buildScatterList() {
console.log(this.twoDOption)
const { const {
xAxis: { min: minX, max: maxX }, xAxis: { min: minX, max: maxX },
yAxis: { min: minY, max: maxY }, yAxis: { min: minY, max: maxY },
@ -292,15 +290,25 @@ export default {
this.twoDOption.series.symbolSize = 5 this.twoDOption.series.symbolSize = 5
this.twoDOption.series.data = this.histogramDataList this.twoDOption.series.data = this.histogramDataList
.filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY) .filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
.map(({ b, g }) => this.buildScatterItem(b, g)) .map(({ b, g, c }) => this.buildScatterItem(b, g, c))
}, },
// scatter // scatter
buildScatterItem(xAxis, yAxis) { buildScatterItem(xAxis, yAxis, count) {
return { return {
value: [xAxis, yAxis], value: [xAxis, yAxis, count],
} }
}, },
setVisialMapParams() {
const counts = this.histogramDataList.map(({ c }) => c)
if (counts.length) {
this.twoDOption.visualMap.max = Math.max(...counts)
} else {
this.twoDOption.visualMap.max = 0
}
},
// //
reDrawRect() { reDrawRect() {
const chart = this.$refs.chartTwoDRef.getChartInstance() const chart = this.$refs.chartTwoDRef.getChartInstance()