fix: 修改VisualMap
This commit is contained in:
parent
56aada9e3c
commit
7f3f3b95d1
|
@ -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()
|
||||||
|
|
Loading…
Reference in New Issue
Block a user