Skip to content

E
ec-report-refactor
Commit 9e69639a authored by Jenny's avatar Jenny
Browse files
Options

feat: 横向柱状图点击弹框

parent 9a44378f
Show whitespace changes
Inline Side-by-side
Showing with 416 additions and 291 deletions
components/HorizontalBar/HorizontalBar.vue
View file @ 9e69639a
<template>
<uni-ec-canvas class="uni-ec-canvas" id="horizontal-bar" ref="horizontalBarCanvas" canvas-id="horizontal-bar-chart"
:ec="ec"></uni-ec-canvas>
<uni-ec-canvas
class="uni-ec-canvas"
id="horizontal-bar"
ref="horizontalBarCanvas"
canvas-id="horizontal-bar-chart"
:ec="ec"
></uni-ec-canvas>
</template>
<script>
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import {
DATAZOOM_DEFAULT
} from '@/mixins/zoomConfig.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
let chart = null
let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
export default {
name: "HorizontalBar",
export default {
name: 'HorizontalBar',
mixins: [echartElementData],
data() {
return {
......@@ -22,7 +25,7 @@
option: {}
},
labelShow: false, // 记录当前设置的label.show的值
index: 0, // 记录dataZoom切换当前的下标
index: 0 // 记录dataZoom切换当前的下标
}
},
components: {
......@@ -43,10 +46,7 @@
})
canvas.setChart(chart)
const {
dataList: {
categories,
series,
}
dataList: { categories, series }
} = this.elementData
const that = this
that.ec.option = {
......@@ -56,22 +56,27 @@
data: categories
},
tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{
dataZoom:
that.elementInfo.dataZoom && that.elementInfo.dataZoom.show
? [
{
...that.elementInfo.dataZoom,
...DATAZOOM_DEFAULT
}] : [{
}
]
: [
{
show: false
}],
}
],
series: that.dealSeriesData(series)
}
chart.setOption(that.ec.option)
chart.on('click', event => {
const {
preview,
images
} = that.elementData.dataList
const { preview, images, popup, data } = that.elementData.dataList
var urls = []
var caches = uni.getStorageSync('cacheImages')
images &&
images.forEach(url => {
if (caches.hasOwnProperty(url)) {
urls.push(caches[url])
......@@ -85,6 +90,11 @@
current: event.dataIndex,
urls: urls
})
} else if (popup) {
uni.$emit('showBarDetail', {
popupShow: true,
popupData: data[event.dataIndex]
})
} else {
that.handleEchartsClick(event)
}
......@@ -100,19 +110,22 @@
initChart() {
// 等待子组件完全挂载完成---chart初始化完成
this.$nextTick().then(() => {
const {
categories,
series,
preview,
images
} = this.elementData.dataList
const { categories, series, preview, images } =
this.elementData.dataList
if (this.labelShow) {
// 处理初始状态时，数值显示的数量是否超过了配置的最大值
let count = categories.length
if (this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100
}
if (this.elementInfo.option.dataset.maxCount != null && count > this.elementInfo.option.dataset.maxCount) {
count =
(count *
(this.elementInfo.dataZoom.end -
this.elementInfo.dataZoom.start)) /
100
}
if (
this.elementInfo.option.dataset.maxCount != null &&
count > this.elementInfo.option.dataset.maxCount
) {
this.elementInfo.option.dataset.show = false
}
lastCount = count
......@@ -121,20 +134,30 @@
const dealSeries = this.dealSeriesData(series)
this.$set(this.ec.option, 'yAxis.data', categories)
this.$set(this.ec.option, 'series', dealSeries)
this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom
.show ? [{
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)
if (Number(dealSeries[0].barWidth)) {
const height = categories.length * (Number(dealSeries[0].barWidth) + 5) + 25
const height =
categories.length * (Number(dealSeries[0].barWidth) + 5) + 25
uni.$emit('handleUpdateHeight', height)
chart.resize({
width: chart.getWidth(),
......@@ -158,15 +181,15 @@
if (tooltip.formatter && tooltip.formatter.length) {
return {
...tooltip,
formatter: (val) => {
formatter: val => {
return this.$u.common.converFunction(tooltip.formatter, val)
},
trigger: "axis"
trigger: 'axis'
}
}
return {
...tooltip,
trigger: "axis"
trigger: 'axis'
}
},
/**
......@@ -182,8 +205,10 @@
label: {
...that.elementInfo.option.dataset,
formatter: val => {
return that.$u.common.converFunction(that.elementInfo.option.dataset
.formatter, val)
return that.$u.common.converFunction(
that.elementInfo.option.dataset.formatter,
val
)
}
}
}
......@@ -207,7 +232,7 @@
if (!caches.hasOwnProperty(url)) {
uni.downloadFile({
url: url,
success: (res) => {
success: res => {
if (res.statusCode === 200) {
caches[url] = res.tempFilePath
uni.setStorageSync('cacheImages', caches)
......@@ -222,10 +247,19 @@
* event： 包含dataZoom的start和end
*/
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，如果存在且不为空，代表可以左右滑动切换
if (this.elementData.dataList.datas && this.elementData.dataList.datas.length) {
count = this.elementData.dataList.datas[this.index].categories.length * (event.end - event.start) / 100
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时，才判断超过最大个数隐藏
......@@ -270,8 +304,13 @@
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) {
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(event)
}
......@@ -290,7 +329,5 @@
this.$set(this.ec.option, 'dataZoom.end', event.end)
}
}
}
}
</script>
<style scoped>
</style>
components/ModelData/ModelData.vue 0 → 100644
View file @ 9e69639a
<template>
<u-modal
class="model-data"
v-model="popupShow"
:closeOnClickOverlay="true"
title="明细"
@close="close"
@confirm="close"
>
<view class="slot-content">
<view v-for="(val, key) in popupData" class="data-view">
<view class="data-key ellipsis">{{ key }}</view>
<view class="data-val ellipsis">{{ val }}</view>
</view>
</view>
</u-modal>
</template>
<script>
export default {
name: 'ModelData',
data() {
return {}
},
props: {
popupData: {
type: Object,
default: () => {}
},
popupShow: {
type: Boolean,
default: false
}
},
methods: {
close() {
console.log(1)
uni.$emit('showBarDetail', {
popupShow: false,
popupData: {}
})
}
}
}
</script>
<style scoped>
.model-data {
position: relative;
z-index: 9999999;
}
.slot-content {
margin: 10px;
font-size: 12px;
border: 1px solid #eee;
border-radius: 5px;
}
.data-view {
display: flex;
align-self: center;
border-bottom: 1px solid #eee;
padding: 5px;
}
.data-key {
min-width: 28%;
margin-right: 10px;
border-right: 1px solid #eee;
}
</style>
pages/index/index.vue
View file @ 9e69639a
......@@ -15,7 +15,7 @@
height: `${element.type == 'HorizontalBar' && horizontalBarHeight ? horizontalBarHeight : parseInt(element.height * scale)}px`,
left: `${parseInt(element.left * scale)}px`,
top: `${parseInt(element.top * scale)}px`,
zIndex: `${element.type == 'NormalTabs' || element.type == 'DateTimePicker' ? 999999 : index + 1}`
zIndex: `${element.type == 'NormalTabs' || element.type == 'DateTimePicker' ? 9999 : index + 1}`
}"
>
<!-- 普通柱状图 -->
......@@ -59,6 +59,12 @@
<!-- <Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table> -->
</view>
</template>
<ModelData
style="position: relative;z-index: 99999;"
:popupShow="popupShow"
:popupData="popupData"
></ModelData>
</view>
</template>
......@@ -70,7 +76,9 @@
timename: null,
pageScrollTop: 0,
stickyTables: [], // 设置了吸顶的table
horizontalBarHeight: 0
horizontalBarHeight: 0,
popupShow: false,
popupData: {}
}
},
computed: {
......@@ -145,6 +153,11 @@
uni.$on('handleUpdateHeight', (height) => {
that.horizontalBarHeight = height
})
uni.$on('showBarDetail', data => {
const { popupShow, popupData } = data
that.popupShow = popupShow
that.popupData = popupData
})
},
onHide() {
// 移除监听事件
......
static/style/common.scss
View file @ 9e69639a
......@@ -27,3 +27,9 @@
height: 100%;
display:block;
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
\ No newline at end of file
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