组件代码：
<template>
<div class="mapChina">
<div id="mapEcharts"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import chinamap from '../assets/json/china.json'
import 'echarts-gl'
import bdImg from '../assets/img/dianwei.png'
/* eslint-disable */
export default {
name: 'mapChina',
props: {
title: String,
mapChinaList: Array,
},
data() {
return {
myChart: '',
tooltips: '',
alirl: [],
l: [],
address: []
}
},
mounted() {
setTimeout(() => {
this.echartsInit()
}, 400)
},
watch: {
mapChinaList() {
this.echartsInit()
},
},
methods: {
convertData() {
var res = []
if (this.mapChinaList.length > 0) {
this.address = []
this.mapChinaList.forEach(e => {
this.address.push({
name: e.companyName,
person: e.person,
contact: e.contact,
purchaseNum: e.purchaseNum,
jing: [e.lon, e.lat]
})
// [1,2]
res.push({ coords: [[Number(e.lon), Number(e.lat)], [Number(e.lon), Number(e.lat)]], lineStyle: { color: '#d5b314' } })
// res.push({ coords: [[Number(e.lon), Number(e.lat)]], lineStyle: { color: '#d5b314' } })
})
console.log('🚀 ~ convertData ~ res:', res)
console.log('🚀 ~ convertData ~ address:', this.address)
}
return res
},
convertData1() {
var res = []
if (this.mapChinaList.length > 0) {
this.mapChinaList.forEach(e => {
// {value: [118.8062, 31.9208],itemStyle:{color:'#4ab2e5'}}
// , {value: [127.9688, 45.368],itemStyle:{color:'#4fb6d2'}}
res.push({
value: [Number(e.lon), Number(e.lat)],
itemStyle: { color: '#b9be23' },
companyName: e.companyName,
person: e.person,
contact: e.contact,
purchaseNum: e.purchaseNum,
})
})
console.log('🚀 ~', res)
}
return res
},
echartsInit() {
var myChart = echarts.init(document.getElementById('mapEcharts'))
echarts.registerMap('china', chinamap) //用导入的json文件注册一个name:china的var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json";
// var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
myChart.showLoading();
let index = -1;
myChart.hideLoading();
var option = {
backgroundColor: 'transparent',
/* title: {
top: 20,
text: '“困难人数” - 杭州市',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},*/
// grid: {},
tooltip: {
triggerOn: 'click',
trigger: 'item',
padding: [0, 0], // 设置内边距，例如 [5, 10] 分别表示上下和左右的内边距
formatter: function (params) {
console.log(params)
// return '公司名称：' + params.data.companyName + ' 负责人: ' + params.data.person + ' 联系方式: ' + params.data.contact;
// var tooltipHtml = '';
// tooltipHtml += '<strong>公司名称：' + params.data.companyName + '</strong>';
// tooltipHtml += '<br/>';
// tooltipHtml += '负责人: ' + params.data.person;
// tooltipHtml += '<br/>';
// tooltipHtml += '联系电话: ' + params.data.contact;
// return tooltipHtml
const bgUrl = require('../assets/img/biaozhu.png')
var str = `<div style = "background: url(${bgUrl});background-size: 100% 100%;height:200px;width:300px;color:#FFFFFF;margin:0;padding:0;">
<div style="font-weight: 500;font-size: 14px;color: #FFFFFF;box-sizing:border-box;width: 100%;height: 24px;line-height:24px;text-align:left;padding: 1px 5px; border: 1px solid #39A0EB;border-left:none;border-right:none;text-align:center">
${params.data.companyName}
</div>
<div style="width:100%;padding:7px;box-sizing:border-box;text-align:left">
<div style="font-weight: 500;font-size: 12px;color: #FFFFFF;height:16px;padding-left:18px;margin-bottom:10px">负责人:${params.data.person}</div>
<div style="width:100%;padding:7px;box-sizing:border-box;text-align:left">
<div style="font-weight: 500;font-size: 12px;color: #FFFFFF;height:16px;padding-left:18px;margin-bottom:10px">采购量:${params.data.purchaseNum}</div>
<div style="box-sizing:border-box;overflow:hidden;width:270px;word-wrap:break-word;padding-left:18px;font-weight: 500;font-size: 12px;color: rgba(255,255,255,0.72);">联系电话:${(params.data.contact)
}</div>
</div>
</div>`
return str
}
},
geo: {
map: 'china',
layoutCenter: ['50%', '70%'],//位置
layoutSize: '140%',//大小
aspectScale: 0.75, //长宽比
zoom: 1,
roam: false,
itemStyle: {
normal: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
// color: '#09132c' // 0% 处的颜色
color: '#09132c' // 0% 处的颜色
}, {
offset: 1,
color: '#274d68' // 100% 处的颜色
}],
globalCoord: true // 缺省为 false
},
shadowColor: 'rgb(58,115,192)',
shadowOffsetX: 10,
shadowOffsetY: 11
},
emphasis: {
areaColor: '#4086e9',
borderWidth: 0,
color: 'green',
label: {
show: false
}
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)',
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
}
}
},
}],
},
series: [{
type: 'map',
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: '#1DE9B6'
}
},
emphasis: {
textStyle: {
color: 'rgb(183,185,14)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgb(147, 235, 248)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: '#09132c' // 0% 处的颜色
}, {
offset: 1,
color: '#274d68' // 100% 处的颜色
}],
globalCoord: true // 缺省为 false
},
},
emphasis: {
areaColor: 'rgb(46,229,206)',
// shadowColor: 'rgb(12,25,50)',
borderWidth: 0.1
}
},
zoom: 1,
layoutCenter: ['50%', '70%'],//位置
layoutSize: '140%',//大小
map: 'china' //使用
// data: this.difficultData //热力图数据 不同区域 不同的底色
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel: 4,
rippleEffect: {
period: 15,
scale: 4,
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
offset: [15, 0],
color: '#1DE9B6',
show: true
},
},
itemStyle: {
normal: {
// width: '70px',
color: '#1DE9B6',
shadowBlur: 10,
shadowColor: '#333'
}
},
symbolSize: 12,
data: this.convertData1()
}
]
};
myChart.setOption(option, true);
},
},
}
</script>
<style scoped lang="less">
#mapEcharts {
width: 100%;
height: 100%;
}
.mapChina {
width: 100%;
height: 100%;
// background-color: transparent;
// background: pink;
}
::v-deep .echarts-tooltip {
padding: 0 !important;
/* 去除默认的 padding */
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* 添加阴影效果 */
background-color: rgba(255, 255, 255, 0.9);
/* 背景颜色及透明度 */
color: #333;
/* 文字颜色 */
font-size: 12px;
/* 字体大小 */
}
</style>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
