Vue+Echarts 3D地图效果的实例代码
作者：沉默是金~
文章介绍了如何使用Vue+Echarts3D实现地图效果,并分享了index.vue组件和mapOptions.js的核心方法,希望对大家有所帮助
Vue+Echarts 3D地图效果
效果在最下方展示
index.vue组件
<template>
<div class="content bg" :class="{ 'fullscreen-container': isFullScreen }">
<!-- 全屏容器 -->
<!-- <dv-full-screen-container> -->
<!-- 第一行 -->
<div class="module-box">
<div style="flex: 0 1 100%">
<div class="d-flex">
<dv-decoration-8 :color="['rgb(124 157 236)', 'rgb(124 157 236)']" style="height: 50px; flex: 0 1 30%" />
<div
style="
flex: 0 1 50%;
text-align: center;
line-height: 50px;
font-size: 2em;
color: rgb(124 157 236);
font-weight: bolder;
cursor: pointer;
"
@click="fullScreen"
id="fullscreen"
>
{{this.jsonData.screenTitle}}
<span v-show="!isFullScreen"><img title="全屏" src="../assets/img/fullscreen.png"></span>
</div>
<dv-decoration-8 :reverse="true" :color="['rgb(124 157 236)', 'rgb(124 157 236)']" style="height: 50px; flex: 0 1 30%" />
</div>
</div>
</div>
<!-- 第二行 -->
<div class="module-box">
<!-- 左 -->
<div style="flex: 0 1 25%">
<!-- 边框 -->
<dv-border-box-13 :dur="6" style="width: 100%; height: 270px; text-align: center">
<div class="titleComm titleStyleLeft">安全生产天数(天)</div>
<div style="visibility: hidden;height:55px "></div>
<YwEchartNum :val="this.jsonData.numberFlip"></YwEchartNum>
<!-- <dv-digital-flop :config="config1" style="width:160px;height:50px;" />-->
</dv-border-box-13>
<!-- <dv-water-level-pond :config="config2" style="width:100%;height:200px" />-->
<!-- 水位图 -->
<dv-border-box-13 :dur="6" style="width: 100%; height: 330px; text-align: center; margin-top: 20px">
<!-- 边框 -->
<div class="titleComm titleStyleLeft">刘岗庄站本年度发电情况(万kW·h)</div>
<div style="visibility: hidden;height:50px "></div>
<el-row class="flexBox" :gutter="24">
<el-col :span="12">
<!-- <dv-active-ring-chart :config="config" style="height:300px;width:100%" :showEffectOn="'none'" />-->
<!-- <div id="y1" style="height: 200px; width: 100%"></div>-->
<dv-decoration-9 :dur="6" style="width:100%;height:220px;"><div class="dv">{{this.yearPercentageValue}}</div></dv-decoration-9>
</el-col>
<el-col :span="12">
<div class="titleStyleLeft1" style="text-align: left"><span style="font-size: 20px;display: inline-block;border-radius: 100%;background: #1c84c6;width:8px;height:8px;margin-right: 5px"></span>年度电量计划(万kW·h)</div>
<div style="font-size: 22px;color:rgb(75 123 207)">{{this.jsonData.yearValue}}</div>
<div class="titleStyleLeft2" style="text-align: left"><span style="font-size: 20px;display: inline-block;border-radius: 100%;background: #23c6c8;width:8px;height:8px;margin-right: 5px"></span>完成情况(万kW·h)</div>
<div style="font-size: 22px;color:rgb(103 224 227)">{{this.jsonData.yearComplete}}</div>
</el-col>
</el-row>
<!-- <div id="l3" style="height: 220px; width: 100%"></div>-->
</dv-border-box-13>
<dv-border-box-13 :dur="6" style="width: 100%; height: 330px; text-align: center; margin-top: 20px">
<!-- 边框 -->
<div class="titleComm titleStyleLeft">刘岗庄站月度发电情况(万kW·h)</div>
<div style="visibility: hidden;height:50px "></div>
<!-- <div id="line12" style="height: 470px; width: 100%"></div>-->
<el-row class="flexBox" :gutter="24">
<el-col :span="12">
<!-- <dv-active-ring-chart :config="configTwo" style="height:300px;width:100%" />-->
<!-- <div id="y2" style="height: 200px; width: 100%"></div>-->
<dv-decoration-9 :dur="6" style="width:100%;height:220px;"><div class="dv">{{this.monthPercentageValue}}</div></dv-decoration-9>
</el-col>
<el-col :span="12">
<div class="titleStyleLeft1" style="text-align: left"><span style="font-size: 20px;display: inline-block;border-radius: 100%;background: #1c84c6;width:8px;height:8px;margin-right: 5px"></span>月度电量计划(kW·h)</div>
<div style="font-size: 22px;color:rgb(75 123 207)">{{this.jsonData.monthValue}}</div>
<div class="titleStyleLeft2" style="text-align: left"><span style="font-size: 20px;display: inline-block;border-radius: 100%;background: #23c6c8;width:8px;height:8px;margin-right: 5px"></span>完成情况(万kW·h)</div>
<div style="font-size: 22px;color:rgb(103 224 227)">{{this.jsonData.monthComplete}}</div>
</el-col>
</el-row>
</dv-border-box-13>
</div>
<div style="flex: 0 1 50%" class="custom-border-box">
<!-- 中 -->
<dv-border-box-11 style="width: 100%; height: 750px; padding: 30px 20px; color: #000" :title="this.jsonData.mapTtile">
<!-- 边框 -->
<!-- <dv-flyline-chart :config="configthis.jsonData.4" style="width:100%;height:100%;" /> -->
<!-- <dv-flyline-chart-enhanced :config="configMap" :dev="true" style="width:100%;height:100%;position: relative;z-index:9999" />-->
<div id="map" ref="mapDOM" style="height: 680px; width: 100%;position: absolute; top: 20px; z-index: 1"></div>
<div style="display: -webkit-box;-webkit-box-orient: vertical;position: absolute;right:5px;top:10%;-webkit-box-align:center;-webkit-box-pack: center;">
<div style="display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;">
<div style="height: 20px;width:30px;background: #25ccf2;margin-right: 5px;border-radius: 5px;"></div>
<div style="color:#fff;font-size:15px">并网容量 <span>{{this.jsonData.bwrl}}</span></div>
</div>
<div style="display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;">
<div style="height: 20px;width:30px;background: #4e6bc6;margin-right: 5px;border-radius: 5px;"></div>
<div style="color:#fff;font-size:15px">实时功率 <span>{{this.jsonData.ssgl}}</span></div>
</div>
</div>
<!-- 飞线图 -->
</dv-border-box-11>
<dv-border-box-9 :dur="6" :color="['#283580', '#4e6bc6']" style="width: 100%; height: 220px; padding:20px">
<!-- <div style="visibility: hidden;height:55px "></div>-->
<el-row class="flexBox">
<el-col :span="24">
<div id="line12" style="height: 200px; width: 100%"></div>
<!-- <div class="webkitBox">-->
<!-- <div class="webkitBoxC">-->
<!-- <div><img src="../assets/img/co2.png"></div>-->
<!-- <div style="display:-webkit-box;color:#ddd;transform: translateY(-4px)">{{this.jsonData.cO2}}</div>-->
<!-- <div style="display:-webkit-box;-webkit-box-pack: end;transform: translateY(-4px)" class="fontStyle">{{this.jsonData.cO2Value}}</div>-->
<!-- </div>-->
<!-- </div>-->
</el-col>
<!-- <el-col :span="6">-->
<!-- <div class="webkitBox">-->
<!-- <div class="webkitBoxC">-->
<!-- <div><img src="../assets/img/so2.png"></div>-->
<!-- <div style="display:-webkit-box;color:#ddd">{{this.jsonData.sO2}}</div>-->
<!-- <div style="display:-webkit-box;" class="fontStyle">{{this.jsonData.sO2Value}}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="6">-->
<!-- <div class="webkitBox">-->
<!-- <div class="webkitBoxC">-->
<!-- <div><img src="../assets/img/tree.png"></div>-->
<!-- <div style="display:-webkit-box;color:#ddd">{{this.jsonData.tree}}</div>-->
<!-- <div style="display:-webkit-box;" class="fontStyle">{{this.jsonData.treeValue}}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="6">-->
<!-- <div class="webkitBox">-->
<!-- <div class="webkitBoxC">-->
<!-- <div><img src="../assets/img/electricity.png"></div>-->
<!-- <div style="display:-webkit-box;color:#ddd">{{this.jsonData.dosAge}}</div>-->
<!-- <div style="display:-webkit-box;" class="fontStyle">{{this.jsonData.dosAgeValue}}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
</el-row>
<!-- 排名轮播表 -->
</dv-border-box-9>
</div>
<div style="flex: 0 1 25%">
<!-- 右 -->
<dv-border-box-13 :dur="6" style="width: 100%; height: 300px; text-align: center">
<div class="titleComm titleStyleCenter">天气预报</div>
<div style="visibility: hidden;height:26px "></div>
<el-row :gutter="24">
<el-col :span="24">
<div id="he-plugin-standard"></div>
</el-col>
</el-row>
<el-row :gutter="24" style="visibility: hidden">
<el-col :span="24">
<div style="display: -webkit-box; -webkit-box-pack: center">
<div class="box" @click="gotoPIV(pivisionList[0])">
<el-tooltip>
<template v-slot:title>{{ eachName[0] }}</template>
{{ eachName[0] }}
</el-tooltip>
</div>
<div class="box" @click="gotoPIV(pivisionList[1])">
<el-tooltip>
<template v-slot:title>{{ eachName[1] }}</template>
{{ eachName[1] }}
</el-tooltip>
</div>
<div class="box" @click="gotoPIV(pivisionList[2])">
<el-tooltip>
<template v-slot:title>{{ eachName[2] }}</template>
{{ eachName[2] }}
</el-tooltip>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="24" style="visibility: hidden">
<el-col :span="24">
<div style="display: -webkit-box; -webkit-box-pack: center">
<div class="box" @click="gotoPIV(pivisionList[3])">
<el-tooltip>
<template v-slot:title>{{ eachName[3] }}</template>
{{ eachName[3] }}
</el-tooltip>
</div>
<div class="box" @click="gotoPIV(pivisionList[4])">
<el-tooltip>
<template v-slot:title>{{ eachName[4] }}</template>
{{ eachName[4] }}
</el-tooltip>
</div>
<div class="box" @click="gotoPIV(pivisionList[5])">
<el-tooltip>
<template v-slot:title>{{ eachName[5] }}</template>
{{ eachName[5] }}
</el-tooltip>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="24" style="visibility: hidden">
<el-col :span="24">
<div style="display: -webkit-box; -webkit-box-pack: center">
<div class="box" @click="gotoPIV(pivisionList[6])">
<el-tooltip>
<template v-slot:title>{{ eachName[6] }}</template>
{{ eachName[6] }}
</el-tooltip>
</div>
<div class="box" @click="gotoPIV(pivisionList[7])">
<el-tooltip>
<template v-slot:title>{{ eachName[7] }}</template>
{{ eachName[7] }}
</el-tooltip>
</div>
<div class="box" @click="gotoPIV(pivisionList[8])">
<el-tooltip>
<template>{{ eachName[8] }}</template>
{{ eachName[8] }}
</el-tooltip>
</div>
</div>
</el-col>
</el-row>
</dv-border-box-13>
<dv-border-box-13 :dur="6" style="height: 330px; width: 100%; margin-top: 20px">
<!-- 边框 -->
<div class="titleComm titleStyleRight">海晶站本年度发电情况(万kW·h)</div>
<!-- 装饰图 -->
<div style="visibility: hidden;height:40px "></div>
<el-row class="flexBox" :gutter="24">
<el-col :span="12">
<!-- <dv-active-ring-chart :config="configTwo" style="height:300px;width:100%" />-->
<!-- <div id="y2" style="height: 200px; width: 100%"></div>-->
<dv-decoration-9 :dur="6" style="width:100%;height:220px;"><div class="dv">{{this.yearPercentageValueH}}</div></dv-decoration-9>
</el-col>
<el-col :span="12">
<div class="titleStyleLeft1" style="text-align: left"><span style="font-size: 20px;display: inline-block;border-radius: 100%;background: #1c84c6;width:8px;height:8px;margin-right: 5px"></span>年度电量计划(万kW·h)</div>
<div style="font-size: 22px;color:rgb(75 123 207)">{{this.jsonData.yearValueH}}</div>
<div class="titleStyleLeft2" style="text-align: left"><span style="font-size: 20px;display: inline-block;border-radius: 100%;background: #23c6c8;width:8px;height:8px;margin-right: 5px"></span>完成情况(万kW·h)</div>
<div style="font-size: 22px;color:rgb(103 224 227)">{{this.jsonData.yearCompleteH}}</div>
</el-col>
</el-row>
</dv-border-box-13>
<dv-border-box-13 :dur="6" style="width: 100%; height: 320px; margin-top: 0px">
<div class="titleComm titleStyleRight">海晶站月度发电情况(万kW·h)</div>
<div style="visibility: hidden;height:55px "></div>
<!-- <dv-scroll-board :config="configTable" style="width:100%;height:220px" />-->
<!-- <dv-scroll-ranking-board :config="this.jsonData.configTable" style="width:100%;height:180px" />-->
<!-- 进度池 -->
<el-row class="flexBox" :gutter="24">
<el-col :span="12">
<!-- <dv-active-ring-chart :config="configTwo" style="height:300px;width:100%" />-->
<!-- <div id="y2" style="height: 200px; width: 100%"></div>-->
<dv-decoration-9 :dur="6" style="width:100%;height:210px;"><div class="dv">{{this.monthPercentageValueH}}</div></dv-decoration-9>
</el-col>
<el-col :span="12">
<div class="titleStyleLeft1" style="text-align: left"><span style="font-size: 20px;display: inline-block;border-radius: 100%;background: #1c84c6;width:8px;height:8px;margin-right: 5px"></span>月度电量计划(万kW·h)</div>
<div style="font-size: 22px;color:rgb(75 123 207)">{{this.jsonData.monthValueH}}</div>
<div class="titleStyleLeft2" style="text-align: left"><span style="font-size: 20px;display: inline-block;border-radius: 100%;background: #23c6c8;width:8px;height:8px;margin-right: 5px"></span>完成情况(万kW·h)</div>
<div style="font-size: 22px;color:rgb(103 224 227)">{{this.jsonData.monthCompleteH}}</div>
</el-col>
</el-row>
</dv-border-box-13>
</div>
</div>
</div>
<!-- 其他组件内容 -->
</template>
<script src="https://widget.qweather.com/"></script>
<script>
import Vue from 'vue'
import axios from 'axios'
import * as echarts from 'echarts'
import { jsonData } from '@/utils/map'
import YwEchartNum from '@/components/Echarts/Yw-Echart-Num/Yw-Echart-Num'
import jsonMap from '../api/home/getTJMap'
import {mapOption} from '../api/home/mapOption'
export default {
name: 'HomeView',
components:{YwEchartNum},
data() {
return {
isFullScreen: false,
eachName: [],
jsonData: '', //
num: 0,
showStatus: [],
statusArray: [],
numberFlip:'1234',
mapData:jsonData,
myChartMap:'',
myChartLine:'',
option: {...mapOption.basicOption},
yearPercentageValue:'',
monthPercentageValue:'',
yearPercentageValueH:'',
monthPercentageValueH:'',
timer:''
}
},
computed:{
currentDate() {
return new Date();
},
isNextDay() {
const now = this.currentDate;
const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
return now >= tomorrow;
}
},
watch: {
isNextDay(newValue) {
if (newValue) {
// 当前日期已经是第二天了
this.addOneDay();
}
}
},
created() {
localStorage.removeItem('time')
this.storeDateToLocalStorage()
this.jsonData = {
numberFlip:1028, //安全生产天数
screenTitle:'华电新能源集团股份有限公司天津分公司新能源驾驶舱', //大标题
mapTtile:'重庆市', //小标题
yearValue:6250, //年度用电计划（度）
yearComplete:6002, //完成情况（度）
monthValue:470, //月度用电计划（度）
monthComplete:283, //完成情况（度）
yearValueH:39400, //年度用电计划（度）
yearCompleteH:37383, //完成情况（度）
monthValueH:5400, //月度用电计划（度）
monthCompleteH:4238, //完成情况（度）
bwrl:'1000MW',
ssgl:'575 MW',
//日负荷曲线
line1Data:[["6h", 0], ["7h", 0], ["8h", 10], ["9h", 25], ["10h", 40], ["11h", 60], ["12h", 75], ["13h", 60], ["14h", 60], ["15h", 40], ["16h", 10], ["17h", 0], ["18h", 0]],
}
const data = localStorage.getItem('jsonData')
if(data){
this.jsonData =JSON.parse(data)
}else{
this.jsonData = this.jsonData
}
localStorage.removeItem('jsonData')
localStorage.setItem('jsonData',JSON.stringify(this.jsonData))
//和风天气插件调用
window.WIDGET = {
"CONFIG": {
"layout": "1",
"width": "300",
"height": "220",
"background": "4",
"dataColor": "FFFFFF",
"backgroundColor": "010F50",
"key": "45ad6022aec4422f8d261627ca53f0d0"
}
}
let script = document.createElement('script')
script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0'
document.getElementsByTagName('head')[0].appendChild(script)
},
destroyed() {
},
async mounted() {
//获取JSON数据渲染到页面
this.updateDate(1); // 先执行一次更新日期的方法
this.yearPercentageValue = parseFloat((this.jsonData.yearComplete / this.jsonData.yearValue) * 100).toFixed(2) +'%' //完成情况/年度用电 百分比
this.monthPercentageValue = parseFloat((this.jsonData.monthComplete / this.jsonData.monthValue) * 100).toFixed(2) +'%' //完成情况/月度用电 百分比
this.yearPercentageValueH = parseFloat((this.jsonData.yearCompleteH / this.jsonData.yearValueH) * 100).toFixed(2) +'%' //完成情况/年度用电 百分比
this.monthPercentageValueH = parseFloat((this.jsonData.monthCompleteH / this.jsonData.monthValueH) * 100).toFixed(2) +'%' //完成情况/月度用电 百分比
this.fullScreen()
//config配置项
this.$nextTick(() => {
setTimeout(() => {
const dom = document.getElementById('he-plugin-standard')
dom.style.width = '100%'
}, 2000)
})
this.setMapData() // 地图
this.setLineData() //能耗趋势
this.myChartMapResize()
this.myChartLineResize()
},
beforeDestroy() {
clearInterval(this.timer); // 在组件销毁前清除定时器
},
methods: {
// 获取当前日期的早上 6 点整的时间并存储到 localStorage 中
storeDateToLocalStorage() {
const now = new Date();
const today6am = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 6, 0, 0, 0); // 设置为今天的早上 6 点整
localStorage.setItem('startDate', today6am.getTime()); // 将时间戳存储到 localStorage 中
},
// 判断当前日期是否已经过了一天
isPastOneDay() {
const storedDate = parseInt(localStorage.getItem('startDate'), 10); // 从 localStorage 中获取存储的时间戳
if (!storedDate) {
// 如果没有存储过时间戳，说明是第一次访问，需要存储当前时间
this.storeDateToLocalStorage();
return false; // 返回 false 表示不需要加1
}
const now = new Date();
const oneDayInMilliseconds = 24 * 60 * 60 * 1000; // 一天的毫秒数
return now.getTime() - storedDate > oneDayInMilliseconds;
},
updateDate(num) {
// this.currentDate = moment().format('YYYY-MM-DD');
// this.nextDate = moment().add(1, 'days').format('YYYY-MM-DD');
// const time = localStorage.getItem('time')
// 在需要的地方调用 isPastOneDay() 方法来判断是否已经过了一天，如果是的话执行相应的操作
// if(time){
// this.jsonData.numberFlip = Number(time)
// }
// else{
if (this.isPastOneDay()) {
// 执行日期加1的操作
// 这里可以根据你的具体逻辑来实现日期的加1操作
// ...
this.jsonData.numberFlip += 1;
}else{
this.jsonData.numberFlip = this.jsonData.numberFlip
}
// }
localStorage.removeItem('time')
localStorage.setItem('time',this.jsonData.numberFlip)
},
//地图
setMapData(){
// 初始化统计图对象
var chartDom = document.getElementById('map');
this.myChartMap = echarts.init(chartDom);
var res = JSON.parse(jsonMap)
console.log(res)
// 得到结果后，关闭动画
// this.myChartMap.hideLoading();
// 注册地图(数据放在axios返回对象的data中哦)
echarts.registerMap('GX', res);
let mapDataList = []
mapDataList = res.features.map(item => {
return {
name: item.properties.name,
value: item.properties.adcode
}
})
var mapNameList = [];
var mapCodeList = [];
for (var i = 0; i < res.features.length; i++) {
var obj = {
...res.features[i].properties,
value: (Math.random() * 1000).toFixed(0) * 1,
valueData: (Math.random() * 1000).toFixed(0) * 1,
};
mapDataList.unshift(obj)
mapNameList.unshift(res.features[i].properties.name)
mapCodeList.unshift(res.features[i].properties.adcode + '000000')
}
// 在safeGetCoord方法中添加预设坐标
const presetCoords = {
'北碚区': [106.4375, 29.8254],
'奉节县': [109.4639, 31.0185], // 新增奉节坐标
'五峰土家族自治县':[110.82, 30.18],// 新增巫溪坐标
'三台县':[105.09, 31.10], //三台县坐标
'江北区': [106.5723, 29.6067], // 重庆江北区中心点
'江安县':[105.34, 28.72],
};
var option = {
visualMap: {
min: 1,
max: 9999,
realtime: false,
calculable: true,
inRange: {
color: ['#071752', '#2ba8d6', '#25ccf2']
},
pieces: [
{ min: 1, max: 100, color: '#071752' },
{ min: 101, max: 1000, color: '#2ba8d6' },
{ min: 1001, max: 9999, color: '#25ccf2' }
],
},
tooltip: {},
legend: {
data: ['并网容量 1000MW','实时功率 575MW'],
textStyle: {
color: '#000', // 设置图例文本颜色为白色
},
},
};
option.geo = {
show: false,
map: 'GX',
zoom: 1.2, //当前视角的缩放比例
roam: true, //是否开启平游或缩放
center: undefined,
itemStyle: {
areaColor: '#F4E925'
},
}
option.series = [
{
name: '重庆市',
mapType: 'GX',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
center: undefined,
scaleLimit: { //滚轮缩放的极限控制
min: .5,
max: 10
},
itemStyle: {
areaColor: 'lightskyblue'
},
...mapOption.seriesOption,
event: [
{
type: 'mouseover',
callback: function (params) {
var newOption = this.myChartMap.getOption();
newOption.series[0].data.forEach(function (item) {
if (item.name === params.name) {
if (item.visualMap) {
item.itemStyle = {
areaColor: 'lightskyblue'
};
} else {
item.itemStyle = {
areaColor: '#1890ff'
};
}
}
});
this.myChartMap.setOption(newOption);
}
},
{
type: 'mouseout',
callback: function (params) {
var newOption = this.myChartMap.getOption();
newOption.series[0].data.forEach(function (item) {
if (item.name === params.name) {
if (item.visualMap) {
item.itemStyle = {
areaColor: 'lightskyblue'
};
} else {
item.itemStyle = {
areaColor: '#1890ff'
};
}
}
});
this.myChartMap.setOption(newOption);
}
}
],
},
{
type: 'lines',
// "z": 10,
data: [
// 奉节 -> 五峰土家族自治县
{
coords: [
presetCoords['奉节县'],
presetCoords['五峰土家族自治县']
],
visualMap:false,
},
// 北碚 -> 三台县
{
coords: [
presetCoords['北碚区'],
presetCoords['三台县']
],
visualMap:false,
},
// 江北区 -> 珙县
{
coords: [
presetCoords['江北区'],
presetCoords['江安县']
],
visualMap:false,
}
],
effect: {
type:'solid',
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'pin', //箭头图标
// symbol: planePath,
symbolSize: 9, //图标大小
color:'#FFFF00',
},
lineStyle: {
normal: {
color:'rgb(224,203,112)',
width: 1, //尾迹线条宽度
opacity:0.4, //尾迹线条透明度
curveness: .3, //尾迹线条曲直度
},
},
},
{
name: '',//series名称
type: 'effectScatter',//散点类型
coordinateSystem: 'geo',// series坐标系类型
rippleEffect: {
brushType: 'fill'
},
normal: {
show: true,
// 提示内容
formatter: params => {
return params.name;
},
position: 'top', // 提示方向
color: '#fff'
},
emphasis: {
show: true, // 点
itemStyle: {
areaColor: '#F4E925'
}
},
itemStyle: {
normal: {
color: '#F4E925',
shadowBlur: 10,
shadowColor: '#000'
}
},
// symbol:'pin', // 散点样式'pin'（标注）、'arrow'（箭头）
// data: pointData,
data:[ // 在这里自定义散点位置和显示文本
{ name: '', value: [106.4375, 29.8254, 246813],
label: {
show: true,
position: 'right',
offset: [15, 0], // 设置名称向右偏移10像素
formatter: '{b}',
textStyle: {
fontSize: 16, // 设置字体大小
color: '#31e7c6' // 设置字体颜色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 设置散点的颜色为红色
shadowBlur: 10, // 增大阴影范围
shadowColor: '#ff4444', // 更醒目的阴影颜色
borderWidth: 1, // 增加边框宽度
borderColor: '#ff0000' // 边框颜色
}
},
rippleEffect: {
brushType: 'fill', // 设置光影扩散效果为边界扩散
scale:5, // 设置光影扩散的范围大小
period: 6, // 设置光影扩散的周期
number:2
},
animation: true // 开启动画效果
},
{ name: '', value: [109.4639, 31.0185, 135468],
label: {
show: true,
position: 'right',
offset: [15, 0], // 设置名称向右偏移10像素
formatter: '{b}',
textStyle: {
fontSize: 16, // 设置字体大小
color: '#31e7c6' // 设置字体颜色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 设置散点的颜色为红色
shadowBlur: 10, // 增大阴影范围
shadowColor: '#ff4444', // 更醒目的阴影颜色
borderWidth: 1, // 增加边框宽度
borderColor: '#ff0000' // 边框颜色
}
},
rippleEffect: {
// brushType: 'stroke', // 设置光影扩散效果为边界扩散
// scale:5, // 设置光影扩散的范围大小
// period: 3 // 设置光影扩散的周期
brushType: 'fill', // 设置光影扩散效果为边界扩散
scale:5, // 设置光影扩散的范围大小
period: 6, // 设置光影扩散的周期
number:2
},
animation: true // 开启动画效果
},
{ name: '', value: [106.5055, 29.5331, 579135],
label: {
show: true,
position: 'right',
offset: [15, 0], // 设置名称向右偏移10像素
formatter: '{b}',
textStyle: {
fontSize: 16, // 设置字体大小
color: '#31e7c6' // 设置字体颜色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 设置散点的颜色为红色
shadowBlur: 10, // 增大阴影范围
shadowColor: '#ff4444', // 更醒目的阴影颜色
borderWidth: 1, // 增加边框宽度
borderColor: '#ff0000' // 边框颜色
}
},
rippleEffect: {
// brushType: 'stroke', // 设置光影扩散效果为边界扩散
// scale:6, // 设置光影扩散的范围大小
// effectScale: 4,
// period: 6, // 设置光影扩散的周期
// brushSize: 1
brushType: 'fill', // 设置光影扩散效果为边界扩散
scale:5, // 设置光影扩散的范围大小
period: 6, // 设置光影扩散的周期
number:2
},
animation: true // 开启动画效果
},
],
// 在这里添加更多的数据项]
symbolSize: function (val) {
// 放大基础散点尺寸（原值6/10）
return val[2] === mapDataList[0].value ? 16 : 12;
},
showEffectOn: 'render', //加载完毕显示特效
},
]
this.myChartMap.setOption(option);
window.addEventListener('resize', this.myChartMapResize) //监听屏幕变化时自适应图表
//})
},
//折现图
setLineData(){
const data = this.jsonData.line1Data;
var chartDom = document.getElementById('line12')
this.myChartLine = echarts.init(chartDom)
const dateList = data.map(function (item) {
return item[0];
});
const valueList = data.map(function (item) {
return item[1];
});
// this.gongwenvalue = this.gongwenvalue.map(item => item === 0 ? null : item);
// this.huiwenvalue = this.huiwenvalue.map(item => item === 0 ? null : item);
var option = {
title: [
{
text: '日负荷曲线',
textStyle: {
color:'#fff'
}
},
{
text: '单位:万kW·h',
left: '80%',
textStyle: {
fontSize: 16,
color: '#fff',
},
},
],
tooltip: {
trigger: 'axis',
},
legend: {
data: [],
textStyle: {
color: '#fff', // 设置图例文本颜色为白色
},
},
grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true,
show: false,
left: '1%', // 设置左边距为 10%
right: '0%', // 设置右边距为 10%
bottom: '10%', // 设置下边距为 10%
containLabel: true, // 自动计算并包含坐标轴标签的大小
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dateList,
axisLabel: {
color: '#fff', // 设置X轴标签颜色为白色
},
},
yAxis: {
type: 'value',
// scale: true,
// name: '单位:℃',
// 去掉网格线
splitLine: {
show: false,
},
scale:true,
axisLabel: {
color: '#fff', // 设置Y轴标签颜色为白色
},
min: 0, // 最小值为 0
max: 100, // 最大值为 100
interval: 10, // 刻度间隔为 10
},
toolbox: {
feature: {
dataView: { show: false, readOnly: false },
magicType: { show: false, type: ['line', 'bar'] },
restore: { show: false },
saveAsImage: { show: false },
},
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
minValueSpan: 2,
},
{
show: false,
start: 0,
end: 100,
},
],
series: [
{
name: '',
type: 'line',
// stack: null,
data: valueList,
barGap: '20%', // 设置柱状图之间的间距为 20%
barCategoryGap: '30%', // 设置不同系列的柱状图之间的间距为 30%
barWidth: 5,
itemStyle: {
normal: {
color: '#31e7c6',
}
}
// yAxisIndex: 0,
},
],
}
option && this.myChartLine.setOption(option)
window.addEventListener('resize', this.myChartLineResize) //监听屏幕变化时自适应图表
},
myChartMapResize(){
if (this.myChartMap) {
this.$nextTick(() => {
this.myChartMap.resize()
})
}
},
myChartLineResize(){
if (this.myChartLine) {
this.$nextTick(() => {
this.myChartLine.resize()
})
}
},
//全屏
fullScreen() {
// 切换全屏模式的函数
// function toggleFullscreen() {
const element = document.documentElement
if (document.fullscreenElement) {
// 退出全屏模式
this.isFullScreen = false
this.myChartMapResize()
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
} else {
this.isFullScreen = true
this.myChartMapResize()
this.myChartLineResize()
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}
}
// }
},
},
}
</script>
<style lang="scss" scoped>
// 确保没有CSS样式覆盖
::v-deep .dv-border-box-11 polyline {
stroke: transparent !important; /* 排查此类样式 */
}
.box {
width: 80px;
height: 30px;
border-radius: 15px;
background-color: #00bb9c;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
::v-deep .ant-divider-inner-text {
position: absolute;
background: linear-gradient(45deg, #3f96a5, #225fa7);
padding: 0 20px;
font-weight: 500;
color: #fff;
font-size: 14px;
opacity: 0.8;
left: 0px;
top: -28px;
}
.a-divider {
background-color: #dcdfe63d;
position: relative;
}
::v-deep .ant-divider-horizontal.ant-divider-with-text-center,
.ant-divider-horizontal.ant-divider-with-text-left,
.ant-divider-horizontal.ant-divider-with-text-right {
display: contents;
margin: 16px 0;
color: rgb(6 7 17);
font-weight: 500;
font-size: 16px;
white-space: nowrap;
text-align: center;
background: #060711;
}
//svg image{
// margin-top: -400px;
//}
/*.content {*/
/* color: #fff;*/
/* !*background: linear-gradient(to left, #04115f,#04115f,#04115f);*!*/
/* width: 100%;*/
/* height: 100vh;*/
/*}*/
.box {
width: 100px;
height: 30px;
margin: 5px 20px;
text-align: center;
line-height: 30px;
border-radius: 5px;
background: linear-gradient(45deg, #11132c, #194281);
color: #ddd;
cursor: pointer;
}
.buttonbox {
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-box-orient: horizontal;
position: relative;
z-index: 2;
bottom: -600px;
}
.dv-border-box-13 {
width: 100%;
height: 300px;
text-align: center;
padding: 20px;
/*margin-bottom: 20px;*/
/*margin-top: 20px;*/
}
.fullscreen-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: white;
z-index: 9999;
display: block;
}
::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
position: relative;
height: 6px;
background: linear-gradient(45deg, #121738, #5470c6);
margin-bottom: 2px;
border-radius: 1px;
overflow: hidden;
}
.custom-border-box {
color: red; /* 设置标题颜色为红色 */
}
::v-deep .dv-border-box-11-title {
// border11 字体颜色
fill: #8aaafb;
}
::v-deep .dv-border-box-8 use:last-child {
stroke-width: 4;
}
::v-deep .dv-border-box-8 use:nth-last-child(2) {
stroke-width: 2.5px;
}
::v-deep .dv-border-box-11 .dv-border-svg-container > polyline {
fill: none;
stroke-width: 2px;
stroke: #32709f;
}
.divbox {
font-weight: bold;
margin: 10px 0px;
color: #fac858;
}
::-webkit-scrollbar {
width: 0.5em;
background-color: transparent;
}
::v-deep .dv-scroll-ranking-board .rank {
display: none;
}
::v-deep .dv-scroll-ranking-board .ranking-info .info-name {
flex: 0.4;
color: #e7e7e7;
text-align: left;
}
::v-deep .dv-scroll-ranking-board .ranking-info .ranking-value {
color: #e7e7e7;
}
.bar {
background: rgba(101, 132, 226, 0.1);
padding: 0.15rem;
}
.barbox:before {
border-left: 2px solid #02a6b5;
left: 0;
border-top: 2px solid #02a6b5;
}
.barbox:after {
border-right: 2px solid #02a6b5;
right: 0;
bottom: 0;
border-bottom: 2px solid #02a6b5;
}
.fontStyle {
font-size: 3rem;
color: #ffeb7b;
padding: 0.05rem 0;
font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
font-weight: bold;
height: 80px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0px;
}
.titleComm{
position: absolute;
width: 100%;
height: 30px;
top: -6px;
left: -14px;
text-align: left;
padding-left: 10px;
}
.titleStyleLeft{
background: linear-gradient(45deg, #12227d, #07154d);
}
.titleStyleLeft1{
background: linear-gradient(90deg, #051245, #14247c);
}
.titleStyleLeft2{
background: linear-gradient(90deg, #061346, #274981)
}
.titleStyleRight{
background: linear-gradient(45deg, #12227d,#040d34);
}
.titleStyleCenter{
background: linear-gradient(45deg, #12227d, #05103d);
}
.flexBox{
display: flex;
justify-content: center;
align-items: center;
}
.el-col-6 {
width: 25%;
text-align: center;
}
.webkitBox{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.webkitBoxC{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.fontStyle {
font-size: 3.5rem;
color: #5bc8f3;
padding: 0.05rem 0;
font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
font-weight: bold;
height: 80px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0px;
}
::v-deep dv-decoration-9 {
width: 150px;
height: 150px;
}
::v-deep dv-decoration-9 .percentage {
font-size: 30px; /* 修改百分比数字的字号 */
color: #ffffff; /* 修改百分比数字的颜色 */
}
::v-deep dv-decoration-9 .bar {
background-color: #ff0000; /* 修改进度条的背景颜色 */
}
::v-deep .font2 {
font-size: 28px;
text-shadow: 0 0 3px #7acaec;
}
::v-deep .font1 .font2 {
color: #7ec699;
font-weight: 700;
}
.dv{
font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
color:#23c6c8;
font-weight: bold;
font-size:23px
}
</style>
地图核心方法
//地图
setMapData(){
// 初始化统计图对象
var chartDom = document.getElementById('map');
this.myChartMap = echarts.init(chartDom);
var res = JSON.parse(jsonMap)
console.log(res)
// 得到结果后，关闭动画
// this.myChartMap.hideLoading();
// 注册地图(数据放在axios返回对象的data中哦)
echarts.registerMap('GX', res);
let mapDataList = []
mapDataList = res.features.map(item => {
return {
name: item.properties.name,
value: item.properties.adcode
}
})
var mapNameList = [];
var mapCodeList = [];
for (var i = 0; i < res.features.length; i++) {
var obj = {
...res.features[i].properties,
value: (Math.random() * 1000).toFixed(0) * 1,
valueData: (Math.random() * 1000).toFixed(0) * 1,
};
mapDataList.unshift(obj)
mapNameList.unshift(res.features[i].properties.name)
mapCodeList.unshift(res.features[i].properties.adcode + '000000')
}
// 在safeGetCoord方法中添加预设坐标
const presetCoords = {
'北碚区': [106.4375, 29.8254],
'奉节县': [109.4639, 31.0185], // 新增奉节坐标
'五峰土家族自治县':[110.82, 30.18],// 新增巫溪坐标
'三台县':[105.09, 31.10], //三台县坐标
'江北区': [106.5723, 29.6067], // 重庆江北区中心点
'江安县':[105.34, 28.72],
};
var option = {
visualMap: {
min: 1,
max: 9999,
realtime: false,
calculable: true,
inRange: {
color: ['#071752', '#2ba8d6', '#25ccf2']
},
pieces: [
{ min: 1, max: 100, color: '#071752' },
{ min: 101, max: 1000, color: '#2ba8d6' },
{ min: 1001, max: 9999, color: '#25ccf2' }
],
},
tooltip: {},
legend: {
data: ['并网容量 1000MW','实时功率 575MW'],
textStyle: {
color: '#000', // 设置图例文本颜色为白色
},
},
};
option.geo = {
show: false,
map: 'GX',
zoom: 1.2, //当前视角的缩放比例
roam: true, //是否开启平游或缩放
center: undefined,
itemStyle: {
areaColor: '#F4E925'
},
}
option.series = [
{
name: '重庆市',
mapType: 'GX',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
center: undefined,
scaleLimit: { //滚轮缩放的极限控制
min: .5,
max: 10
},
itemStyle: {
areaColor: 'lightskyblue'
},
...mapOption.seriesOption,
event: [
{
type: 'mouseover',
callback: function (params) {
var newOption = this.myChartMap.getOption();
newOption.series[0].data.forEach(function (item) {
if (item.name === params.name) {
if (item.visualMap) {
item.itemStyle = {
areaColor: 'lightskyblue'
};
} else {
item.itemStyle = {
areaColor: '#1890ff'
};
}
}
});
this.myChartMap.setOption(newOption);
}
},
{
type: 'mouseout',
callback: function (params) {
var newOption = this.myChartMap.getOption();
newOption.series[0].data.forEach(function (item) {
if (item.name === params.name) {
if (item.visualMap) {
item.itemStyle = {
areaColor: 'lightskyblue'
};
} else {
item.itemStyle = {
areaColor: '#1890ff'
};
}
}
});
this.myChartMap.setOption(newOption);
}
}
],
},
{
type: 'lines',
// "z": 10,
data: [
// 奉节 -> 五峰土家族自治县
{
coords: [
presetCoords['奉节县'],
presetCoords['五峰土家族自治县']
],
visualMap:false,
},
// 北碚 -> 三台县
{
coords: [
presetCoords['北碚区'],
presetCoords['三台县']
],
visualMap:false,
},
// 江北区 -> 珙县
{
coords: [
presetCoords['江北区'],
presetCoords['江安县']
],
visualMap:false,
}
],
effect: {
type:'solid',
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'pin', //箭头图标
// symbol: planePath,
symbolSize: 9, //图标大小
color:'#FFFF00',
},
lineStyle: {
normal: {
color:'rgb(224,203,112)',
width: 1, //尾迹线条宽度
opacity:0.4, //尾迹线条透明度
curveness: .3, //尾迹线条曲直度
},
},
},
{
name: '',//series名称
type: 'effectScatter',//散点类型
coordinateSystem: 'geo',// series坐标系类型
rippleEffect: {
brushType: 'fill'
},
normal: {
show: true,
// 提示内容
formatter: params => {
return params.name;
},
position: 'top', // 提示方向
color: '#fff'
},
emphasis: {
show: true, // 点
itemStyle: {
areaColor: '#F4E925'
}
},
itemStyle: {
normal: {
color: '#F4E925',
shadowBlur: 10,
shadowColor: '#000'
}
},
// symbol:'pin', // 散点样式'pin'（标注）、'arrow'（箭头）
// data: pointData,
data:[ // 在这里自定义散点位置和显示文本
{ name: '', value: [106.4375, 29.8254, 246813],
label: {
show: true,
position: 'right',
offset: [15, 0], // 设置名称向右偏移10像素
formatter: '{b}',
textStyle: {
fontSize: 16, // 设置字体大小
color: '#31e7c6' // 设置字体颜色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 设置散点的颜色为红色
shadowBlur: 10, // 增大阴影范围
shadowColor: '#ff4444', // 更醒目的阴影颜色
borderWidth: 1, // 增加边框宽度
borderColor: '#ff0000' // 边框颜色
}
},
rippleEffect: {
brushType: 'fill', // 设置光影扩散效果为边界扩散
scale:5, // 设置光影扩散的范围大小
period: 6, // 设置光影扩散的周期
number:2
},
animation: true // 开启动画效果
},
{ name: '', value: [109.4639, 31.0185, 135468],
label: {
show: true,
position: 'right',
offset: [15, 0], // 设置名称向右偏移10像素
formatter: '{b}',
textStyle: {
fontSize: 16, // 设置字体大小
color: '#31e7c6' // 设置字体颜色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 设置散点的颜色为红色
shadowBlur: 10, // 增大阴影范围
shadowColor: '#ff4444', // 更醒目的阴影颜色
borderWidth: 1, // 增加边框宽度
borderColor: '#ff0000' // 边框颜色
}
},
rippleEffect: {
// brushType: 'stroke', // 设置光影扩散效果为边界扩散
// scale:5, // 设置光影扩散的范围大小
// period: 3 // 设置光影扩散的周期
brushType: 'fill', // 设置光影扩散效果为边界扩散
scale:5, // 设置光影扩散的范围大小
period: 6, // 设置光影扩散的周期
number:2
},
animation: true // 开启动画效果
},
{ name: '', value: [106.5055, 29.5331, 579135],
label: {
show: true,
position: 'right',
offset: [15, 0], // 设置名称向右偏移10像素
formatter: '{b}',
textStyle: {
fontSize: 16, // 设置字体大小
color: '#31e7c6' // 设置字体颜色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 设置散点的颜色为红色
shadowBlur: 10, // 增大阴影范围
shadowColor: '#ff4444', // 更醒目的阴影颜色
borderWidth: 1, // 增加边框宽度
borderColor: '#ff0000' // 边框颜色
}
},
rippleEffect: {
// brushType: 'stroke', // 设置光影扩散效果为边界扩散
// scale:6, // 设置光影扩散的范围大小
// effectScale: 4,
// period: 6, // 设置光影扩散的周期
// brushSize: 1
brushType: 'fill', // 设置光影扩散效果为边界扩散
scale:5, // 设置光影扩散的范围大小
period: 6, // 设置光影扩散的周期
number:2
},
animation: true // 开启动画效果
},
],
// 在这里添加更多的数据项]
symbolSize: function (val) {
// 放大基础散点尺寸（原值6/10）
return val[2] === mapDataList[0].value ? 16 : 12;
},
showEffectOn: 'render', //加载完毕显示特效
},
]
this.myChartMap.setOption(option);
window.addEventListener('resize', this.myChartMapResize) //监听屏幕变化时自适应图表
//})
},mapOptions.js
export const mapOption = {
basicOption: {
title: [{
left: 'left',
text: '全国',
textStyle: {
fontSize: 16,
color: '#fff'
},
},
{
text: "",
left: 'left',
top: '30',
textStyle: {
fontSize: 16,
color: '#24CFF4'
},
}
],
tooltip: {//提示框组件
trigger: 'item',//触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
// triggerOn:"none",//提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
showContent: true,//是否显示提示框浮层
alwaysShowContent: false,//是否永远显示提示框内容
showDelay: 0, //浮层显示的延迟，单位为 ms
hideDelay: 100, //浮层隐藏的延迟，单位为 ms
enterable: false, //鼠标是否可进入提示框浮层中
confine: false, //是否将 tooltip 框限制在图表的区域内
transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
backgroundColor:"transparent", //标题背景色
// position:['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
borderColor: "#ccc", //边框颜色
borderWidth: 0, //边框线宽
padding: 0, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
borderRadius: 5,
textStyle: {
fontSize: 10,
}, //文本样式
// formatter: '{b}',
formatter: (param) => {
let val = typeof (param.value) === 'number' ? param.value : param.value[2];
if (isNaN(val)) {
val = 0;
}
return '<div style="text-align:left;padding: 15px;font-weight: bolder;border-radius: 5px;background: linear-gradient(to right, rgba(36, 118, 183, 1) , rgba(36, 118, 183, .5))">' +
'<div style="color: #26C4EB;padding-bottom: 10px;">' +
'<span>● </span>' +
'<span>' + param.name + '</span>' +
'</div>' +
'<div style="padding: 2px 16px;">' +
'<span>'+ val + '</span>' +
'</div>' +
'</div>';
}
},
//左侧导航视觉映射组件
visualMap: {
type: 'continuous', // 连续型
min: 0,// 值域最小值，必须参数
max: 0,// 值域最大值，必须参数
text: ['数量'],
left: 0,
bottom: 0,
calculable: true,
seriesIndex: [0],
show:false,
inRange: {
color: ['#24CFF4', '#2E98CA', '#1E62AC']// 指定数值从低到高时的颜色变化
},
textStyle: {
color: '#24CFF4'// 值域控件的文本颜色
}
},
// 新建一个地理坐标系 geo
// geo: {
// map: 'china',//地图类型为中国地图
// itemStyle:{ // 定义样式
// normal:{ // 普通状态下的样式
// areaColor:'#6699CC',
// borderColor: '#fff',
// },
// emphasis: { // 高亮状态下的样式
// areaColor: '#e9fbf1'
// }
// }
// },
geo: {
map: 'china',
roam: true, // 允许缩放平移
zoom: 1.5, // 初始缩放级别
center: [106.55, 29.57], // 聚焦重庆中心坐标
itemStyle: {
normal: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#0A2A5A' // 顶部颜色
}, {
offset: 1, color: '#081845' // 底部颜色
}]
},
borderColor: '#1B7CBD', // 更明亮的边界色
borderWidth: 1.2,
shadowColor: 'rgba(0, 168, 255, 0.4)', // 蓝色投影
shadowBlur: 15,
shadowOffsetX: 5,
shadowOffsetY: 10
},
emphasis: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0, color: '#8CD0FF'
}, {
offset: 1, color: '#1B6FCF'
}]
},
borderWidth: 2,
shadowBlur: 25
}
},
regions: [{
name: '重庆',
itemStyle: {
areaColor: '#1665AB', // 重庆主色调加深
borderColor: '#24CFF4' // 边界高亮
}
}]
}
},
seriesOption: {
type: 'map',
// roam: false,
zoom: 1.2,
nameMap: {
'china': '中国'
},
label: {
normal: {
show: true,
textStyle: { //省份标签
color: '#fff',
fontSize: 9
},
color: "#fff",
formatter: p => {
return p.name;
}
},
emphasis: {
show: true,
textStyle: {
color: '#f75a00',
},
}
},
itemStyle: {
normal: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#1B6FCF' // 顶部浅色
}, {
offset: 1,
color: '#0E396D' // 底部深色
}]
},
// 增强立体效果
borderColor: 'rgba(36,207,244,0.9)', // 更明亮的边界色
borderWidth: 2,
shadowColor: 'rgba(36,207,244,0.5)', // 增强投影透明度
shadowBlur: 10, // 增大模糊半径
shadowOffsetX: 0,
shadowOffsetY: 15 // 增大纵向偏移
},
emphasis: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: '#06e0fc' // 高亮中心
}, {
offset: 1,
color: '#1B6FCF'
}]
},
borderWidth: 2,
shadowBlur: 30
}
},
// 添加光照效果
light: {
main: {
intensity: 2, // 增强主光源强度
shadow: true,
shadowQuality: 'ultra', // 最高质量阴影
alpha: 45 // 调整光线角度
},
ambient: {
intensity: 1.2 // 增强环境光
}
}
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。