Skip to content

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

fix: bar and line add datazoom to change data

parent 41767bce
Show whitespace changes
Inline Side-by-side
Showing with 284 additions and 116 deletions
components/HorizontalBar/HorizontalBar.vue
View file @ 95565bd4
......@@ -19,7 +19,8 @@
lazyLoad: true,
option: {}
},
labelShow: false // 记录当前设置的label.show的值
labelShow: false, // 记录当前设置的label.show的值
index: 0, // 记录dataZoom切换当前的下标
}
},
components: {
......@@ -82,8 +83,10 @@
}
})
chart.on('datazoom', event => {
// 传递参数给其他组件
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
// 处理dataZoom的拖动事件
that.handleDataZoomEvent(event)
})
return chart
},
......@@ -166,16 +169,31 @@
}
})
},
/**
* 响应dataZoom的滑动事件
* event： 包含dataZoom的start和end
*/
handleDataZoomEvent(event) {
var count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
// 给小程序里面赋值datas，如果存在且不为空，代表可以左右滑动切换
if(this.elementData.dataList.datas && this.elementData.dataList.datas.length) {
count = this.elementData.dataList.datas[this.index].categories.length * (event.end - event.start) / 100
this.switchData(event, count)
}
// 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
if(this.labelShow) {
this.dealLabelShowStatus(event, count)
}
lastCount = count
},
/**
* 处理图表的数值是否显示
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
* count: 当前图表显示的数量
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
dealLabelShowStatus(event, count) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
......@@ -185,7 +203,6 @@
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
const series = this.ec.option.series
series.map(item => {
......@@ -195,7 +212,32 @@
this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end)
}
},
/**
* 处理数据的切换
* 滑块滚动到最左边或者最右边去切换上一个或者下一个数据
* event： 包含dataZoom的start和end
* count: 当前图表显示的数量
*/
switchData(event,count) {
const categories = this.elementData.dataList.datas[this.index].categories
// 容错在一个百分点内，认为是滑块滚动
const flag = Math.abs(lastCount - count) <= categories.length / 100 ? true : false
if(flag && event.end === 100 && this.index != this.elementData.dataList.datas.length - 1) {
this.index += 1
this.setChartDatas()
}
if(flag && event.start === 0 && this.index != 0) {
this.index -= 1
this.setChartDatas()
}
},
setChartDatas() {
const categories = this.elementData.dataList.datas[this.index].categories
const series = this.elementData.dataList.datas[this.index].series
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'yAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries)
}
}
}
......
components/LineMixBar/LineMixBar.vue
View file @ 95565bd4
......@@ -25,7 +25,8 @@
lazyLoad: true,
option: {}
},
labelShow: false // 记录当前设置的label.show的值
labelShow: false, // 记录当前设置的label.show的值
index: 0, // 记录dataZoom切换当前的下标
}
},
components: {
......@@ -90,8 +91,10 @@
that.handleEchartsClick(event)
})
chart.on('datazoom', event => {
// 传递参数给其他组件
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
// 处理dataZoom的拖动事件
that.handleDataZoomEvent(event)
})
return chart
},
......@@ -156,16 +159,31 @@
})
return newData
},
/**
* 响应dataZoom的滑动事件
* event： 包含dataZoom的start和end
*/
handleDataZoomEvent(event) {
var count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
// 给小程序里面赋值datas，如果存在且不为空，代表可以左右滑动切换
if(this.elementData.dataList.datas && this.elementData.dataList.datas.length) {
count = this.elementData.dataList.datas[this.index].categories.length * (event.end - event.start) / 100
this.switchData(event, count)
}
// 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
if(this.labelShow) {
this.dealLabelShowStatus(event, count)
}
lastCount = count
},
/**
* 处理图表的数值是否显示
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
* count: 当前图表显示的数量
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
dealLabelShowStatus(event, count) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
......@@ -175,7 +193,6 @@
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
const series = this.ec.option.series
series.map(item => {
......@@ -185,7 +202,32 @@
this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end)
}
},
/**
* 处理数据的切换
* 滑块滚动到最左边或者最右边去切换上一个或者下一个数据
* event： 包含dataZoom的start和end
* count: 当前图表显示的数量
*/
switchData(event,count) {
const categories = this.elementData.dataList.datas[this.index].categories
// 容错在一个百分点内，认为是滑块滚动
const flag = Math.abs(lastCount - count) <= categories.length / 100 ? true : false
if(flag && event.end === 100 && this.index != this.elementData.dataList.datas.length - 1) {
this.index += 1
this.setChartDatas()
}
if(flag && event.start === 0 && this.index != 0) {
this.index -= 1
this.setChartDatas()
}
},
setChartDatas() {
const categories = this.elementData.dataList.datas[this.index].categories
const series = this.elementData.dataList.datas[this.index].series
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries)
}
}
}
......
components/NormalBar/NormalBar.vue
View file @ 95565bd4
......@@ -20,7 +20,8 @@
lazyLoad: true,
option: {}
},
labelShow: false // 记录当前设置的label.show的值
labelShow: false, // 记录当前设置的label.show的值
index: 0, // 记录dataZoom切换当前的下标
}
},
components: {
......@@ -76,8 +77,10 @@
that.handleEchartsClick(event)
})
chart.on('datazoom', event => {
// 传递参数给其他组件
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
// 处理dataZoom的拖动事件
that.handleDataZoomEvent(event)
})
return chart
},
......@@ -133,16 +136,31 @@
})
return newData
},
/**
* 响应dataZoom的滑动事件
* event： 包含dataZoom的start和end
*/
handleDataZoomEvent(event) {
var count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
// 给小程序里面赋值datas，如果存在且不为空，代表可以左右滑动切换
if(this.elementData.dataList.datas && this.elementData.dataList.datas.length) {
count = this.elementData.dataList.datas[this.index].categories.length * (event.end - event.start) / 100
this.switchData(event, count)
}
// 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
if(this.labelShow) {
this.dealLabelShowStatus(event, count)
}
lastCount = count
},
/**
* 处理图表的数值是否显示
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
* count: 当前图表显示的数量
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
dealLabelShowStatus(event, count) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
......@@ -152,7 +170,6 @@
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
const series = this.ec.option.series
series.map(item => {
......@@ -162,7 +179,32 @@
this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end)
}
},
/**
* 处理数据的切换
* 滑块滚动到最左边或者最右边去切换上一个或者下一个数据
* event： 包含dataZoom的start和end
* count: 当前图表显示的数量
*/
switchData(event,count) {
const categories = this.elementData.dataList.datas[this.index].categories
// 容错在一个百分点内，认为是滑块滚动
const flag = Math.abs(lastCount - count) <= categories.length / 100 ? true : false
if(flag && event.end === 100 && this.index != this.elementData.dataList.datas.length - 1) {
this.index += 1
this.setChartDatas()
}
if(flag && event.start === 0 && this.index != 0) {
this.index -= 1
this.setChartDatas()
}
},
setChartDatas() {
const categories = this.elementData.dataList.datas[this.index].categories
const series = this.elementData.dataList.datas[this.index].series
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries)
}
}
}
......
components/NormalLine/NormalLine.vue
View file @ 95565bd4
......@@ -19,7 +19,8 @@
lazyLoad: true,
option: {}
},
labelShow: false ,// 记录当前设置的label.show的值
labelShow: false, // 记录当前设置的label.show的值
index: 0, // 记录dataZoom切换当前的下标
}
},
components: {
......@@ -78,8 +79,10 @@
that.handleEchartsClick(event)
})
chart.on('datazoom', event => {
// 传递参数给其他组件
that.echartsDataZoom(event)
that.dealLabelShowStatus(event)
// 处理dataZoom的拖动事件
that.handleDataZoomEvent(event)
})
return chart
},
......@@ -135,16 +138,31 @@
})
return newData
},
/**
* 响应dataZoom的滑动事件
* event： 包含dataZoom的start和end
*/
handleDataZoomEvent(event) {
var count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
// 给小程序里面赋值datas，如果存在且不为空，代表可以左右滑动切换
if(this.elementData.dataList.datas && this.elementData.dataList.datas.length) {
count = this.elementData.dataList.datas[this.index].categories.length * (event.end - event.start) / 100
this.switchData(event, count)
}
// 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
if(this.labelShow) {
this.dealLabelShowStatus(event, count)
}
lastCount = count
},
/**
* 处理图表的数值是否显示
* 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end
* count: 当前图表显示的数量
*/
dealLabelShowStatus(event) {
// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
if(this.labelShow) {
dealLabelShowStatus(event, count) {
var flag = false
const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) {
// 放大的情况
......@@ -154,7 +172,6 @@
// 缩小的情况
flag = true
}
lastCount = count
if(flag) {
const series = this.ec.option.series
series.map(item => {
......@@ -164,7 +181,32 @@
this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end)
}
},
/**
* 处理数据的切换
* 滑块滚动到最左边或者最右边去切换上一个或者下一个数据
* event： 包含dataZoom的start和end
* count: 当前图表显示的数量
*/
switchData(event,count) {
const categories = this.elementData.dataList.datas[this.index].categories
// 容错在一个百分点内，认为是滑块滚动
const flag = Math.abs(lastCount - count) <= categories.length / 100 ? true : false
if(flag && event.end === 100 && this.index != this.elementData.dataList.datas.length - 1) {
this.index += 1
this.setChartDatas()
}
if(flag && event.start === 0 && this.index != 0) {
this.index -= 1
this.setChartDatas()
}
},
setChartDatas() {
const categories = this.elementData.dataList.datas[this.index].categories
const series = this.elementData.dataList.datas[this.index].series
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'xAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries)
}
}
}
......
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