Skip to content

E
ec-report-refactor
Commit 85dbd38b authored by Jenny_1007's avatar Jenny_1007
Browse files
Options

feat: detail 分包

parent 14afb33d
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 151 deletions
components/BarMixMap/BarMixMap.vue
View file @ 85dbd38b
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
data () { data () {
return { return {
ec: { ec: {
lazyLoad:true lazyLoad:true,
option: {}
}, },
changeTimer: null changeTimer: null
} }
...@@ -27,40 +28,42 @@ ...@@ -27,40 +28,42 @@
components: { components: {
uniEcCanvas uniEcCanvas
}, },
onHide() { beforeDestroy() {
clearInterval(this.changeTimer) clearInterval(this.changeTimer)
}, },
destroyed() {
clearInterval(this.changeTimer)
},
mounted() {
this.$refs['barMixMapCanvas'].init(this.inited)
},
methods: { methods: {
initChart() { inited(canvas, width, height, canvasDpr) {
const that = this chart = this.$echarts.init(canvas, null, {
that.$nextTick(() => { width: width,
clearInterval(that.changeTimer) height: height,
that.$refs['barMixMapCanvas'].init((canvas, width, height, canvasDpr) => { devicePixelRatio: canvasDpr
chart = that.$echarts.init(canvas, null, { })
width: width, canvas.setChart(chart)
height: height, this.ec.option = this.setMapOption()
devicePixelRatio: canvasDpr chart.setOption(this.ec.option, true)
}) chart.on('click', event => {
canvas.setChart(chart) this.handleEchartsClick(event)
let options = that.setMapOption()
const { mapMixBarShow, mapMixBarChangeInterval} = that.elementInfo.option.mapMix
let flag = true
chart.setOption(options, true)
chart.on('click', event => {
that.handleEchartsClick(event)
})
// 柱状图 地图 切换
if(mapMixBarShow && mapMixBarChangeInterval) {
clearInterval(that.changeTimer)
that.changeTimer = setInterval(() => {
options = flag ? that.setBarOption() : that.setMapOption()
flag = !flag
chart.setOption(options, true)
}, mapMixBarChangeInterval * 1000)
}
return chart
})
}) })
return chart
},
initChart() {
this.ec.option = this.setMapOption()
clearInterval(this.changeTimer)
const { mapMixBarShow, mapMixBarChangeInterval} = this.elementInfo.option.mapMix
let flag = true
// 柱状图 地图 切换
if(mapMixBarShow && mapMixBarChangeInterval) {
this.changeTimer = setInterval(() => {
this.ec.option = flag ? this.setBarOption() : this.setMapOption()
flag = !flag
}, mapMixBarChangeInterval * 1000)
}
}, },
setBarOption() { setBarOption() {
const { dataList: { series } } = this.elementData const { dataList: { series } } = this.elementData
......
components/ChinaMap/ChinaMap.vue
View file @ 85dbd38b
...@@ -19,125 +19,129 @@ ...@@ -19,125 +19,129 @@
data () { data () {
return { return {
ec: { ec: {
lazyLoad:true lazyLoad:true,
option: {}
} }
} }
}, },
components: { components: {
uniEcCanvas uniEcCanvas
}, },
mounted() {
this.$refs['chinaMapCanvas'].init(this.inited)
},
methods: { methods: {
inited(canvas, width, height, canvasDpr) {
chart = this.$echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const { dataList } = this.elementData
this.ec.option = {
title: {
...this.elementInfo.option.title
},
legend: {
...this.elementInfo.option.legend
},
geo: {
map: 'china',
zoom: 1.2,
roam: false,
itemStyle: {
areaColor: 'rgba(34, 70, 168, 0.7)',
borderColor: '#0692a4'
},
emphasis: {
itemStyle: {
areaColor: 'rgba(119, 139, 224, 0.548)'
}
}
},
series: this.dealSeriesData(dataList)
}
chart.setOption(this.ec.option)
chart.on('click', event => {
this.handleEchartsClick(event)
})
return chart
},
initChart() { initChart() {
const that = this const { dataList } = this.elementData
that.$nextTick(() => { this.$set(this.ec.option, 'series', this.dealSeriesData(dataList))
that.$refs['chinaMapCanvas'].init((canvas, width, height, canvasDpr) => { },
chart = that.$echarts.init(canvas, null, { dealSeriesData(dataList) {
width: width, const seriesData = dataList.chinaMapAreas || []
height: height, // 处理成地图所需的数据格式
devicePixelRatio: canvasDpr const finalData = [];
}) const mapHash = {}
canvas.setChart(chart) seriesData.map(item => {
const { dataList } = that.elementData if (!mapHash[item[0].name]) {
const seriesData = dataList.chinaMapAreas || [] finalData.push([item[0].name, []])
// 处理成地图所需的数据格式 mapHash[item[0].name] = true
const finalData = []; }
const mapHash = {} const index = finalData.map(child => child[0]).indexOf(item[0].name)
seriesData.map(item => { finalData[index][1].push(item)
if (!mapHash[item[0].name]) { })
finalData.push([item[0].name, []]) const color = ['#a6c84c', '#ffa022'] // 航线的颜色
mapHash[item[0].name] = true const series = []
finalData.forEach((item, i) => {
series.push({
name: item[0],
type: 'lines',
// zlevel: 1,
effect: {
show: true,
period: 4,
trailLength: 0.02,
symbolSize: 5 // 图标大小
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.8, // 尾迹线条透明度
curveness: 0.2
} }
const index = finalData.map(child => child[0]).indexOf(item[0].name) },
finalData[index][1].push(item) data: this.convertData(item[1])
}) }, {
const color = ['#a6c84c', '#ffa022'] // 航线的颜色 name: item[0],
const series = [] type: 'effectScatter',
finalData.forEach((item, i) => { coordinateSystem: 'geo',
series.push({ // zlevel: 2,
name: item[0], rippleEffect: {
type: 'lines', brushType: 'stroke'
// zlevel: 1, },
effect: { label: {
show: true, show: true,
period: 4, position: 'right',
trailLength: 0.02, formatter: value => {
// symbol: 'arrow', // 箭头图标 if(this.elementInfo.option.dataset.formatter) {
symbolSize: 5 // 图标大小 return this.$u.common.converFunction(this.elementInfo.option.dataset.formatter, value)
}, } else {
lineStyle: { return this.elementInfo.option.dataset.show ? `${value.data.name}:${value.data.value[2]}` : value.data.name
normal: {
color: color[i],
width: 1,
opacity: 0.8, // 尾迹线条透明度
curveness: 0.2
}
},
data: that.convertData(item[1])
}, {
name: item[0],
type: 'effectScatter',
coordinateSystem: 'geo',
// zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
show: true,
position: 'right',
formatter: value => {
if(that.elementInfo.option.dataset.formatter) {
return that.$u.common.converFunction(that.elementInfo.option.dataset.formatter, value)
} else {
return that.elementInfo.option.dataset.show ? `${value.data.name}:${value.data.value[2]}` : value.data.name
}
},
fontSize: that.elementInfo.option.dataset.fontSize,
color: that.elementInfo.option.dataset.color,
fontWeight: that.elementInfo.option.dataset.fontWeight
},
symbolSize: 4,
itemStyle: {
color: color[i]
},
data: item[1].map(dataItem => {
return {
name: dataItem[1].name,
value: geoCoordMapList[dataItem[1].name].concat([dataItem[1].value])
}
})
})
})
const options = {
title: {
...that.elementInfo.option.title
},
legend: {
...that.elementInfo.option.legend
},
geo: {
map: 'china',
zoom: 1.2,
roam: false,
itemStyle: {
areaColor: 'rgba(34, 70, 168, 0.7)',
borderColor: '#0692a4'
},
emphasis: {
itemStyle: {
areaColor: 'rgba(119, 139, 224, 0.548)'
}
} }
}, },
series: series fontSize: this.elementInfo.option.dataset.fontSize,
} color: this.elementInfo.option.dataset.color,
chart.setOption(options) fontWeight: this.elementInfo.option.dataset.fontWeight
chart.on('click', event => { },
that.handleEchartsClick(event) symbolSize: 4,
itemStyle: {
color: color[i]
},
data: item[1].map(dataItem => {
return {
name: dataItem[1].name,
value: geoCoordMapList[dataItem[1].name].concat([dataItem[1].value])
}
}) })
return chart
}) })
}) })
return series
}, },
convertData(data) { convertData(data) {
const res = [] const res = []
......
pages.json
View file @ 85dbd38b
...@@ -57,16 +57,23 @@ ...@@ -57,16 +57,23 @@
"onReachBottomDistance": 50 "onReachBottomDistance": 50
} }
},{ }
"path" : "pages/details/details",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": true
}
}
], ],
"subpackages": [
{
"root": "subPages",
"pages": [
{
"path" : "details/details",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": true
}
}
]
}
],
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"navigationBarTitleText": "uView", "navigationBarTitleText": "uView",
......
pages/reports/reports.vue
View file @ 85dbd38b
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
// 点击查看 // 点击查看
onClick(item) { onClick(item) {
const url = "/pages/details/details?id=" + item.id const url = "/subPages/details/details?id=" + item.id
uni.navigateTo({ uni.navigateTo({
url: url url: url
}) })
......
pages/details/details.vue → subPages/details/details.vue
View file @ 85dbd38b
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<template v-for="(element, index) in reportInfo.list"> <template v-for="(element, index) in reportInfo.list">
<view <view
class="view-element" class="view-element"
v-show="!element.hide" v-if="!element.hide"
:key="element.id" :key="element.id"
:style="{ :style="{
width: `${element.width * scale}px`, width: `${parseInt(element.width * scale)}px`,
height: `${element.height * scale}px`, height: `${parseInt(element.height * scale)}px`,
left: `${element.left * scale}px`, left: `${parseInt(element.left * scale)}px`,
top: `${element.top * scale}px`, top: `${parseInt(element.top * scale)}px`,
zIndex: index + 1 zIndex: index + 1
}" }"
> >
......
uni-ec-canvas/uni-ec-canvas.vue
View file @ 85dbd38b
...@@ -305,6 +305,8 @@ ...@@ -305,6 +305,8 @@
}, },
beforeDestroy() { beforeDestroy() {
this.$curChart.dispose() this.$curChart.dispose()
this.$curChart.clear()
this.$curChart = {}
} }
}; };
</script> </script>
......
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