Commit 875fd219 authored by 何鹏程's avatar 何鹏程

完成大屏样式

parent 492a0cf2
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<!-- 引入阿里云oss-sdk --> <!-- 引入阿里云oss-sdk -->
<!-- <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> --> <!-- <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> -->
<!-- 引入百度DuGIS --> <!-- 引入百度DuGIS -->
<!-- <script src="http://40.1.2.251:8219/bmapgl/"></script> --> <script src="http://40.1.2.251:8219/bmapgl/"></script>
</head> </head>
<body> <body>
......
This diff is collapsed.
<template> <template>
<div class="main"> <div class="main-map">
<div <div
class="chart" class="chart"
ref="chart" ref="chart"
> >
</div> </div>
<div class="bg">
</div>
<div class="tip">
<p class="name">{{selectData.name}}</p>
<div class="b">
<div class="l">
<p class="p1">项目总数</p>
<p class="p2">{{selectData.value}}</p>
</div>
<ul class="r">
<li>
<i class="xt"></i>
<span>胸痛</span>
<span class="num">{{selectData.val1}}</span>
</li>
<li>
<i class="cz"></i>
<span>卒中</span>
<span class="num">{{selectData.val2}}</span>
</li>
<li>
<i class="css"></i>
<span>创/烧伤</span>
<span class="num">{{selectData.value - selectData.val1 - selectData.val2}}</span>
</li>
</ul>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
let Echarts = require('echarts/lib/echarts'); let Echarts = require('echarts/lib/echarts');
let wuhan = require('@/assets/map/wuhan.json');
// let china = require('echarts/map/json/china');
export default { export default {
data() { data() {
return { return {
chart: null, chart: null,
list: [ dataList: [
{ value: 27594, name: '胸痛' }, { name: '江岸区', selected: true, value: 541, val1: 300, val2: 200 },
{ value: 18594, name: '卒中' }, { name: '江汉区', value: 416, val1: 200, val2: 100 },
{ value: 18594, name: '创/烧伤' }, { name: '硚口区', value: 280, val1: 200, val2: 10 },
{ value: 18594, name: '其他' } { name: '汉阳区', value: 971, val1: 200, val2: 100 },
{ name: '武昌区', value: 157, val1: 20, val2: 10 },
{ name: '青山区', value: 827, val1: 200, val2: 100 },
{ name: '洪山区', value: 844, val1: 200, val2: 100 },
{ name: '东西湖区', value: 850, val1: 200, val2: 100 },
{ name: '汉南区', value: 354, val1: 200, val2: 100 },
{ name: '蔡甸区', value: 431, val1: 200, val2: 100 },
{ name: '江夏区', value: 252, val1: 200, val2: 10 },
{ name: '黄陂区', value: 340, val1: 200, val2: 100 },
{ name: '新洲区', value: 752, val1: 200, val2: 100 }
], ],
total: 0 selectData: { name: '江岸区', value: 541, val1: 300, val2: 200 }
} }
}, },
mounted() { mounted() {
let count = 0
this.list.forEach(i => {
count += i.value
})
this.total = count
this.init() this.init()
}, },
methods: { methods: {
init() { init() {
Echarts.registerMap('wuhan', wuhan)
// Echarts.registerMap('china', china)
this.chart = Echarts.init(this.$refs.chart); this.chart = Echarts.init(this.$refs.chart);
let option = { let option = {
tooltip: { title: {
trigger: 'item' text: '武汉市地图',
}, textStyle: {
legend: { color: '#386FFF',
orient: 'vertical', fontSize: 40,
left: '50%',
top: 'middle',
itemGap: 72,
itemWidth: 24,
itemHeight: 24,
formatter: (name) => {
const item = this.list.find(i => i.name = name)
const per = parseInt(item.value / this.total * 100)
return '{a|' + name + '}{b|' + per + '%}{x|' + item.value + '人}'
}, },
right: '90px',
bottom: '109px'
},
// tooltip: {
// trigger: 'item',
// formatter: '{b}<br/>{c} (p / km2)'
// },
visualMap: {
type: 'piecewise',
min: 100,
max: 1000,
left: 138,
bottom: 108,
pieces: [
{ gt: 820, lte: 1000, label: '', color: '#386FFF' },
{ gt: 640, lte: 820, label: ' ', color: '#3361DE' },
{ gt: 460, lte: 640, label: ' ', color: '#2B52BD' },
{ gt: 280, lte: 460, label: ' ', color: '#24449C' },
{ gt: 100, lte: 280, label: '', color: '#1A347A' }
],
itemWidth: 44,
itemHeight: 27,
itemGap: 24,
itemSymbol: 'rect',
// realtime: false,
// calculable: true,
textStyle: { textStyle: {
padding: [0, 20, 0, 0], color: '#386FFF',
rich: { fontSize: 29,
a: { },
color: 'rgba(255, 255, 255, 0.6)', inRange: {
fontSize: 40, symbol: [],
width: 180, color: ['#1A347A', '#24449C', '#2B52BD', '#3361DE', '#386FFF']
padding: [0, 0, 0, 10]
},
b: {
color: '#FFFFFF',
fontSize: 40,
width: 120
},
x: {
color: '#FFFFFF',
fontSize: 40,
width: 200
},
}
} }
}, },
color: ['#FF3178', '#00C9FF', '#FFA400', '#7A52FF'],
series: [ series: [
{ {
name: '访问来源', name: '武汉市地图',
type: 'pie', type: 'map',
clockwise: false, selectedMode: 'single',
radius: ['60%', '85%'], mapType: 'wuhan', // 自定义扩展图表类型
avoidLabelOverlap: false, // label: {
label: { // show: true
show: false, // },
position: 'center' // zoom: 1.2,
},
center: ['25%', '50%'],
labelLine: {
show: false
},
data: this.list,
emphasis: { emphasis: {
label: {
show: false
},
itemStyle: { itemStyle: {
shadowBlur: 10, areaColor: '#00FFFC',
shadowOffsetX: 0, backgroundColor: '#00FFFC',
shadowColor: 'rgba(0, 0, 0, 0.5)' },
} },
} itemStyle: {
borderWidth: 2,
borderColor: '#000D4A'
},
top: 115,
bottom: 325,
data: this.dataList
} }
] ]
}; }
this.chart.setOption(option); this.chart.setOption(option);
this.chart.on('click', (params) => {
this.selectData = params.data
});
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main-map {
// margin: 100px 0 0;
height: calc(100% - 266px);
position: relative; position: relative;
margin: 132px 60px;
.chart { .chart {
width: 100%; width: 100%;
height: 500px; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
z-index: 998;
} }
.total { .bg {
width: 1130px;
height: 381px;
bottom: 139px;
position: absolute; position: absolute;
top: 183px; margin: 0 auto;
left: 157px; left: 0;
text-align: center; right: 0;
z-index: 9999; background: url("../../../assets/images/quan.png");
span { background-size: 100%;
height: 40px; z-index: 997;
font-size: 40px; }
color: rgba(255, 255, 255, 0.6); .tip {
} position: absolute;
p { width: 520px;
height: 48px; height: 382px;
background: #00fffc;
box-shadow: 12px 12px 48px 0px rgba(0, 255, 252, 0.5),
0px 0px 64px 0px #00b3ff;
border-radius: 24px;
border: 4px solid #00fffc;
bottom: 350px;
right: 240px;
z-index: 999;
.name {
padding: 48px 49px 37px;
height: 60px;
font-size: 56px; font-size: 56px;
color: #ffffff; font-weight: bold;
line-height: 48px; color: #000000;
margin-top: 20px; line-height: 60px;
}
.b {
height: 189px;
}
.l,
.r {
float: left;
height: 100%;
}
.l {
box-sizing: border-box;
border-right: 2px solid rgba(0, 0, 0, 0.38);
padding-top: 36px;
text-align: center;
width: 40%;
.p1 {
font-size: 32px;
color: rgba(0, 0, 0, 0.6);
}
.p2 {
font-size: 72px;
color: #000000;
margin-top: 16px;
}
}
.r {
width: 60%;
li {
height: 63px;
line-height: 63px;
font-size: 36px;
color: #000000;
i {
display: inline-block;
width: 12px;
height: 12px;
vertical-align: middle;
border: 2px solid #ffffff;
margin: auto 16px auto 33px;
border-radius: 50%;
&.xt {
background: #ff3178;
}
&.cz {
background: #316aff;
}
&.css {
background: #ff8931;
}
}
span:nth-child(2) {
display: inline-block;
width: 130px;
}
.num {
font-weight: bold;
}
}
} }
} }
} }
......
...@@ -325,7 +325,7 @@ export default { ...@@ -325,7 +325,7 @@ export default {
return { return {
dialogVisible: false, dialogVisible: false,
loading: false, loading: false,
uploadUrl: '/api/team/car/uploadEmergencyImage', uploadUrl: (process.env.NODE_ENV === 'production' ? process.env.BASE_API : '') + '/api/team/car/uploadEmergencyImage',
formDisabled: false, formDisabled: false,
dataForm: { dataForm: {
vehicleUsingUnit: '', vehicleUsingUnit: '',
......
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