第一步: 先获取相关地图json文件,可以通过DataV.GeoAtlas地理小工具系列下载相关geoJson文件,对这些文件做好管理,如下getMap.js
javascript
import anyang from '@/assets/map/json/anyang.json'
import hebi from '@/assets/map/json/hebi.json'
import henan from '@/assets/map/json/henan.json'
import jiaozuo from '@/assets/map/json/jiaozuo.json'
import jiyuan from '@/assets/map/json/jiyuan.json'
import kaifeng from '@/assets/map/json/kaifeng.json'
import luohe from '@/assets/map/json/luohe.json'
import luoyang from '@/assets/map/json/luoyang.json'
import nanyang from '@/assets/map/json/nanyang.json'
import pingdingshan from '@/assets/map/json/pingdingshan.json'
import puyang from '@/assets/map/json/puyang.json'
import sanmenxia from '@/assets/map/json/sanmenxia.json'
import shangqiu from '@/assets/map/json/shangqiu.json'
import xinxiang from '@/assets/map/json/xinxiang.json'
import xinyang from '@/assets/map/json/xinyang.json'
import xuchang from '@/assets/map/json/xuchang.json'
import zhengzhou from '@/assets/map/json/zhengzhou.json'
import zhoukou from '@/assets/map/json/zhoukou.json'
import zhumadian from '@/assets/map/json/zhumadian.json'
const mapDict = {
'周口市':'zhoukou',
'漯河市':'luohe',
'商丘市':'shangqiu',
'许昌市':'xuchang',
'洛阳市':'luoyang',
'濮阳市':'puyang',
'焦作市':'jiaozuo',
'南阳市':'nanyang',
'平顶山市':'pingdingshan',
'新乡市':'xinxiang',
'开封市':'kaifeng',
'驻马店市':'zhumadian',
'郑州市':'zhengzhou',
'安阳市':'anyang',
'鹤壁市':'hebi',
'三门峡市':'sanmenxia',
'信阳市':'xinyang',
'济源市':'jiyuan',
}
const mapData = {
henan,
zhoukou,
luohe,
shangqiu,
xuchang,
luoyang,
puyang,
jiaozuo,
nanyang,
pingdingshan,
xinxiang,
kaifeng,
zhumadian,
zhengzhou,
anyang,
hebi,
sanmenxia,
xinyang,
jiyuan,
}
export function getMap(mapName) {
const cityName = mapDict[mapName]
// console.log(cityName);
if(cityName){
// console.log('1111',cityName, mapData[cityName]);
return [cityName, mapData[cityName]]
}
// if(!mapName){
// return ['henan', henan]
// }
return ['henan', henan]
}
**第二步:**导入到地图组件使用,通过下拉框或者点击地图获取name实现json切换
**第三步:**平面3D效果使用多个geo图层堆叠layoutCenter平移,下钻切换地图时记得注册地图registerMap
**第四步:**自定义toolTip比较简单,这里相关背景图使用import导入,关键点是自定义position位置(不自定义会出现安阳定在濮阳的情况),获取地图json中的centorid的坐标(这里的坐标自己可以直接修改位置),通过convertToPixel将地理坐标转换为屏幕坐标,相当好用
**第五步:**自定义立体图层,直接参考代码吧,网上也找过相关的参考,他们的实现方式是主体柱形部分采用左右多层次渐变的方式,要求上下渐变就不太合适。现在我这里这部分是公司里十年前端大佬手撸的,放心使用
**第六步:**地图emphsis鼠标移入使geo与series多图层联动触发,使用了鼠标移入移出事件,相关dispatchAction配置项在echarts官网查看
下方完整组件代码:
html
<template>
<div class="home">
<el-select style="width: 164px;" v-model="myCity" size="large" class="mySelect"
@change="changeOption" :teleported="false">
<el-option v-for="item in Object.keys(selOption)" :key="item" :value="item" :label="item">
<div class="myselectItem">
<span>{{ item }}</span>
<img src="../../../assets/imgs/zhzf/itenDing.png" alt=""/>
</div>
</el-option>
</el-select>
<div class="weather">
<div class="weatherItem br"><img src="../../../assets/imgs/zhzf/qing.png" alt=""/>晴</div>
<div class="weatherItem br"><img src="../../../assets/imgs/zhzf/wen.png" alt=""/>17℃</div>
<div class="weatherItem"><img src="../../../assets/imgs/zhzf/shi.png" alt=""/>18%</div>
</div>
<div class="echarts_map" id="main" style="height: 700px;">
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import imgBt from "@/assets/imgs/zhzf/tooltipBt.png";
import imgTooltip from "@/assets/imgs/zhzf/tooltipBorder.png";
import imgItem from "@/assets/imgs/zhzf/tooltipItem.png";
import {getMap} from "./hnMap";
import {mapData} from "@/api/zhzf/index1"
export default {
data() {
return {
myCity: '河南省',
charts: null,
params: null,
selOption: {
'河南省': [113.83531246, 34.0267395887],
'三门峡市': [111.181262093, 34.7833199411],
'信阳市': [114.085490993, 32.1285823075],
'南阳市': [112.542841901, 33.0114195691],
'周口市': [114.654101942, 33.6237408181],
'商丘市': [115.641885688, 34.4385886402],
'安阳市': [114.351806508, 36.1102667222],
'平顶山市': [113.300848978, 33.7453014565],
'开封市': [114.351642118, 34.8018541758],
'新乡市': [113.912690161, 35.3072575577],
'洛阳市': [112.147524769, 34.2873678177],
'漯河市': [114.0460614, 33.5762786885],
'濮阳市': [115.026627441, 35.7532978882],
'焦作市': [113.211835885, 35.234607555],
'许昌市': [113.83531246, 34.0267395887],
'郑州市': [113.64964385, 34.7566100641],
'驻马店市': [114.049153547, 32.9831581541],
'鹤壁市': [114.297769838, 35.7554258742],
},
stationSurvey: [],
mapData: []
}
},
async mounted() {
this.mapData = await mapData()
this.$nextTick(() => {
this.initCharts();
})
},
methods: {
changeOption() {
const [mapName, mapJson] = getMap(this.myCity);
this.go(mapName, mapJson)
this.$emit('changeCity', this.myCity)
},
initCharts() {
const [mapName, mapJson] = getMap();
this.go(mapName, mapJson)
},
go(mapName, mapJson) {
let geoCoordMap = {}
let leftDataLs = [];
let customerBatteryCityData = []
mapJson.features.forEach(item => {
let key = item.properties.name
let value = item.properties.centroid
geoCoordMap[key] = value
if (mapName == 'henan') {
this.mapData.forEach(cityItem => {
if (item.properties.name == cityItem.city) {
let obj = {
name: item.properties.name,
value: cityItem.warnNum, jrl: cityItem.accessRate, gjs: cityItem.warnNum,
xy: item.properties.centroid
}
customerBatteryCityData.push(obj)
}
})
} else {
this.mapData.forEach(cityItem => {
if (this.myCity == cityItem.city) {
if(cityItem.childList.some(ite=>ite.county==item.properties.name||ite.county+'区'==item.properties.name||ite.county+'县'==item.properties.name)){
cityItem.childList.forEach(countryItem => {
if (countryItem.county==item.properties.name||countryItem.county+'区'==item.properties.name||countryItem.county+'县'==item.properties.name) {
let obj = {
name: item.properties.name,
value: countryItem.warnNum,
jrl: countryItem.accessRate,
gjs: countryItem.warnNum,
xy: item.properties.centroid
}
customerBatteryCityData.push(obj)
}
})
}else{
//空数据补完
let obj = {
name: item.properties.name,
value: '0',
jrl: '0%',
gjs: '0',
xy: item.properties.centroid
}
customerBatteryCityData.push(obj)
}
}
})
}
//手动模拟数据
})
let lineDataLs = lineData();
echarts.registerMap(mapName, mapJson);
this.charts = echarts.init(document.getElementById('main'));
let option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
showDelay: 0, //浮层显示的延迟
transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
enterable: false,
borderWidth: 0,
shadowBlur: 0,
shadowColor: '#00000000',
position: (point, params) => {
//转换为屏幕坐标,自定义tooltip位置,'inside'时位置不可自定义改变,可以自定义修改mapJson的centroid
let cord = this.charts.convertToPixel({seriesIndex: params.seriesIndex}, params.data.xy||params.data[2].xy)
return [cord[0] - 100, cord[1] - 100]
},
formatter: function (params) {
var tipHtml = '';
if (params.componentSubType == 'map') {
tipHtml = `<div style="font-size: 12px;height: 180px;line-height: 28px;border-radius: 3px;color:#fff;font-family: DIN-B;background: url(${imgBt}) no-repeat center bottom;position: relative;top: -50px;pointer-events: none">`
+ '<div style="width: 170px;height: 28px;border-top:1px solid #ff6a0055;padding-left: 10px;background-color: #5c626677;backdrop-filter: blur(5px)">' + params.data.name + '</div>'
+ `<div style="width: 169px;height: 87px;padding: 10px ;backdrop-filter: blur(3px);background: #00000066 url(${imgTooltip}) no-repeat center center;background-size: 100% 100%"><div style="display: flex;align-items: center;width: 100%">` + `<img src="${imgItem}" />` + '接入率 ' + '<span style="font-size:24px;color:#FFFFFF">' + params.data.jrl + '</span>' + ' </div>'
+ '<div style="display: flex;align-items: center;width: 100%">' + `<img src="${imgItem}" />` + '今日告警总数 ' + '<span style="font-size:24px;color:#FFFFFF">' + params.data.gjs + '</span>' + ' </div></div></div>'
} else {
tipHtml = `<div style="font-size: 12px;height: 200px;line-height: 28px;border-radius: 3px;color:#fff;font-family: DIN-B;background: url(${imgBt}) no-repeat center bottom">`
+ '<div style="width: 170px;height: 28px;border-top:1px solid #ff6a0055;padding-left: 10px;background-color: #5c626677;backdrop-filter: blur(5px)">' + params.data[2].name + '</div>'
+ `<div style="width: 169px;height: 87px;padding: 10px ;background: #00000066 url(${imgTooltip}) no-repeat center center;background-size: 100% 100%;backdrop-filter: blur(3px);border:1px solid #ff6a00;"><div style="display: flex;align-items: center">` + `<img src="${imgItem}" />` + '接入率 ' + '<span style="font-size:24px;color:#FFFFFF">' + params.data[2].jrl + '</span>' + ' </div>'
+ '<div style="display: flex;align-items: center">' + `<img src="${imgItem}" />` + '今日告警总数 ' + '<span style="font-size:24px;color:#FFFFFF">' + params.data[2].gjs + '</span>' + ' </div></div></div>'
}
return tipHtml;
},
backgroundColor: "transparent"
},
geo: [
{
map: mapName,
aspectScale: 1.1,
roam: false, // 是否允许缩放
zoom: 1.2, // 默认显示级别
layoutSize: '95%',
layoutCenter: ['50%', '55%'],
// label: {
// show: true,
// color: '#FFFFFF'
// },
itemStyle: {
normal: {
areaColor: {
type: 'linear-gradient',
x: 0,
y: 500,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: '#0c4863' // 0% 处的颜色
},
{
offset: 0.4,
color: '#09203eee' // 0% 处的颜色
}, {
offset: 1,
color: '#09132aee' // 50% 处的颜色
}],
global: true // 缺省为 false
},
borderColor: '#02d0d9',
borderWidth: 1
},
emphasis: {
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: '#00b1c9aa' // 0% 处的颜色
}, {
offset: 1,
color: '#003d86aa' // 50% 处的颜色
}],
global: false // 缺省为 false
},
borderWidth: 2,
}
},
emphasis: {
itemStyle: {
areaColor: '#0160AD'
},
label: {
show: false,
color: 'transparent'
}
},
zlevel: 4
},
{
map: mapName,
aspectScale: 1.1,
roam: false, // 是否允许缩放
zoom: 1.2, // 默认显示级别
layoutSize: '95%',
layoutCenter: ['50%', '55.4%'],
itemStyle: {
areaColor: '#14406f00',
borderColor: '#00f7fa',
borderWidth: 5
},
zlevel: 3,
silent: true
},
{
map: mapName,
aspectScale: 1.1,
roam: false, // 是否允许缩放
zoom: 1.2, // 默认显示级别
layoutSize: '95%',
layoutCenter: ['50%', '55%'],
itemStyle: {
normal: {
borderColor: 'rgba(192,245,249,.6)',
borderWidth: 2,
shadowColor: '#2C99F6',
shadowOffsetY: 20,
shadowBlur: 10,
areaColor: 'rgba(29,85,139,.2)'
}
},
zlevel: 2,
silent: true
},
{
map: mapName,
aspectScale: 1.1,
roam: false, // 是否允许缩放
zoom: 1.2, // 默认显示级别
layoutSize: '95%',
layoutCenter: ['50%', '56.5%'],
itemStyle: {
areaColor: '#00aeff33',
borderColor: '#08385eff',
borderWidth: 5
},
zlevel: 1,
silent: true
}
],
series: [
{
geoIndex: 0,
selectedMode: false,
showLegendSymbol: true,
type: 'map',
roam: true,
label: {
normal: {
show: false,
textStyle: {
color: '#ffffff88'
}
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: '#12235c'
},
emphasis: {
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: '#12235c'
}
},
// map: mapName, // 使用
data: customerBatteryCityData
// data: this.difficultData //热力图数据 不同区域 不同的底色
},
{//left
type: 'custom',
coordinateSystem: 'geo',
zlevel: 5,
silent: true,
renderItem: function (params, api) {
let mycolor = [
{
offset: 0,
color: '#33ffeeaa' // 0% 处的颜色
},
{
offset: 0.2,
color: '#33ffee99' // 0% 处的颜色
},
{
offset: 0.4,
color: '#33ffee66' // 0% 处的颜色
},
{
offset: 0.6,
color: '#33ffee33' // 0% 处的颜色
},
{
offset: 0.9,
color: '#33ffee00' // 0% 处的颜色
},
]
if (customerBatteryCityData[params.dataIndex].value >= 15) {
mycolor = [
{
offset: 0,
color: '#ffb65caa' // 0% 处的颜色
},
{
offset: 0.2,
color: '#ffb65c99' // 0% 处的颜色
},
{
offset: 0.4,
color: '#ffb65c66' // 0% 处的颜色
},
{
offset: 0.6,
color: '#ffb65c33' // 0% 处的颜色
},
{
offset: 0.9,
color: '#ffb65c00' // 0% 处的颜色
},
]
}
var lng = api.value(0);
var lat = api.value(1);
let height = 43;
let width = 20;
let p1 = api.coord([lng, lat]);
let p2 = [p1[0] - width / 2, p1[1] - width / 2];
let p3 = [p2[0], p2[1] - height + 3];
let p4 = [p1[0], p1[1] - height];
let points = [p1, p2, p3, p4];
return {
type: 'polygon',
transition: ['shape'],
shape: {
points: points
},
style: api.style({
fill: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: mycolor,
global: false // 缺省为 false
},
stroke: 'none'
}),
emphasis: {
style: {
opacity: 0
}
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(199,145,41,1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(199,145,41,.6)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(223,176,32,.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(223,176,32,.6)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(199,145,41,.6)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
data: leftDataLs
};
},
data: leftDataLs
},
{//right
type: 'custom',
coordinateSystem: 'geo',
zlevel: 6,
silent: true,
renderItem: function (params, api) {
let mycolor = [
{
offset: 0,
color: '#bcf4efbb' // 0% 处的颜色
},
{
offset: 0.1,
color: '#bcf4ef88' // 0% 处的颜色
},
{
offset: 0.3,
color: '#bcf4ef55' // 0% 处的颜色
},
{
offset: 1,
color: '#bcf4ef00' // 0% 处的颜色
},
]
if (customerBatteryCityData[params.dataIndex].value >= 15) {
mycolor = [
{
offset: 0,
color: '#ffc073ee' // 0% 处的颜色
},
{
offset: 0.1,
color: '#ffc07388' // 0% 处的颜色
},
{
offset: 0.3,
color: '#ffc07355' // 0% 处的颜色
},
{
offset: 1,
color: '#ffc07300' // 0% 处的颜色
},
]
}
var lng = api.value(0);
var lat = api.value(1);
let height = 43;
let width = 20;
let p1 = api.coord([lng, lat]);
let p2 = [p1[0] + width / 2, p1[1] - width / 2 + 3];
let p3 = [p2[0], p2[1] - height];
let p4 = [p1[0], p1[1] - height];
let points = [p1, p2, p3, p4];
return {
type: 'polygon',
transition: ['shape'],
shape: {
points: points
},
style: api.style({
fill: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: mycolor,
global: false // 缺省为 false
},
stroke: 'none'
}),
emphasis: {
style: {
opacity: 0
}
},
};
},
data: leftDataLs
},
{//top
type: 'custom',
coordinateSystem: 'geo',
zlevel: 6,
silent: true,
label: {
normal: {
position: 'top',
show: true,
formatter: function (params) {
var name = params.data[2].name
var value = params.data[2].jrl
// var text = `{tline|${name}}:{fline|${value}}`
var text = `{fline|${value}}`
return text;
},
color: '#fff',
rich: {
fline: {
// padding: [0, 25],
color: '#fff',
fontSize: 18,
fontFamily: 'DIN-B',
fontWeight: '400',
},
tline: {
// padding: [0, 27],
color: '#ABF8FF',
fontSize: 12,
},
}
},
},
renderItem: function (params, api) {
let mycolor = [
{
offset: 0,
color: '#12cdbe' // 0% 处的颜色
},
{
offset: 1,
color: '#e6fffd' // 0% 处的颜色
},
]
if (customerBatteryCityData[params.dataIndex].value >= 15) {
mycolor = [
{
offset: 0,
color: '#fcae4e' // 0% 处的颜色
},
{
offset: 1,
color: '#e6fffd' // 0% 处的颜色
},
]
}
var lng = api.value(0);
var lat = api.value(1);
let height = 40;
let width = 20;
let p0 = api.coord([lng, lat]);
let p1 = [p0[0], p0[1] - height - 3];
let p2 = [p0[0] - width / 2, p0[1] - width / 2 - height];
let p3 = [p0[0], p0[1] - width - height + 3];
let p4 = [p0[0] + width / 2, p0[1] - width / 2 - height];
let points = [p1, p2, p3, p4];
return {
type: 'polygon',
transition: ['shape'],
shape: {
points: points
},
style: api.style({
fill: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: mycolor,
global: false // 缺省为 false
},
stroke: 'none'
}),
emphasis: {
style: {
opacity: 0
}
}
};
},
data: leftDataLs
},
{//bottom
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 4,
label: {
normal: {
formatter: '{b}',
position: 'bottom',
color: '#ffffffaa',
fontSize: 12,
distance: 1,
show: true,
},
emphasis: {
show: false
}
},
symbol: 'diamond',
symbolSize: [17, 8],
itemStyle: {
// color: '#F7AF21',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgb(199,145,41,0)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgb(199,145,41,0)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgb(223,176,32,0)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgb(223,176,32,0)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgb(199,145,41,0)' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
opacity: 1,
emphasis: {
itemStyle: {
opacity: 0,
}
},
// shadowColor: '#fff',
// shadowBlur: 5,
// shadowOffsetY: 2
},
silent: true,
data: scatterData2()
}
]
}
this.charts.setOption(option);
this.charts.off("click") // 防止graph里频繁添加click事件,在添加click事件之前先全部清空掉
this.charts.on("click", ({name}) => {
//下钻后取消高亮操作
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 1,
dataIndex: this.params.dataIndex
})
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 2,
dataIndex: this.params.dataIndex
})
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 3,
dataIndex: this.params.dataIndex
})
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 4,
dataIndex: this.params.dataIndex
})
// 如果option.graphic里已经有了城市名称,则不进行任何操作,防止频繁点击
// const index = option.graphic.findIndex(i => i.style.text === name);
// // console.log('index',index);
//
// if (!name || index !== -1) return
// 这里和上面一样,其实还可以再优化一下。为了方便阅读,这里不再封装。
const [mapName, mapJson] = getMap(name);
if (mapName != 'henan') {
this.myCity = name
} else {
this.myCity = '河南省'
}
this.$emit('changeCity', this.myCity)
// debugger
this.go(mapName, mapJson)
// 渲染
// this.charts.setOption(option, true);
});
function scatterData2() {
return customerBatteryCityData.map((item) => {
return {
name: item.name,
value: geoCoordMap[item.name]
}
})
}
function lineMaxHeight() {
const maxValue = Math.max(...customerBatteryCityData.map(item => item.value))
return 0.3 / maxValue
}
function lineData() {
for (let item of customerBatteryCityData) {
let height = item.value * lineMaxHeight();
let width = height / 4;
let p1 = geoCoordMap[item.name];
let p2 = [p1[0] - width / 2, p1[1] + width / 2];
let p3 = [p1[0] - width / 2, p1[1] + width / 2 + height];
let p4 = [p1[0], p1[1] + height];
// leftDataLs.push([p1, p2, p3, p4]);
leftDataLs.push([...p1, item])
}
return customerBatteryCityData.map((item) => {
return {
coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]]
}
})
}
this.charts.on("mouseover", params => {
if (params.seriesType == 'map') {
// 详情
this.params = params
this.charts.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex: params.dataIndex
})
this.charts.dispatchAction({
type: 'highlight',
seriesIndex: 2,
dataIndex: params.dataIndex
})
this.charts.dispatchAction({
type: 'highlight',
seriesIndex: 3,
dataIndex: params.dataIndex
})
this.charts.dispatchAction({
type: 'highlight',
seriesIndex: 4,
dataIndex: params.dataIndex
})
this.charts.dispatchAction({
type: 'highlight',
seriesIndex: 5,
dataIndex: params.dataIndex
})
}
})
this.charts.on("mouseout", params => {
if (params.seriesType == 'map') {
// 详情
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 1,
dataIndex: params.dataIndex
})
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 2,
dataIndex: params.dataIndex
})
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 3,
dataIndex: params.dataIndex
})
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 4,
dataIndex: params.dataIndex
})
this.charts.dispatchAction({
type: 'downplay',
seriesIndex: 5,
dataIndex: params.dataIndex
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.home {
width: 100%;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.weather {
position: absolute;
right: 20px;
top: 20px;
width: 300px;
height: 37px;
display: flex;
justify-content: flex-start;
align-items: center;
font-family: "PingFang SC";
font-size: 20px;
color: #c3cee3;
background: url("@/assets/imgs/zhzf/weather.png") no-repeat center center;
background-size: 100% 100%;
.weatherItem {
flex: 1;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.br {
position: relative;
&:after {
content: '';
position: absolute;
right: 0;
top: 0;
height: 24px;
width: 3px;
border-radius: 2px;
background-color: #7ad8ff;
}
}
}
.mySelect {
position: absolute;
left: 20px;
top: 10px;
z-index: 99;
}
.echarts_map {
width: 100%;
height: 100%;
}
}
.mySelect {
border: 0 !important;
.myselectItem {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: inset 0 0 1px #6e87c5;
padding: 0 10px;
color: #FFFFFF;
}
:deep(.el-select-dropdown__item.hover, .el-select-dropdown__item:hover) {
background-color: transparent !important;
}
:deep(.el-popper.is-light .el-popper__arrow::before) {
background-color: transparent !important;
border: 0 !important;
}
:deep(.el-input__wrapper) {
box-shadow: 0 0 0 #00000000 !important;
background: url("@/assets/imgs/zhzf/henanBorder.png") no-repeat center center !important;
background-size: 100% 100% !important;
border: 0 !important;
}
:deep(.el-input.is-focus .el-input__wrapper) {
box-shadow: 0 0 0 #00000000 !important;
}
:deep(.el-input .el-select__caret) {
color: #04a9ff !important;
}
:deep(.el-select__popper.el-popper,.el-select-dropdown) {
border: 1px solid #1c2d50 !important;
background-color: #09142f !important;
}
:deep(.el-select-dropdown__item) {
padding: 0 10px 5px;
}
:deep(.el-input .el-input__inner) {
font-family: "PingFang SC" !important;
font-weight: 500 !important;
font-size: 20px !important;
/* 设置背景色渐变 */
background-image: linear-gradient(to bottom, #149eff 5%, #effcfe 50%) !important;
/* 设置背景以文字进行裁切 */
background-clip: text;
-webkit-background-clip: text;
/* 设置文本颜色透明以露出后面裁切成文本形状的渐变背景 */
color: transparent !important;
}
}
</style>
结语:费心巴力搞两天搞完,结果领导说想要朴素点的MMP╰(‵□′)╯