Skip to content

E
ec-report-refactor
Commit fba69cd3 authored by leon's avatar leon
Browse files
Options

fix：fix datazoom drag to change label show

parent 669cdf4f
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 56 deletions
components/DashboardProgress/DashboardProgress.vue
View file @ fba69cd3
......@@ -36,7 +36,6 @@
inited(canvas, width, height, canvasDpr) {
var scale = 1.0
const { windowWidth } = uni.getSystemInfoSync()
console.log('window width is : ', windowWidth)
if (windowWidth < 400) {
scale = 1.25
}
......
components/HorizontalBar/HorizontalBar.vue
View file @ fba69cd3
......@@ -8,6 +8,7 @@
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
name: "HorizontalBar",
......@@ -99,6 +100,7 @@
if(count > this.elementInfo.option.dataset.maxCount) {
this.elementInfo.option.dataset.show = false
}
lastCount = count
}
const dealSeries = this.dealSeriesData(series)
......@@ -166,25 +168,40 @@
},
/**
* 处理图表的数值是否显示
* 超过10个时隐藏点的数值
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
*/
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const option = chart.getOption()
// TODO：切换全屏后返回，chart实例不存在了
if(!option) {
return
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
flag = true
}
if(lastCount > count && lastCount >= maxCount && count < maxCount) {
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
var option = chart.getOption()
// TODO：切换全屏后返回，chart实例不存在了
if(!option) {
// 这样处理没有效果
option = this.ec.option
return
}
const series = option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
chart.setOption({series: series})
}
const series = option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
chart.setOption(option)
}
}
}
}
}
</script>
......
components/LineMixBar/LineMixBar.vue
View file @ fba69cd3
......@@ -14,6 +14,7 @@
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
name: "LineMixBar",
......@@ -107,6 +108,7 @@
if(count > this.elementInfo.option.dataset.maxCount) {
this.elementInfo.option.dataset.show = false
}
lastCount = count
}
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'xAxis.data', categories)
......@@ -156,26 +158,40 @@
},
/**
* 处理图表的数值是否显示
* 超过10个时隐藏点的数值
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
*/
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const option = chart.getOption()
// TODO：切换全屏后返回，chart实例不存在了
if(!option) {
return
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
flag = true
}
if(lastCount > count && lastCount >= maxCount && count < maxCount) {
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
var option = chart.getOption()
// TODO：切换全屏后返回，chart实例不存在了
if(!option) {
// 这样处理没有效果
option = this.ec.option
return
}
const series = option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
chart.setOption({series: series})
}
const series = option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
chart.setOption(option)
}
}
}
}
</script>
......
components/NormalBar/NormalBar.vue
View file @ fba69cd3
......@@ -9,6 +9,7 @@
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
name: "Normalbar",
......@@ -93,6 +94,7 @@
if(count > this.elementInfo.option.dataset.maxCount) {
this.elementInfo.option.dataset.show = false
}
lastCount = count
}
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'xAxis.data', categories)
......@@ -133,23 +135,38 @@
},
/**
* 处理图表的数值是否显示
* 超过10个时隐藏点的数值
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
*/
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const option = chart.getOption()
// TODO：切换全屏后返回，chart实例不存在了
if(!option) {
return
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
flag = true
}
if(lastCount > count && lastCount >= maxCount && count < maxCount) {
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
var option = chart.getOption()
// TODO：切换全屏后返回，chart实例不存在了
if(!option) {
// 这样处理没有效果
option = this.ec.option
return
}
const series = option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
chart.setOption({series: series})
}
const series = option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
chart.setOption(option)
}
}
}
......
components/NormalLine/NormalLine.vue
View file @ fba69cd3
......@@ -8,7 +8,8 @@
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
mixins: [echartElementData],
......@@ -18,7 +19,7 @@
lazyLoad: true,
option: {}
},
labelShow: false // 记录当前设置的label.show的值
labelShow: false ,// 记录当前设置的label.show的值
}
},
components: {
......@@ -88,23 +89,24 @@
const { categories, series } = this.elementData.dataList
if(this.labelShow) {
// 处理初始状态时，数值显示的数量是否超过了配置的最大值
let count = categories.length
var count = categories.length
if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100
}
if(count > this.elementInfo.option.dataset.maxCount) {
this.elementInfo.option.dataset.show = false
}
lastCount = count
}
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries)
this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}])
if(chart) {
const option = chart.getOption()
option.series = dealSeries
// 重新setOption，使得设置的formatter生效
chart.setOption(option)
chart.setOption({
series: dealSeries
})
}
})
},
......@@ -135,23 +137,38 @@
},
/**
* 处理图表的数值是否显示
* 超过10个时隐藏点的数值
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
*/
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const option = chart.getOption()
// TODO：切换全屏后返回，chart实例不存在了
if(!option) {
return
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
flag = true
}
if(lastCount > count && lastCount >= maxCount && count < maxCount) {
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
var option = chart.getOption()
// TODO：切换全屏后返回，chart实例不存在了
if(!option) {
// 这样处理没有效果
option = this.ec.option
return
}
const series = option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
chart.setOption({series: series})
}
const series = option.series
series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount
})
chart.setOption(option)
}
}
}
......
pages/details/details.vue
View file @ fba69cd3
......@@ -119,14 +119,11 @@
uni.$on('handleDataZoomParams', ({index, paramName, value}) => {
if(index.length && paramName && value) {
that.reportInfo.list = that.reportInfo.list.map(item => {
console.log('begin item', item)
const flag = index.includes(item.id)
if(flag && item.dataZoom) {
console.log('set item', item)
that.$set(item.dataZoom, 'start', value.start)
that.$set(item.dataZoom, 'end', value.end)
}
console.log('after item', item)
return item
})
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment