mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-10 02:16:44 +08:00
【金掌桂2022年开门红需求】获取数据截止时间和横屏后开门红业务地图字体变大问题，调整业务地图图例、logo、开门红图标位置及大小
This commit is contained in:
liyuetong
@@ -54,3 +54,11 @@ export function makePosters(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
// 业务地图获取数据
|
||||
export function getMapDataList(data) {
|
||||
return request({
|
||||
url: getUrl('/data/performance/getMapDataList', 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
BIN
src/assets/images/goodStart/logo.png
Normal file
BIN
src/assets/images/goodStart/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/goodStart/tubiao.png
Normal file
BIN
src/assets/images/goodStart/tubiao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
src/assets/images/goodStart/tuli.png
Normal file
BIN
src/assets/images/goodStart/tuli.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -1,36 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="relative">
|
||||
<div class="china-map" id="guangxi"></div>
|
||||
<img class="absolute top5 left15 m-logo" src="@/assets/images/goodStart/logo.png" alt="" />
|
||||
<img class="absolute bottom25 left10 m-tuli" src="@/assets/images/goodStart/tuli.png" alt="" />
|
||||
<div class="absolute bottom5 left10 m-time">
|
||||
<p class="fwb minfs" style="color: #c01212">开门红业务地图</p>
|
||||
<p class="minfs01" style="color: #333">数据截止时间：{{ date }}</p>
|
||||
</div>
|
||||
<img class="absolute bottom5 right10 m-tubiao" src="@/assets/images/goodStart/tubiao.png" alt="" />
|
||||
</div>
|
||||
</template>
|
||||
<!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
|
||||
<!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.rate.js"></script>
|
||||
<script src="js/map/js/province/guangxi.js"></script> -->
|
||||
<script>
|
||||
import { Tab, Tabs, Collapse, CollapseItem, Checkbox, CheckboxGroup, Dialog, Popup } from 'vant'
|
||||
import { getMapDataList } from '@/api/ebiz/goodStart'
|
||||
import utils from '@/assets/js/utils/date-utils'
|
||||
|
||||
export default {
|
||||
name: 'list',
|
||||
components: {
|
||||
[Tab.name]: Tab,
|
||||
[Tabs.name]: Tabs,
|
||||
[Collapse.name]: Collapse,
|
||||
[CollapseItem.name]: CollapseItem,
|
||||
[Dialog.name]: Dialog,
|
||||
[Checkbox.name]: Checkbox,
|
||||
[CheckboxGroup.name]: CheckboxGroup,
|
||||
[Popup.name]: Popup
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
date: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
async init() {
|
||||
this.date = utils.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
|
||||
const result = await getMapDataList({})
|
||||
if (result.result === '0') {
|
||||
let data = result.content
|
||||
data.forEach((item) => {
|
||||
item.value = item.rate
|
||||
})
|
||||
this.showMapFunc(data)
|
||||
} else {
|
||||
this.$toast(result.resultMessage)
|
||||
}
|
||||
},
|
||||
showMapFunc(data) {
|
||||
let Echart = window.echarts.init(document.querySelector(`#guangxi`))
|
||||
let option = {
|
||||
backgroundColor: '#FFFFFF',
|
||||
let option = {
|
||||
backgroundColor: '#FFECC3',
|
||||
title: {
|
||||
text: '',
|
||||
subtext: '',
|
||||
@@ -38,57 +52,92 @@ export default {
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}<br/>{c} (p / km2)'
|
||||
// 利用formatter来自定义tooltip展示的数据
|
||||
formatter: function (params) {
|
||||
var myseries = option.series[0]
|
||||
var res = ''
|
||||
for (var i = 0; i < myseries.data.length; i++) {
|
||||
if (myseries.data[i].name == params.name) {
|
||||
res += myseries.data[i].comName + '</br>'
|
||||
res += '预收标保' + ' : ' + myseries.data[i].sum + '万元</br>'
|
||||
res += '目标达成率' + ' : ' + myseries.data[i].rate + '%</br>'
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
},
|
||||
//左侧小导航图标 0-25 26-50 51-75 76-100
|
||||
visualMap: {
|
||||
rate: 0,
|
||||
max: 100,
|
||||
text: ['高', '低'],
|
||||
show: false,
|
||||
pieces: [
|
||||
// pieces 可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于)
|
||||
{ gte: 0, lte: 25, color: '#FFBDBD' },
|
||||
{ gte: 26, lte: 50, color: '#FF7B7B' },
|
||||
{ gte: 51, lte: 75, color: '#F75252' },
|
||||
{ gte: 76, lte: 100, color: '#EE2020' }
|
||||
]
|
||||
// inRange: {
|
||||
// color: ['lightskyblue', 'yellow', 'orange','red']
|
||||
// }
|
||||
},
|
||||
// //左侧小导航图标
|
||||
// visualMap: {
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
// text: ['高', '低'],
|
||||
// inRange: {
|
||||
// color: ['lightskyblue', 'yellow', 'orangered']
|
||||
// }
|
||||
// },
|
||||
//配置属性
|
||||
series: [
|
||||
{
|
||||
name: '报名人数',
|
||||
type: 'map',
|
||||
zoom: 1.2, //设置地图大小，这里是关键，一定要放在 series中
|
||||
roam: 'scale', //支持拖拽缩放,设置为false,开启为true,缩放 roam设置为'scale'，拖拽roam设置为'move'
|
||||
scaleLimit: {
|
||||
//滚轮缩放的极限控制
|
||||
min: 1, //缩放最小大小
|
||||
max: 6 //缩放最大大小
|
||||
},
|
||||
mapType: '广西', //需要注意：省份中应使用汉字即如 ‘mapType:"广西"’
|
||||
roam: true,
|
||||
label: {
|
||||
//文本设置（Echarts其他图表都有这样的设置，值得多看）
|
||||
normal: {
|
||||
show: true,//显示市区标签
|
||||
textStyle:{color:"#c71585"}//省份标签字体颜色
|
||||
show: true, //显示市区标签
|
||||
textStyle: { color: '#c71585' } //省份标签字体颜色
|
||||
},
|
||||
emphasis: {//对应的鼠标悬浮效果
|
||||
show: true,
|
||||
textStyle:{color:"#800080"}
|
||||
emphasis: {
|
||||
//对应的鼠标悬浮效果
|
||||
show: true,
|
||||
textStyle: { color: '#800080' }
|
||||
}
|
||||
},
|
||||
itemStyle:{
|
||||
normal: {
|
||||
borderWidth: .5,//区域边框宽度
|
||||
borderColor: '#009fe8',//区域边框颜色
|
||||
areaColor:"#ffefd5",//区域颜色
|
||||
},
|
||||
emphasis: {
|
||||
show:true,
|
||||
borderWidth: .5,
|
||||
borderColor: '#4b0082',
|
||||
areaColor:"#f47920",
|
||||
}
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 0.5, //区域边框宽度
|
||||
borderColor: '#009fe8', //区域边框颜色
|
||||
areaColor: '#ffefd5' //区域颜色
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
borderWidth: 0.5,
|
||||
borderColor: '#4b0082',
|
||||
areaColor: '#FFC93B' //选中区域块颜色
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ name: '南宁市', value: '100' },
|
||||
{ name: '百色市', value: Math.round(Math.random() * 100) }
|
||||
] //数据
|
||||
data: data //数据
|
||||
// data: [
|
||||
// { name: '南宁市', comName: '南寧分公司', sum: '1', rate: '2', value: 0 },
|
||||
// { name: '玉林市', comName: '南寧分公司', sum: '1', rate: '2', value: 25 },
|
||||
// { name: '桂林市', comName: '南寧分公司', sum: '1', rate: '2', value: 26 },
|
||||
// { name: '柳州市', comName: '南寧分公司', sum: '1', rate: '2', value: 50 },
|
||||
// { name: '河池市', comName: '南寧分公司', sum: '1', rate: '2', value: 51 },
|
||||
// { name: '贺州市', comName: '南寧分公司', sum: '1', rate: '2', value: 75 },
|
||||
// { name: '梧州市', comName: '南寧分公司', sum: '1', rate: '2', value: 76 },
|
||||
// { name: '百色市', comName: '南寧分公司', sum: '1', rate: '2', value: 100 }
|
||||
// ]
|
||||
}
|
||||
]
|
||||
}
|
||||
// 加载绘制Echarts图形
|
||||
Echart.setOption(option)
|
||||
window.addEventListener('resize', function() {
|
||||
window.addEventListener('resize', function () {
|
||||
Echart.resize() //不加会出现高度为0
|
||||
})
|
||||
}
|
||||
@@ -96,8 +145,26 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.china-map {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
.china-map {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
.m-logo {
|
||||
width: 40px;
|
||||
height: 15px;
|
||||
}
|
||||
.m-tuli {
|
||||
width: 48px;
|
||||
height: 36px;
|
||||
}
|
||||
.m-tubiao {
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
}
|
||||
.minfs {
|
||||
font-size: 1.6vw !important;
|
||||
}
|
||||
.minfs01 {
|
||||
font-size: 1.4vw !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user