第一步：先获取相关地图json文件，可以通过DataV.GeoAtlas地理小工具系列下载相关geoJson文件，对这些文件做好管理，如下getMap.js
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官网查看
下方完整组件代码：
<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.namelet value = item.properties.centroidgeoCoordMap[key] = valueif (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的centroidlet 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 //热力图数据 不同区域 不同的底色},{//lefttype: '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},{//righttype: '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},{//toptype: 'custom',coordinateSystem: 'geo',zlevel: 6,silent: true,label: {normal: {position: 'top',show: true,formatter: function (params) {var name = params.data[2].namevar 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},{//bottomtype: '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)// debuggerthis.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 = paramsthis.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╰（‵□′）╯
