首页地图

master
yujialong 3 years ago
parent 32f48aa7ca
commit b7e4c65c0e
  1. BIN
      src/assets/img/index/pro-bg8.png
  2. 1
      src/pages/index/list/chinaFull.json
  3. 93
      src/pages/index/list/index.vue

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

File diff suppressed because one or more lines are too long

@ -83,7 +83,7 @@
<img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
<img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
<img src="@/assets/img/index/pro-bg1-3.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
<el-carousel class="carousel" ref="carousel" height="338px" :autoplay="false" arrow="never">
<el-carousel class="carousel" ref="carousel" height="338px" autoplay :interval="5000" arrow="never">
<el-carousel-item>
<img src="@/assets/img/index/slide1.png" alt="">
</el-carousel-item>
@ -136,7 +136,7 @@
<img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
<img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
<img src="@/assets/img/index/pro-bg1-4.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
<el-carousel class="carousel" ref="carousel1" height="338px" :autoplay="false" arrow="never">
<el-carousel class="carousel" ref="carousel1" height="338px" autoplay :interval="5000" arrow="never">
<el-carousel-item>
<img src="@/assets/img/index/slide4.png" alt="">
</el-carousel-item>
@ -177,6 +177,7 @@
<h6 class="i-title">城市合伙人联盟</h6>
<p class="en">ALLIANCE MAP</p>
<p class="brief">共创共享共赢</p>
<div class="chart" id="map"></div>
</div>
</div>
<!-- 合作客户 -->
@ -262,6 +263,9 @@
import Setting from '@/setting'
import util from '@/libs/util'
import WOW from 'wow.js'
import * as echarts from 'echarts'
import 'echarts/map/js/china.js'
import chinaFull from './chinaFull.json'
export default {
name: 'index',
data() {
@ -272,6 +276,7 @@ export default {
},
mounted() {
new WOW().init()
this.initMap()
},
methods: {
//
@ -290,7 +295,84 @@ export default {
//
toQues() {
window.open('https://www.wjx.cn/vm/wB0RcMm.aspx')
},
//
initMap() {
echarts.registerMap('china', chinaFull)
const chart = echarts.init(document.querySelector(`#map`))
chart.setOption({
//
tooltip: {
show: false
},
grid: {
y: 200
},
visualMap: {
show: false,
},
// defaultCenter: [ 117.283042, 31.86119 ],
geo: {
map: 'china',
silent: false,
itemStyle: {
color: '#0D336F', //
borderColor: '#5D7AA5',//
borderWidth : 1
},
label:{
color: '#fff', //
show: false,
formatter: function(params) {
return params.name
},
rich: {
}
},
zoom : 1.1, //
roam: true, //
},
series: [
{
emphasis: {
show: false,
focus: 'item',
itemStyle:{
color: '#fff'
}
},
tooltip:{
show: false,
formatter: function(params) {
return params.name + " " + params.data.quantity
}
},
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: 15,
symbolRotate: 10,
label: {
show:true,
normal: {
formatter: function(params) {
return params.name
// return params.name + " " + params.data.quantity + params.data.unit
},
position: 'right',
show: true
}
},
data:[
{name:"武汉", value: [114.311582,30.598467], quantity: 55.5, unit: '吨'},
{name:"广州", value: [113.23333, 23.16667], quantity: 12.5, unit: '吨'},
{name:"深圳", value: [114.064552,22.548457], quantity: 13.4, unit: '吨'},
{name:"成都", value: [104.06667, 30.66667], quantity: 568.2, unit: '吨'},
{name:"合肥", value: [117.17,31.52], quantity: 876.2, unit: '吨'},
]
}
]
})
},
}
};
</script>
@ -514,7 +596,9 @@ export default {
}
}
.product {
background: #fff url(../../../assets/img/index/pro-bg1.png) (right 828px)/auto no-repeat;
background: url(../../../assets/img/index/pro-bg1.png) (right 828px)/auto no-repeat,
url(../../../assets/img/index/pro-bg8.png) (left bottom)/auto no-repeat;
background-color: #fff;
.list{
display: flex;
margin: 40px 0 80px;
@ -651,6 +735,9 @@ export default {
color: #465779;
}
}
.chart {
height: 500px;
}
.client-pic {
display: flex;
padding: 32px 55px 32px 32px;

Loading…
Cancel
Save