Skip to content

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

feat: line bar add full screen function

parent 83c1163f
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 39 deletions
components/HorizontalBar/HorizontalBar.vue
View file @ a7902e38
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
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'
import { svg } from '@/mixins/svg.js'
let chart = null let chart = null
export default { export default {
...@@ -39,22 +40,38 @@ ...@@ -39,22 +40,38 @@
categories, categories,
series, series,
} }
} = this.elementData } = this.elementData
this.ec.option= { const that = this
...this.elementInfo.option, that.ec.option= {
...that.elementInfo.option,
yAxis: { yAxis: {
...this.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis,
data: categories data: categories
}, },
tooltip: { tooltip: {
...this.elementInfo.option.tooltip, ...that.elementInfo.option.tooltip,
trigger: "axis" trigger: "axis"
}, },
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}], toolbox: {
series: this.dealSeriesData(series) ...that.elementInfo.option.toolbox,
feature: {
myFull: {
show: true,
icon: svg.enterFull,
onclick() {
const element = {...that.elementInfo}
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))
uni.navigateTo({
url: url
})
}
}
}
},
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{...that.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: that.dealSeriesData(series)
} }
chart.setOption(this.ec.option) chart.setOption(that.ec.option)
const that = this
chart.on('click', event => { chart.on('click', event => {
const { preview, images } = that.elementData.dataList const { preview, images } = that.elementData.dataList
var urls = [] var urls = []
......
components/LineMixBar/LineMixBar.vue
View file @ a7902e38
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
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'
import { svg } from '@/mixins/svg.js'
let chart = null let chart = null
export default { export default {
...@@ -39,32 +40,49 @@ ...@@ -39,32 +40,49 @@
devicePixelRatio: canvasDpr devicePixelRatio: canvasDpr
}) })
canvas.setChart(chart) canvas.setChart(chart)
const {categories, series} = this.elementData.dataList const {categories, series} = this.elementData.dataList
this.ec.option = { const that = this
...this.elementInfo.option, that.ec.option = {
...that.elementInfo.option,
xAxis: { xAxis: {
...this.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
yAxis: [{ yAxis: [{
...this.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis,
type: 'value' type: 'value'
}, },
{ {
...this.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis,
type: 'value' type: 'value'
} }
], ],
tooltip: { tooltip: {
...this.elementInfo.option.tooltip, ...that.elementInfo.option.tooltip,
trigger: "axis" trigger: "axis"
}, },
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}], toolbox: {
series: this.dealSeriesData(series) ...that.elementInfo.option.toolbox,
feature: {
myFull: {
show: true,
icon: svg.enterFull,
onclick() {
const element = {...that.elementInfo}
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))
uni.navigateTo({
url: url
})
}
}
}
},
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{...that.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: that.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
}, },
......
components/NormalBar/NormalBar.vue
View file @ a7902e38
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
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'
import { svg } from '@/mixins/svg.js'
let chart = null let chart = null
export default { export default {
...@@ -34,23 +35,40 @@ ...@@ -34,23 +35,40 @@
devicePixelRatio: canvasDpr devicePixelRatio: canvasDpr
}) })
canvas.setChart(chart) canvas.setChart(chart)
const { categories, series } = this.elementData.dataList const { categories, series } = this.elementData.dataList
this.ec.option = { const that = this
...this.elementInfo.option, that.ec.option = {
...that.elementInfo.option,
xAxis: { xAxis: {
...this.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
tooltip: { tooltip: {
...this.elementInfo.option.tooltip, ...that.elementInfo.option.tooltip,
trigger: "axis" trigger: "axis"
}, },
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}], toolbox: {
series: this.dealSeriesData(series) ...that.elementInfo.option.toolbox,
feature: {
myFull: {
show: true,
icon: svg.enterFull,
onclick() {
const element = {...that.elementInfo}
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))
uni.navigateTo({
url: url
})
}
}
}
},
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{...that.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: that.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
}, },
......
components/NormalLine/NormalLine.vue
View file @ a7902e38
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
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'
import { svg } from '@/mixins/svg.js'
let chart = null let chart = null
export default { export default {
...@@ -33,26 +34,43 @@ ...@@ -33,26 +34,43 @@
devicePixelRatio: canvasDpr devicePixelRatio: canvasDpr
}) })
canvas.setChart(chart) canvas.setChart(chart)
const { categories = [], series = [] } = this.elementData.dataList const { categories = [], series = [] } = this.elementData.dataList
this.ec.option = { const that = this
...this.elementInfo.option, that.ec.option = {
...that.elementInfo.option,
color: ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff', color: ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
'#f0ad54', '#ffffff', '#000000' '#f0ad54', '#ffffff', '#000000'
], ],
xAxis: { xAxis: {
...this.elementInfo.option.xAxis, ...that.elementInfo.option.xAxis,
data: categories data: categories
}, },
tooltip: { tooltip: {
...this.elementInfo.option.tooltip, ...that.elementInfo.option.tooltip,
trigger: "axis" trigger: "axis"
}, },
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}], toolbox: {
series: this.dealSeriesData(series) ...that.elementInfo.option.toolbox,
feature: {
myFull: {
show: true,
icon: svg.enterFull,
onclick() {
const element = {...that.elementInfo}
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))
uni.navigateTo({
url: url
})
}
}
}
},
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{...that.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: that.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
}, },
......
mixins/svg.js 0 → 100644
View file @ a7902e38
export const svg = {
enterFull: "M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z",
exitFull: "M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z"
}
\ No newline at end of file
pages.json
View file @ a7902e38
...@@ -63,6 +63,16 @@ ...@@ -63,6 +63,16 @@
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
} }
,{
"path" : "pages/fullscreen/fullscreen",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"pageOrientation": "landscape"
}
}
], ],
"subpackages": [ "subpackages": [
...@@ -71,7 +81,8 @@ ...@@ -71,7 +81,8 @@
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "uView", "navigationBarTitleText": "uView",
"navigationBarBackgroundColor": "#F8F8F8", "navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8" "backgroundColor": "#F8F8F8",
"pageOrientation": "portrait"
}, },
"tabBar": { "tabBar": {
"color": "#333333", "color": "#333333",
......
pages/fullscreen/fullscreen.vue 0 → 100644
View file @ a7902e38
<template>
<view class="wrapper" :style="[theStyle]">
<template>
<!-- 普通柱状图 -->
<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
<!-- 普通折线图 -->
<NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine>
<!-- 横向柱状图 -->
<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
<!-- 折柱图 -->
<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
</template>
</view>
</template>
<script>
export default {
data() {
return {
element: {}
}
},
computed: {
theStyle() {
const { windowWidth, windowHeight } = uni.getSystemInfoSync()
return {
'height': `${windowHeight}px`,
'width': `${windowWidth}px`,
}
},
},
onLoad(option) {
this.element = JSON.parse(decodeURIComponent(option.element))
// 去掉全屏的定制按钮
const toolbox = {show: false}
this.element.option.toolbox = toolbox
},
}
</script>
<style>
.wrapper {
position: relative;
width: 100%;
user-select: none;
// overflow: auto;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>
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