Vue+Echarts 3D地图效果
效果在最下方展示
1、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%" /><divstyle="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: 1brushType: '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, // 最小值为 0max: 100, // 最大值为 100interval: 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.documentElementif (document.fullscreenElement) {// 退出全屏模式this.isFullScreen = falsethis.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 = truethis.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: 1brushType: '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, //浮层显示的延迟，单位为 mshideDelay: 100, //浮层隐藏的延迟，单位为 msenterable: 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 // 增强环境光}}}
}
