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
Show whitespace changes
Inline Side-by-side
Showing with 177 additions and 39 deletions
components/HorizontalBar/HorizontalBar.vue
View file @ a7902e38
......@@ -7,6 +7,7 @@
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
export default {
......@@ -40,21 +41,37 @@
series,
}
} = this.elementData
this.ec.option= {
...this.elementInfo.option,
const that = this
that.ec.option= {
...that.elementInfo.option,
yAxis: {
...this.elementInfo.option.yAxis,
...that.elementInfo.option.yAxis,
data: categories
},
tooltip: {
...this.elementInfo.option.tooltip,
...that.elementInfo.option.tooltip,
trigger: "axis"
},
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: this.dealSeriesData(series)
toolbox: {
...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
})
}
chart.setOption(this.ec.option)
const that = this
}
}
},
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
var urls = []
......
components/LineMixBar/LineMixBar.vue
View file @ a7902e38
......@@ -12,6 +12,7 @@
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
export default {
......@@ -40,31 +41,48 @@
})
canvas.setChart(chart)
const {categories, series} = this.elementData.dataList
this.ec.option = {
...this.elementInfo.option,
const that = this
that.ec.option = {
...that.elementInfo.option,
xAxis: {
...this.elementInfo.option.xAxis,
...that.elementInfo.option.xAxis,
data: categories
},
yAxis: [{
...this.elementInfo.option.yAxis,
...that.elementInfo.option.yAxis,
type: 'value'
},
{
...this.elementInfo.option.yAxis,
...that.elementInfo.option.yAxis,
type: 'value'
}
],
tooltip: {
...this.elementInfo.option.tooltip,
...that.elementInfo.option.tooltip,
trigger: "axis"
},
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: this.dealSeriesData(series)
toolbox: {
...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 => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
},
......
components/NormalBar/NormalBar.vue
View file @ a7902e38
......@@ -7,6 +7,7 @@
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
export default {
......@@ -35,22 +36,39 @@
})
canvas.setChart(chart)
const { categories, series } = this.elementData.dataList
this.ec.option = {
...this.elementInfo.option,
const that = this
that.ec.option = {
...that.elementInfo.option,
xAxis: {
...this.elementInfo.option.xAxis,
...that.elementInfo.option.xAxis,
data: categories
},
tooltip: {
...this.elementInfo.option.tooltip,
...that.elementInfo.option.tooltip,
trigger: "axis"
},
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: this.dealSeriesData(series)
toolbox: {
...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 => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
},
......
components/NormalLine/NormalLine.vue
View file @ a7902e38
......@@ -7,6 +7,7 @@
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
export default {
......@@ -34,25 +35,42 @@
})
canvas.setChart(chart)
const { categories = [], series = [] } = this.elementData.dataList
this.ec.option = {
...this.elementInfo.option,
const that = this
that.ec.option = {
...that.elementInfo.option,
color: ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
'#f0ad54', '#ffffff', '#000000'
],
xAxis: {
...this.elementInfo.option.xAxis,
...that.elementInfo.option.xAxis,
data: categories
},
tooltip: {
...this.elementInfo.option.tooltip,
...that.elementInfo.option.tooltip,
trigger: "axis"
},
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: this.dealSeriesData(series)
toolbox: {
...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 => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
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 @@
"enablePullDownRefresh": true
}
}
,{
"path" : "pages/fullscreen/fullscreen",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"pageOrientation": "landscape"
}
}
],
"subpackages": [
......@@ -71,7 +81,8 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uView",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
"backgroundColor": "#F8F8F8",
"pageOrientation": "portrait"
},
"tabBar": {
"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