Skip to content

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

fix: bar line and pie add tooltip formatter

parent 05399770
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 143 deletions
components/HorizontalBar/HorizontalBar.vue
View file @ 2a5ad7e6
...@@ -6,9 +6,11 @@ ...@@ -6,9 +6,11 @@
<script> <script>
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas' import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js' import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js' import {
DATAZOOM_DEFAULT
} from '@/mixins/zoomConfig.js'
let chart = null let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量 let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default { export default {
name: "HorizontalBar", name: "HorizontalBar",
...@@ -19,16 +21,16 @@ ...@@ -19,16 +21,16 @@
lazyLoad: true, lazyLoad: true,
option: {} option: {}
}, },
labelShow: false, // 记录当前设置的label.show的值 labelShow: false, // 记录当前设置的label.show的值
index: 0, // 记录dataZoom切换当前的下标 index: 0, // 记录dataZoom切换当前的下标
} }
}, },
components: { components: {
uniEcCanvas uniEcCanvas
}, },
created() { created() {
this.labelShow = this.elementInfo.option.dataset.show this.labelShow = this.elementInfo.option.dataset.show
}, },
mounted() { mounted() {
this.$refs['horizontalBarCanvas'].init(this.inited) this.$refs['horizontalBarCanvas'].init(this.inited)
}, },
...@@ -45,28 +47,33 @@ ...@@ -45,28 +47,33 @@
categories, categories,
series, series,
} }
} = this.elementData } = this.elementData
const that = this const that = this
that.ec.option= { that.ec.option = {
...that.elementInfo.option, ...that.elementInfo.option,
yAxis: { yAxis: {
...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis,
data: categories data: categories
}, },
tooltip: { tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
...that.elementInfo.option.tooltip, dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{
trigger: "axis" ...that.elementInfo.dataZoom,
}, ...DATAZOOM_DEFAULT
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{...that.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}], }] : [{
show: false
}],
series: that.dealSeriesData(series) series: that.dealSeriesData(series)
} }
chart.setOption(that.ec.option) chart.setOption(that.ec.option)
chart.on('click', event => { chart.on('click', event => {
const { preview, images } = that.elementData.dataList const {
preview,
images
} = that.elementData.dataList
var urls = [] var urls = []
var caches = uni.getStorageSync('cacheImages') var caches = uni.getStorageSync('cacheImages')
images.forEach(url => { images.forEach(url => {
if(caches.hasOwnProperty(url)) { if (caches.hasOwnProperty(url)) {
urls.push(caches[url]) urls.push(caches[url])
} else { } else {
urls.push(url) urls.push(url)
...@@ -84,48 +91,84 @@ ...@@ -84,48 +91,84 @@
}) })
chart.on('datazoom', event => { chart.on('datazoom', event => {
// 传递参数给其他组件 // 传递参数给其他组件
that.echartsDataZoom(event) that.echartsDataZoom(event)
// 处理dataZoom的拖动事件 // 处理dataZoom的拖动事件
that.handleDataZoomEvent(event) that.handleDataZoomEvent(event)
}) })
return chart return chart
}, },
initChart() { initChart() {
// 等待子组件完全挂载完成---chart初始化完成 // 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => { this.$nextTick().then(() => {
const { categories, series, preview, images } = this.elementData.dataList const {
if(this.labelShow) { categories,
// 处理初始状态时，数值显示的数量是否超过了配置的最大值 series,
let count = categories.length preview,
if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) { images
count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100 } = this.elementData.dataList
} if (this.labelShow) {
if(count > this.elementInfo.option.dataset.maxCount) { // 处理初始状态时，数值显示的数量是否超过了配置的最大值
this.elementInfo.option.dataset.show = false let count = categories.length
} if (this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
lastCount = count 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) const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'yAxis.data', categories) this.$set(this.ec.option, 'yAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries) 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}]) this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom
if(chart) { .show ? [{
const option = chart.getOption() ...this.elementInfo.dataZoom,
option.series = dealSeries ...DATAZOOM_DEFAULT
// 重新setOption，使得设置的formatter生效 }] : [{
chart.setOption(option) show: false
if(Number(dealSeries[0].barWidth)) { }])
const height = categories.length * (Number(dealSeries[0].barWidth) + 5) + 25 if (chart) {
uni.$emit('handleUpdateHeight', height) const option = chart.getOption()
chart.resize({ width: chart.getWidth(), height }) option.series = dealSeries
} // 重新setOption，使得设置的formatter生效
} chart.setOption(option)
if(preview) { if (Number(dealSeries[0].barWidth)) {
const height = categories.length * (Number(dealSeries[0].barWidth) + 5) + 25
uni.$emit('handleUpdateHeight', height)
chart.resize({
width: chart.getWidth(),
height
})
}
}
if (preview) {
this.cacheImages(images) this.cacheImages(images)
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
},
/** /**
* 处理数据 * 处理数据
*/ */
...@@ -156,16 +199,16 @@ ...@@ -156,16 +199,16 @@
*/ */
cacheImages(images) { cacheImages(images) {
var caches = uni.getStorageSync('cacheImages') var caches = uni.getStorageSync('cacheImages')
if(!caches) { if (!caches) {
caches = {} caches = {}
} }
images.forEach(url => { images.forEach(url => {
// 如果包含当前url，就不再下载 // 如果包含当前url，就不再下载
if(!caches.hasOwnProperty(url)) { if (!caches.hasOwnProperty(url)) {
uni.downloadFile({ uni.downloadFile({
url: url, url: url,
success: (res) => { success: (res) => {
if(res.statusCode === 200) { if (res.statusCode === 200) {
caches[url] = res.tempFilePath caches[url] = res.tempFilePath
uni.setStorageSync('cacheImages', caches) uni.setStorageSync('cacheImages', caches)
} }
...@@ -174,80 +217,80 @@ ...@@ -174,80 +217,80 @@
} }
}) })
}, },
/** /**
* 响应dataZoom的滑动事件 * 响应dataZoom的滑动事件
* event： 包含dataZoom的start和end * event： 包含dataZoom的start和end
*/ */
handleDataZoomEvent(event) { handleDataZoomEvent(event) {
var count = this.elementData.dataList.categories.length * (event.end - event.start) / 100 var count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
// 给小程序里面赋值datas，如果存在且不为空，代表可以左右滑动切换 // 给小程序里面赋值datas，如果存在且不为空，代表可以左右滑动切换
if(this.elementData.dataList.datas && this.elementData.dataList.datas.length) { if (this.elementData.dataList.datas && this.elementData.dataList.datas.length) {
count = this.elementData.dataList.datas[this.index].categories.length * (event.end - event.start) / 100 count = this.elementData.dataList.datas[this.index].categories.length * (event.end - event.start) / 100
this.switchData(event, count) this.switchData(event, count)
} }
// 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏 // 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
if(this.labelShow) { if (this.labelShow) {
this.dealLabelShowStatus(event, count) this.dealLabelShowStatus(event, count)
} }
lastCount = count lastCount = count
}, },
/** /**
* 处理图表的数值是否显示 * 处理图表的数值是否显示
* 超过maxCount个时隐藏点的数值 * 超过maxCount个时隐藏点的数值
* event： 包含dataZoom的start和end * event： 包含dataZoom的start和end
* count: 当前图表显示的数量 * count: 当前图表显示的数量
*/ */
dealLabelShowStatus(event, count) { dealLabelShowStatus(event, count) {
var flag = false var flag = false
const maxCount = this.elementInfo.option.dataset.maxCount const maxCount = this.elementInfo.option.dataset.maxCount
if(lastCount < count && lastCount <= maxCount && count > maxCount ) { if (lastCount < count && lastCount <= maxCount && count > maxCount) {
// 放大的情况 // 放大的情况
flag = true flag = true
} }
if(lastCount > count && lastCount >= maxCount && count < maxCount) { if (lastCount > count && lastCount >= maxCount && count < maxCount) {
// 缩小的情况 // 缩小的情况
flag = true flag = true
} }
if(flag) { if (flag) {
const series = this.ec.option.series const series = this.ec.option.series
series.map(item => { series.map(item => {
item.label.show = count <= this.elementInfo.option.dataset.maxCount item.label.show = count <= this.elementInfo.option.dataset.maxCount
}) })
this.$set(this.ec.option, 'series', series) this.$set(this.ec.option, 'series', series)
this.$set(this.ec.option, 'dataZoom.start', event.start) this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end) this.$set(this.ec.option, 'dataZoom.end', event.end)
} }
}, },
/** /**
* 处理数据的切换 * 处理数据的切换
* 滑块滚动到最左边或者最右边去切换上一个或者下一个数据 * 滑块滚动到最左边或者最右边去切换上一个或者下一个数据
* event： 包含dataZoom的start和end * event： 包含dataZoom的start和end
* count: 当前图表显示的数量 * count: 当前图表显示的数量
*/ */
switchData(event,count) { switchData(event, count) {
const categories = this.elementData.dataList.datas[this.index].categories const categories = this.elementData.dataList.datas[this.index].categories
// 容错在一个百分点内，认为是滑块滚动 // 容错在一个百分点内，认为是滑块滚动
const flag = Math.abs(lastCount - count) <= categories.length / 100 ? true : false const flag = Math.abs(lastCount - count) <= categories.length / 100 ? true : false
if(flag && event.end === 100 && this.index != this.elementData.dataList.datas.length - 1) { if (flag && event.end === 100 && this.index != this.elementData.dataList.datas.length - 1) {
this.index += 1 this.index += 1
this.setChartDatas(event) this.setChartDatas(event)
} }
if(flag && event.start === 0 && this.index != 0) { if (flag && event.start === 0 && this.index != 0) {
this.index -= 1 this.index -= 1
this.setChartDatas(event) this.setChartDatas(event)
} }
}, },
setChartDatas(event) { setChartDatas(event) {
const categories = this.elementData.dataList.datas[this.index].categories const categories = this.elementData.dataList.datas[this.index].categories
const series = this.elementData.dataList.datas[this.index].series const series = this.elementData.dataList.datas[this.index].series
const dealSeries = this.dealSeriesData(series) const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'yAxis.data', categories) this.$set(this.ec.option, 'yAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries) this.$set(this.ec.option, 'series', dealSeries)
this.$set(this.ec.option, 'dataZoom.start', event.start) this.$set(this.ec.option, 'dataZoom.start', event.start)
this.$set(this.ec.option, 'dataZoom.end', event.end) this.$set(this.ec.option, 'dataZoom.end', event.end)
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
</style> </style>
components/LineMixBar/LineMixBar.vue
View file @ 2a5ad7e6
...@@ -63,10 +63,7 @@ ...@@ -63,10 +63,7 @@
type: 'value' type: 'value'
} }
], ],
tooltip: { tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
...that.elementInfo.option.tooltip,
trigger: "axis"
},
toolbox: { toolbox: {
...that.elementInfo.option.toolbox, ...that.elementInfo.option.toolbox,
feature: { feature: {
...@@ -125,6 +122,28 @@ ...@@ -125,6 +122,28 @@
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
},
/** /**
* 处理数据 * 处理数据
*/ */
......
components/NormalBar/NormalBar.vue
View file @ 2a5ad7e6
...@@ -49,10 +49,7 @@ ...@@ -49,10 +49,7 @@
...that.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
tooltip: { tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
...that.elementInfo.option.tooltip,
trigger: "axis"
},
toolbox: { toolbox: {
...that.elementInfo.option.toolbox, ...that.elementInfo.option.toolbox,
feature: { feature: {
...@@ -111,6 +108,28 @@ ...@@ -111,6 +108,28 @@
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
},
/** /**
* 处理数据 * 处理数据
*/ */
......
components/NormalLine/NormalLine.vue
View file @ 2a5ad7e6
...@@ -51,10 +51,7 @@ ...@@ -51,10 +51,7 @@
...that.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
tooltip: { tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
...that.elementInfo.option.tooltip,
trigger: "axis"
},
toolbox: { toolbox: {
...that.elementInfo.option.toolbox, ...that.elementInfo.option.toolbox,
feature: { feature: {
...@@ -113,6 +110,28 @@ ...@@ -113,6 +110,28 @@
} }
}) })
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip(tooltip) {
if (!tooltip) {
return
}
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
}
}
return {
...tooltip,
trigger: "axis"
}
},
/** /**
* 处理数据 * 处理数据
*/ */
......
components/NormalPie/NormalPie.vue
View file @ 2a5ad7e6
...@@ -40,19 +40,17 @@ export default { ...@@ -40,19 +40,17 @@ export default {
devicePixelRatio: canvasDpr devicePixelRatio: canvasDpr
}) })
canvas.setChart(chart) canvas.setChart(chart)
const { series } = this.elementData.dataList const { series } = this.elementData.dataList
const that = this
this.ec.option = { this.ec.option = {
...this.elementInfo.option, ...that.elementInfo.option,
color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'], color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'],
tooltip: { tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
...this.elementInfo.option.tooltip, series: that.dealSeriesData(series)
trigger: 'item'
},
series: this.dealSeriesData(series)
} }
chart.setOption(this.ec.option) chart.setOption(that.ec.option)
chart.on('click', event => { chart.on('click', event => {
this.handleEchartsClick(event) that.handleEchartsClick(event)
}) })
return chart return chart
}, },
...@@ -65,6 +63,29 @@ export default { ...@@ -65,6 +63,29 @@ export default {
} }
}, },
/**
*
* @param tooltip 表单的tooltip设置
*/
dealTooltip (tooltip) {
if(!tooltip) {
return
}
if(tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "item"
}
}
return {
...tooltip,
trigger: "item"
}
},
dealSeriesData (data) { dealSeriesData (data) {
if(!data) return if(!data) return
const series = [{ const series = [{
......
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