Vue+Echarts 3D地图效果的实例代码

<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) //监听屏幕变化时自适应图表
        //})
      },

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  // 增强环境光
      }
    }
  }
}