Commit 678be71b authored by Jenny's avatar Jenny

feat: 地图混合柱状图 数据option

parent 8eb7e5b8
<template> <template>
<view> <view>
柱状图混合地图
<uni-ec-canvas <uni-ec-canvas
class="uni-ec-canvas" class="uni-ec-canvas"
id="bar-mix-map" id="bar-mix-map"
...@@ -25,7 +24,8 @@ ...@@ -25,7 +24,8 @@
return { return {
ec: { ec: {
lazyLoad:true lazyLoad:true
} },
changeTimer: null
} }
}, },
components: { components: {
...@@ -34,9 +34,134 @@ ...@@ -34,9 +34,134 @@
methods: { methods: {
initChart() { initChart() {
this.$nextTick(() => { this.$nextTick(() => {
clearInterval(this.changeTimer)
this.$refs['barMixMapCanvas'].init((canvas, width, height, canvasDpr) => {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
let options = this.setMapOption()
const { mapMixBarShow, mapMixBarChangeInterval} = this.elementInfo.option.mapMix
let flag = true
chart.setOption(options, true)
// 柱状图 地图 切换
if(mapMixBarShow && mapMixBarChangeInterval) {
clearInterval(this.changeTimer)
this.changeTimer = setInterval(() => {
options = flag ? this.setBarOption() : this.setMapOption()
flag = !flag
chart.setOption(options, true)
}, mapMixBarChangeInterval * 1000)
}
return chart
})
}) })
}, },
setBarOption() {
const { dataList: { series } } = this.elementData
let options = {
...this.elementInfo.option,
tooltip: {},
yAxis: {
...this.elementInfo.option.yAxis,
data: this.dealSeriesData(series).categories
},
series: {
id: 'associate',
type: 'bar',
...this.elementInfo.option.bar,
label: {
...this.elementInfo.option.dataset,
formatter: (val) => {
return this.$u.common.converFunction(this.elementInfo.option.dataset.formatter, val)
}
},
animationDurationUpdate: 1000,
universalTransition: true,
data: this.dealSeriesData(series).series
}
}
return options
},
setMapOption() {
const { dataList } = this.elementData
const seriesData = dataList.series || []
const series = []
for (let i = 0; i < seriesData.length; i++) {
const geoCoord = geoCoordMapList[seriesData[i].name]
if (geoCoord) {
series.push({
name: seriesData[i].name,
value: geoCoord.concat(seriesData[i].value)
})
}
}
const options = {
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)'
}
},
},
animationDurationUpdate: 1000,
series: [{
id: 'associate',
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75,
animationDurationUpdate: 1000,
universalTransition: true,
tooltip: {
show: false
},
data: series,
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
// zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
show: true,
position: 'right',
formatter: (value) => {
if(this.elementInfo.option.dataset.formatter) {
return this.$u.common.converFunction(this.elementInfo.option.dataset.formatter, value)
} else {
return this.elementInfo.option.dataset.show ? `${value.data.name}:${value.data.value[2]}` : value.data.name
}
},
fontSize: this.elementInfo.option.dataset.fontSize,
color: this.elementInfo.option.dataset.color,
fontWeight: this.elementInfo.option.dataset.fontWeight
},
symbolSize: 6,
itemStyle: {
color: '#a6c84c'
},
data: series,
}]
}
return options
},
/** /**
* 柱状图数据处理 * 柱状图数据处理
*/ */
......
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