Vue+Echarts 3D地圖效果的實(shí)例代碼
更新時(shí)間：2025年12月03日 10:35:32 作者：沉默是金~
文章介紹了如何使用Vue+Echarts3D實(shí)現(xiàn)地圖效果,并分享了index.vue組件和mapOptions.js的核心方法,希望對(duì)大家有所幫助
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">安全生產(chǎn)天數(shù)(天)</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">劉崗莊站本年度發(fā)電情況(萬(wàn)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>年度電量計(jì)劃(萬(wàn)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>完成情況(萬(wàn)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">劉崗莊站月度發(fā)電情況(萬(wàn)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>月度電量計(jì)劃(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>完成情況(萬(wàn)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">并網(wǎng)容量 <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">實(shí)時(shí)功率 <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">天氣預(yù)報(bào)</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">海晶站本年度發(fā)電情況(萬(wàn)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>年度電量計(jì)劃(萬(wàn)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>完成情況(萬(wàn)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">海晶站月度發(fā)電情況(萬(wàn)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" />-->
<!-- 進(jìn)度池 -->
<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>月度電量計(jì)劃(萬(wàn)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>完成情況(萬(wàn)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>
<!-- 其他組件內(nèi)容 -->
</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) {
// 當(dāng)前日期已經(jīng)是第二天了
this.addOneDay();
}
}
},
created() {
localStorage.removeItem('time')
this.storeDateToLocalStorage()
this.jsonData = {
numberFlip:1028, //安全生產(chǎn)天數(shù)
screenTitle:'華電新能源集團(tuán)股份有限公司天津分公司新能源駕駛艙', //大標(biāo)題
mapTtile:'重慶市', //小標(biāo)題
yearValue:6250, //年度用電計(jì)劃（度）
yearComplete:6002, //完成情況（度）
monthValue:470, //月度用電計(jì)劃（度）
monthComplete:283, //完成情況（度）
yearValueH:39400, //年度用電計(jì)劃（度）
yearCompleteH:37383, //完成情況（度）
monthValueH:5400, //月度用電計(jì)劃（度）
monthCompleteH:4238, //完成情況（度）
bwrl:'1000MW',
ssgl:'575 MW',
//日負(fù)荷曲線
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))
//和風(fēng)天氣插件調(diào)用
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數(shù)據(jù)渲染到頁(yè)面
this.updateDate(1); // 先執(zhí)行一次更新日期的方法
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配置項(xiàng)
this.$nextTick(() => {
setTimeout(() => {
const dom = document.getElementById('he-plugin-standard')
dom.style.width = '100%'
}, 2000)
})
this.setMapData() // 地圖
this.setLineData() //能耗趨勢(shì)
this.myChartMapResize()
this.myChartLineResize()
},
beforeDestroy() {
clearInterval(this.timer); // 在組件銷(xiāo)毀前清除定時(shí)器
},
methods: {
// 獲取當(dāng)前日期的早上 6 點(diǎn)整的時(shí)間并存儲(chǔ)到 localStorage 中
storeDateToLocalStorage() {
const now = new Date();
const today6am = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 6, 0, 0, 0); // 設(shè)置為今天的早上 6 點(diǎn)整
localStorage.setItem('startDate', today6am.getTime()); // 將時(shí)間戳存儲(chǔ)到 localStorage 中
},
// 判斷當(dāng)前日期是否已經(jīng)過(guò)了一天
isPastOneDay() {
const storedDate = parseInt(localStorage.getItem('startDate'), 10); // 從 localStorage 中獲取存儲(chǔ)的時(shí)間戳
if (!storedDate) {
// 如果沒(méi)有存儲(chǔ)過(guò)時(shí)間戳，說(shuō)明是第一次訪問(wèn)，需要存儲(chǔ)當(dāng)前時(shí)間
this.storeDateToLocalStorage();
return false; // 返回 false 表示不需要加1
}
const now = new Date();
const oneDayInMilliseconds = 24 * 60 * 60 * 1000; // 一天的毫秒數(shù)
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')
// 在需要的地方調(diào)用 isPastOneDay() 方法來(lái)判斷是否已經(jīng)過(guò)了一天，如果是的話執(zhí)行相應(yīng)的操作
// if(time){
// this.jsonData.numberFlip = Number(time)
// }
// else{
if (this.isPastOneDay()) {
// 執(zhí)行日期加1的操作
// 這里可以根據(jù)你的具體邏輯來(lái)實(shí)現(xiàn)日期的加1操作
// ...
this.jsonData.numberFlip += 1;
}else{
this.jsonData.numberFlip = this.jsonData.numberFlip
}
// }
localStorage.removeItem('time')
localStorage.setItem('time',this.jsonData.numberFlip)
},
//地圖
setMapData(){
// 初始化統(tǒng)計(jì)圖對(duì)象
var chartDom = document.getElementById('map');
this.myChartMap = echarts.init(chartDom);
var res = JSON.parse(jsonMap)
console.log(res)
// 得到結(jié)果后，關(guān)閉動(dòng)畫(huà)
// this.myChartMap.hideLoading();
// 注冊(cè)地圖(數(shù)據(jù)放在axios返回對(duì)象的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方法中添加預(yù)設(shè)坐標(biāo)
const presetCoords = {
'北碚區(qū)': [106.4375, 29.8254],
'奉節(jié)縣': [109.4639, 31.0185], // 新增奉節(jié)坐標(biāo)
'五峰土家族自治縣':[110.82, 30.18],// 新增巫溪坐標(biāo)
'三臺(tái)縣':[105.09, 31.10], //三臺(tái)縣坐標(biāo)
'江北區(qū)': [106.5723, 29.6067], // 重慶江北區(qū)中心點(diǎn)
'江安縣':[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: ['并網(wǎng)容量 1000MW','實(shí)時(shí)功率 575MW'],
textStyle: {
color: '#000', // 設(shè)置圖例文本顏色為白色
},
},
};
option.geo = {
show: false,
map: 'GX',
zoom: 1.2, //當(dāng)前視角的縮放比例
roam: true, //是否開(kāi)啟平游或縮放
center: undefined,
itemStyle: {
areaColor: '#F4E925'
},
}
option.series = [
{
name: '重慶市',
mapType: 'GX',
zoom: 1, //當(dāng)前視角的縮放比例
// roam: true, //是否開(kāi)啟平游或縮放
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: [
// 奉節(jié) -> 五峰土家族自治縣
{
coords: [
presetCoords['奉節(jié)縣'],
presetCoords['五峰土家族自治縣']
],
visualMap:false,
},
// 北碚 -> 三臺(tái)縣
{
coords: [
presetCoords['北碚區(qū)'],
presetCoords['三臺(tái)縣']
],
visualMap:false,
},
// 江北區(qū) -> 珙縣
{
coords: [
presetCoords['江北區(qū)'],
presetCoords['江安縣']
],
visualMap:false,
}
],
effect: {
type:'solid',
show: true,
period: 4, //箭頭指向速度，值越小速度越快
trailLength: 0.4, //特效尾跡長(zhǎng)度[0,1]值越大，尾跡越長(zhǎng)重
symbol: 'pin', //箭頭圖標(biāo)
// symbol: planePath,
symbolSize: 9, //圖標(biāo)大小
color:'#FFFF00',
},
lineStyle: {
normal: {
color:'rgb(224,203,112)',
width: 1, //尾跡線條寬度
opacity:0.4, //尾跡線條透明度
curveness: .3, //尾跡線條曲直度
},
},
},
{
name: '',//series名稱
type: 'effectScatter',//散點(diǎn)類(lèi)型
coordinateSystem: 'geo',// series坐標(biāo)系類(lèi)型
rippleEffect: {
brushType: 'fill'
},
normal: {
show: true,
// 提示內(nèi)容
formatter: params => {
return params.name;
},
position: 'top', // 提示方向
color: '#fff'
},
emphasis: {
show: true, // 點(diǎn)
itemStyle: {
areaColor: '#F4E925'
}
},
itemStyle: {
normal: {
color: '#F4E925',
shadowBlur: 10,
shadowColor: '#000'
}
},
// symbol:'pin', // 散點(diǎn)樣式'pin'（標(biāo)注）、'arrow'（箭頭）
// data: pointData,
data:[ // 在這里自定義散點(diǎn)位置和顯示文本
{ name: '', value: [106.4375, 29.8254, 246813],
label: {
show: true,
position: 'right',
offset: [15, 0], // 設(shè)置名稱向右偏移10像素
formatter: '',
textStyle: {
fontSize: 16, // 設(shè)置字體大小
color: '#31e7c6' // 設(shè)置字體顏色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 設(shè)置散點(diǎn)的顏色為紅色
shadowBlur: 10, // 增大陰影范圍
shadowColor: '#ff4444', // 更醒目的陰影顏色
borderWidth: 1, // 增加邊框?qū)挾?
borderColor: '#ff0000' // 邊框顏色
}
},
rippleEffect: {
brushType: 'fill', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
scale:5, // 設(shè)置光影擴(kuò)散的范圍大小
period: 6, // 設(shè)置光影擴(kuò)散的周期
number:2
},
animation: true // 開(kāi)啟動(dòng)畫(huà)效果
},
{ name: '', value: [109.4639, 31.0185, 135468],
label: {
show: true,
position: 'right',
offset: [15, 0], // 設(shè)置名稱向右偏移10像素
formatter: '',
textStyle: {
fontSize: 16, // 設(shè)置字體大小
color: '#31e7c6' // 設(shè)置字體顏色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 設(shè)置散點(diǎn)的顏色為紅色
shadowBlur: 10, // 增大陰影范圍
shadowColor: '#ff4444', // 更醒目的陰影顏色
borderWidth: 1, // 增加邊框?qū)挾?
borderColor: '#ff0000' // 邊框顏色
}
},
rippleEffect: {
// brushType: 'stroke', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
// scale:5, // 設(shè)置光影擴(kuò)散的范圍大小
// period: 3 // 設(shè)置光影擴(kuò)散的周期
brushType: 'fill', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
scale:5, // 設(shè)置光影擴(kuò)散的范圍大小
period: 6, // 設(shè)置光影擴(kuò)散的周期
number:2
},
animation: true // 開(kāi)啟動(dòng)畫(huà)效果
},
{ name: '', value: [106.5055, 29.5331, 579135],
label: {
show: true,
position: 'right',
offset: [15, 0], // 設(shè)置名稱向右偏移10像素
formatter: '',
textStyle: {
fontSize: 16, // 設(shè)置字體大小
color: '#31e7c6' // 設(shè)置字體顏色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 設(shè)置散點(diǎn)的顏色為紅色
shadowBlur: 10, // 增大陰影范圍
shadowColor: '#ff4444', // 更醒目的陰影顏色
borderWidth: 1, // 增加邊框?qū)挾?
borderColor: '#ff0000' // 邊框顏色
}
},
rippleEffect: {
// brushType: 'stroke', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
// scale:6, // 設(shè)置光影擴(kuò)散的范圍大小
// effectScale: 4,
// period: 6, // 設(shè)置光影擴(kuò)散的周期
// brushSize: 1
brushType: 'fill', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
scale:5, // 設(shè)置光影擴(kuò)散的范圍大小
period: 6, // 設(shè)置光影擴(kuò)散的周期
number:2
},
animation: true // 開(kāi)啟動(dòng)畫(huà)效果
},
],
// 在這里添加更多的數(shù)據(jù)項(xiàng)]
symbolSize: function (val) {
// 放大基礎(chǔ)散點(diǎn)尺寸（原值6/10）
return val[2] === mapDataList[0].value ? 16 : 12;
},
showEffectOn: 'render', //加載完畢顯示特效
},
]
this.myChartMap.setOption(option);
window.addEventListener('resize', this.myChartMapResize) //監(jiān)聽(tīng)屏幕變化時(shí)自適應(yīng)圖表
//})
},
//折現(xiàn)圖
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: '日負(fù)荷曲線',
textStyle: {
color:'#fff'
}
},
{
text: '單位:萬(wàn)kW·h',
left: '80%',
textStyle: {
fontSize: 16,
color: '#fff',
},
},
],
tooltip: {
trigger: 'axis',
},
legend: {
data: [],
textStyle: {
color: '#fff', // 設(shè)置圖例文本顏色為白色
},
},
grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true,
show: false,
left: '1%', // 設(shè)置左邊距為 10%
right: '0%', // 設(shè)置右邊距為 10%
bottom: '10%', // 設(shè)置下邊距為 10%
containLabel: true, // 自動(dòng)計(jì)算并包含坐標(biāo)軸標(biāo)簽的大小
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dateList,
axisLabel: {
color: '#fff', // 設(shè)置X軸標(biāo)簽顏色為白色
},
},
yAxis: {
type: 'value',
// scale: true,
// name: '單位:℃',
// 去掉網(wǎng)格線
splitLine: {
show: false,
},
scale:true,
axisLabel: {
color: '#fff', // 設(shè)置Y軸標(biāo)簽顏色為白色
},
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%', // 設(shè)置柱狀圖之間的間距為 20%
barCategoryGap: '30%', // 設(shè)置不同系列的柱狀圖之間的間距為 30%
barWidth: 5,
itemStyle: {
normal: {
color: '#31e7c6',
}
}
// yAxisIndex: 0,
},
],
}
option && this.myChartLine.setOption(option)
window.addEventListener('resize', this.myChartLineResize) //監(jiān)聽(tīng)屏幕變化時(shí)自適應(yīng)圖表
},
myChartMapResize(){
if (this.myChartMap) {
this.$nextTick(() => {
this.myChartMap.resize()
})
}
},
myChartLineResize(){
if (this.myChartLine) {
this.$nextTick(() => {
this.myChartLine.resize()
})
}
},
//全屏
fullScreen() {
// 切換全屏模式的函數(shù)
// 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>
// 確保沒(méi)有CSS樣式覆蓋
::v-deep .dv-border-box-11 polyline {
stroke: transparent !important; /* 排查此類(lèi)樣式 */
}
.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; /* 設(shè)置標(biāo)題顏色為紅色 */
}
::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; /* 修改百分比數(shù)字的字號(hào) */
color: #ffffff; /* 修改百分比數(shù)字的顏色 */
}
::v-deep dv-decoration-9 .bar {
background-color: #ff0000; /* 修改進(jìn)度條的背景顏色 */
}
::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(){
// 初始化統(tǒng)計(jì)圖對(duì)象
var chartDom = document.getElementById('map');
this.myChartMap = echarts.init(chartDom);
var res = JSON.parse(jsonMap)
console.log(res)
// 得到結(jié)果后，關(guān)閉動(dòng)畫(huà)
// this.myChartMap.hideLoading();
// 注冊(cè)地圖(數(shù)據(jù)放在axios返回對(duì)象的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方法中添加預(yù)設(shè)坐標(biāo)
const presetCoords = {
'北碚區(qū)': [106.4375, 29.8254],
'奉節(jié)縣': [109.4639, 31.0185], // 新增奉節(jié)坐標(biāo)
'五峰土家族自治縣':[110.82, 30.18],// 新增巫溪坐標(biāo)
'三臺(tái)縣':[105.09, 31.10], //三臺(tái)縣坐標(biāo)
'江北區(qū)': [106.5723, 29.6067], // 重慶江北區(qū)中心點(diǎn)
'江安縣':[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: ['并網(wǎng)容量 1000MW','實(shí)時(shí)功率 575MW'],
textStyle: {
color: '#000', // 設(shè)置圖例文本顏色為白色
},
},
};
option.geo = {
show: false,
map: 'GX',
zoom: 1.2, //當(dāng)前視角的縮放比例
roam: true, //是否開(kāi)啟平游或縮放
center: undefined,
itemStyle: {
areaColor: '#F4E925'
},
}
option.series = [
{
name: '重慶市',
mapType: 'GX',
zoom: 1, //當(dāng)前視角的縮放比例
// roam: true, //是否開(kāi)啟平游或縮放
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: [
// 奉節(jié) -> 五峰土家族自治縣
{
coords: [
presetCoords['奉節(jié)縣'],
presetCoords['五峰土家族自治縣']
],
visualMap:false,
},
// 北碚 -> 三臺(tái)縣
{
coords: [
presetCoords['北碚區(qū)'],
presetCoords['三臺(tái)縣']
],
visualMap:false,
},
// 江北區(qū) -> 珙縣
{
coords: [
presetCoords['江北區(qū)'],
presetCoords['江安縣']
],
visualMap:false,
}
],
effect: {
type:'solid',
show: true,
period: 4, //箭頭指向速度，值越小速度越快
trailLength: 0.4, //特效尾跡長(zhǎng)度[0,1]值越大，尾跡越長(zhǎng)重
symbol: 'pin', //箭頭圖標(biāo)
// symbol: planePath,
symbolSize: 9, //圖標(biāo)大小
color:'#FFFF00',
},
lineStyle: {
normal: {
color:'rgb(224,203,112)',
width: 1, //尾跡線條寬度
opacity:0.4, //尾跡線條透明度
curveness: .3, //尾跡線條曲直度
},
},
},
{
name: '',//series名稱
type: 'effectScatter',//散點(diǎn)類(lèi)型
coordinateSystem: 'geo',// series坐標(biāo)系類(lèi)型
rippleEffect: {
brushType: 'fill'
},
normal: {
show: true,
// 提示內(nèi)容
formatter: params => {
return params.name;
},
position: 'top', // 提示方向
color: '#fff'
},
emphasis: {
show: true, // 點(diǎn)
itemStyle: {
areaColor: '#F4E925'
}
},
itemStyle: {
normal: {
color: '#F4E925',
shadowBlur: 10,
shadowColor: '#000'
}
},
// symbol:'pin', // 散點(diǎn)樣式'pin'（標(biāo)注）、'arrow'（箭頭）
// data: pointData,
data:[ // 在這里自定義散點(diǎn)位置和顯示文本
{ name: '', value: [106.4375, 29.8254, 246813],
label: {
show: true,
position: 'right',
offset: [15, 0], // 設(shè)置名稱向右偏移10像素
formatter: '',
textStyle: {
fontSize: 16, // 設(shè)置字體大小
color: '#31e7c6' // 設(shè)置字體顏色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 設(shè)置散點(diǎn)的顏色為紅色
shadowBlur: 10, // 增大陰影范圍
shadowColor: '#ff4444', // 更醒目的陰影顏色
borderWidth: 1, // 增加邊框?qū)挾?
borderColor: '#ff0000' // 邊框顏色
}
},
rippleEffect: {
brushType: 'fill', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
scale:5, // 設(shè)置光影擴(kuò)散的范圍大小
period: 6, // 設(shè)置光影擴(kuò)散的周期
number:2
},
animation: true // 開(kāi)啟動(dòng)畫(huà)效果
},
{ name: '', value: [109.4639, 31.0185, 135468],
label: {
show: true,
position: 'right',
offset: [15, 0], // 設(shè)置名稱向右偏移10像素
formatter: '',
textStyle: {
fontSize: 16, // 設(shè)置字體大小
color: '#31e7c6' // 設(shè)置字體顏色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 設(shè)置散點(diǎn)的顏色為紅色
shadowBlur: 10, // 增大陰影范圍
shadowColor: '#ff4444', // 更醒目的陰影顏色
borderWidth: 1, // 增加邊框?qū)挾?
borderColor: '#ff0000' // 邊框顏色
}
},
rippleEffect: {
// brushType: 'stroke', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
// scale:5, // 設(shè)置光影擴(kuò)散的范圍大小
// period: 3 // 設(shè)置光影擴(kuò)散的周期
brushType: 'fill', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
scale:5, // 設(shè)置光影擴(kuò)散的范圍大小
period: 6, // 設(shè)置光影擴(kuò)散的周期
number:2
},
animation: true // 開(kāi)啟動(dòng)畫(huà)效果
},
{ name: '', value: [106.5055, 29.5331, 579135],
label: {
show: true,
position: 'right',
offset: [15, 0], // 設(shè)置名稱向右偏移10像素
formatter: '',
textStyle: {
fontSize: 16, // 設(shè)置字體大小
color: '#31e7c6' // 設(shè)置字體顏色
},
},
itemStyle: {
normal: {
color: '#d1e561', // 設(shè)置散點(diǎn)的顏色為紅色
shadowBlur: 10, // 增大陰影范圍
shadowColor: '#ff4444', // 更醒目的陰影顏色
borderWidth: 1, // 增加邊框?qū)挾?
borderColor: '#ff0000' // 邊框顏色
}
},
rippleEffect: {
// brushType: 'stroke', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
// scale:6, // 設(shè)置光影擴(kuò)散的范圍大小
// effectScale: 4,
// period: 6, // 設(shè)置光影擴(kuò)散的周期
// brushSize: 1
brushType: 'fill', // 設(shè)置光影擴(kuò)散效果為邊界擴(kuò)散
scale:5, // 設(shè)置光影擴(kuò)散的范圍大小
period: 6, // 設(shè)置光影擴(kuò)散的周期
number:2
},
animation: true // 開(kāi)啟動(dòng)畫(huà)效果
},
],
// 在這里添加更多的數(shù)據(jù)項(xiàng)]
symbolSize: function (val) {
// 放大基礎(chǔ)散點(diǎn)尺寸（原值6/10）
return val[2] === mapDataList[0].value ? 16 : 12;
},
showEffectOn: 'render', //加載完畢顯示特效
},
]
this.myChartMap.setOption(option);
window.addEventListener('resize', this.myChartMapResize) //監(jiān)聽(tīng)屏幕變化時(shí)自適應(yīng)圖表
//})
},mapOptions.js
export const mapOption = {
basicOption: {
title: [{
left: 'left',
text: '全國(guó)',
textStyle: {
fontSize: 16,
color: '#fff'
},
},
{
text: "",
left: 'left',
top: '30',
textStyle: {
fontSize: 16,
color: '#24CFF4'
},
}
],
tooltip: {//提示框組件
trigger: 'item',//觸發(fā)類(lèi)型,'item'數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類(lèi)目軸的圖表中使用。 'axis'坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會(huì)使用類(lèi)目軸的圖表中使用。
// triggerOn:"none",//提示框觸發(fā)的條件,'mousemove'鼠標(biāo)移動(dòng)時(shí)觸發(fā)。'click'鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)。'mousemove|click'同時(shí)鼠標(biāo)移動(dòng)和點(diǎn)擊時(shí)觸發(fā)。'none'不在 'mousemove' 或 'click' 時(shí)觸發(fā)
showContent: true,//是否顯示提示框浮層
alwaysShowContent: false,//是否永遠(yuǎn)顯示提示框內(nèi)容
showDelay: 0, //浮層顯示的延遲，單位為 ms
hideDelay: 100, //浮層隱藏的延遲，單位為 ms
enterable: false, //鼠標(biāo)是否可進(jìn)入提示框浮層中
confine: false, //是否將 tooltip 框限制在圖表的區(qū)域內(nèi)
transitionDuration: 0.4, //提示框浮層的移動(dòng)動(dòng)畫(huà)過(guò)渡時(shí)間，單位是 s,設(shè)置為 0 的時(shí)候會(huì)緊跟著鼠標(biāo)移動(dòng)
backgroundColor:"transparent", //標(biāo)題背景色
// position:['50%', '50%'], //提示框浮層的位置，默認(rèn)不設(shè)置時(shí)位置會(huì)跟隨鼠標(biāo)的位置,[10, 10],回掉函數(shù)，inside鼠標(biāo)所在圖形的內(nèi)部中心位置，top、left、bottom、right鼠標(biāo)所在圖形上側(cè)，左側(cè)，下側(cè)，右側(cè)，
borderColor: "#ccc", //邊框顏色
borderWidth: 0, //邊框線寬
padding: 0, //圖例內(nèi)邊距，單位px 5 [5, 10] [5,10,5,10]
borderRadius: 5,
textStyle: {
fontSize: 10,
}, //文本樣式
// formatter: '',
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>';
}
},
//左側(cè)導(dǎo)航視覺(jué)映射組件
visualMap: {
type: 'continuous', // 連續(xù)型
min: 0,// 值域最小值，必須參數(shù)
max: 0,// 值域最大值，必須參數(shù)
text: ['數(shù)量'],
left: 0,
bottom: 0,
calculable: true,
seriesIndex: [0],
show:false,
inRange: {
color: ['#24CFF4', '#2E98CA', '#1E62AC']// 指定數(shù)值從低到高時(shí)的顏色變化
},
textStyle: {
color: '#24CFF4'// 值域控件的文本顏色
}
},
// 新建一個(gè)地理坐標(biāo)系 geo
// geo: {
// map: 'china',//地圖類(lèi)型為中國(guó)地圖
// itemStyle:{ // 定義樣式
// normal:{ // 普通狀態(tài)下的樣式
// areaColor:'#6699CC',
// borderColor: '#fff',
// },
// emphasis: { // 高亮狀態(tài)下的樣式
// areaColor: '#e9fbf1'
// }
// }
// },
geo: {
map: 'china',
roam: true, // 允許縮放平移
zoom: 1.5, // 初始縮放級(jí)別
center: [106.55, 29.57], // 聚焦重慶中心坐標(biāo)
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)', // 藍(lán)色投影
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', // 重慶主色調(diào)加深
borderColor: '#24CFF4' // 邊界高亮
}
}]
}
},
seriesOption: {
type: 'map',
// roam: false,
zoom: 1.2,
nameMap: {
'china': '中國(guó)'
},
label: {
normal: {
show: true,
textStyle: { //省份標(biāo)簽
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' // 底部深色
}]
},
// 增強(qiáng)立體效果
borderColor: 'rgba(36,207,244,0.9)', // 更明亮的邊界色
borderWidth: 2,
shadowColor: 'rgba(36,207,244,0.5)', // 增強(qiáng)投影透明度
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, // 增強(qiáng)主光源強(qiáng)度
shadow: true,
shadowQuality: 'ultra', // 最高質(zhì)量陰影
alpha: 45 // 調(diào)整光線角度
},
ambient: {
intensity: 1.2 // 增強(qiáng)環(huán)境光
}
}
}
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue+Echarts封裝成組件使用及說(shuō)明
- Vue3+Echarts常用屬性之折線圖詳解
- vue3中echarts圖表在頁(yè)面刷新后無(wú)法自適應(yīng)改變大小的解決過(guò)程
- vue使用echarts基本原理以及報(bào)錯(cuò)提示undefined(reading?init)的解決過(guò)程
- 基于Vue3+ECharts實(shí)現(xiàn)動(dòng)態(tài)地圖切換與平滑過(guò)渡的動(dòng)畫(huà)效果
- vue項(xiàng)目中使用ECharts,避免瀏覽器卡死的解決方案
- vue3+Echarts實(shí)現(xiàn)立體柱狀圖的示例代碼
相關(guān)文章
解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no
這篇文章主要給大家介紹了關(guān)于如何解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no-mutating-props)的相關(guān)資料,文中通過(guò)代碼將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
解決打包后出現(xiàn)錯(cuò)誤y.a.addRoute is not a function的
這篇文章主要介紹了解決打包后出現(xiàn)y.a.addRoute is not a function的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue側(cè)邊欄動(dòng)態(tài)生成下級(jí)菜單的方法
今天小編就為大家分享一篇vue側(cè)邊欄動(dòng)態(tài)生成下級(jí)菜單的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue 表情包輸入組件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例
下面小編就為大家分享一篇VUE2 前端實(shí)現(xiàn) 靜態(tài)二級(jí)省市聯(lián)動(dòng)選擇select的示例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02![vue中使用[provide/inject]實(shí)現(xiàn)頁(yè)面reload的方法](http://img.jbzj.com/images/xgimg/bcimg5.png)
vue中使用[provide/inject]實(shí)現(xiàn)頁(yè)面reload的方法
這篇文章主要介紹了在vue中使用[provide/inject]實(shí)現(xiàn)頁(yè)面reload的方法，文中給大家提到了在vue中實(shí)現(xiàn)頁(yè)面刷新不同的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
vue-admin-box第一步npm?install時(shí)報(bào)錯(cuò)的處理
這篇文章主要介紹了vue-admin-box第一步npm?install時(shí)報(bào)錯(cuò)的處理方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解input組合事件如何監(jiān)聽(tīng)輸入中文
這篇文章主要為大家介紹了input組合事件如何監(jiān)聽(tīng)輸入中文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js路由組件vue-router使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
3分鐘了解vue數(shù)據(jù)劫持的原理實(shí)現(xiàn)
這篇文章主要介紹了3分鐘了解vue數(shù)據(jù)劫持的原理實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05