<template>
  <div class="main">
      <div class="energyPlanning">
        <div class="energyTop">
          <div class="title" text="能源规划-政策新闻">能源规划-政策新闻</div>
          <div class="content">
            <div v-for="(item,index) in news" :key="index">
               {{item.Journalism}}
            </div>
          </div>
        </div>
        <div class="energyBottom">
          <div class="title" text="污染企业监测">污染企业监测</div>
          <div class="content">
            <div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px" @click="handlePop(1)"/></div>
            <div id="echartsOne"></div>
          </div>
        </div>
      </div>
      <div class="powerProduction">
        <div class="title" text="电力生产">电力生产</div>
        <div class="content">
          <div class="powerProductionTop">
            <div class="one">
              <div class="twoTitle" text="2022年盐城装机容量">2022年盐城装机容量</div>
              <div class="oneContent">
                <div class="powerCount">
                  <div class="powerImg"><img src="../assets/images/powerCount.png"/></div>
                  <div class="powerNumber">
                    <span style="color:yellow;font-size:30px;font-weight: 700;font-family: auto;">{{capacity}}MW</span>
                    <span style="color:#ffffff">盐城电力生产总装机量</span>
                  </div>
                </div>
                <div class="echartsCount">
                  <div id="echartsTwo"></div>
                  <div class="btnCity">
                    <div class="btnCityList" :class="{'cityActive':cityActive==index}" v-for="(item,index) in city" :key="index" @click="cityChange(index)" :text="item.name">{{item.name}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="two">
              <div class="twoTitle" text="非统调光伏电站座数分布">非统调光伏电站座数分布</div>
              <div class="twoCount">
                <div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px"  @click="handlePop(2)"/></div>
                <div id="echartsThree"></div>
              </div>
            </div>
            <div class="three">
              <div class="twoTitle" text="非统调电厂">非统调电厂</div>
              <div class="threeCount">
                <div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px"  @click="handlePop(3)"/></div>
                <div id="echartsFour"></div>
              </div>
              </div> 
          </div>
          <div class="powerProductionDown">
            <div class="one">
              <div class="twoTitle" text="当日上网电量">当日上网电量</div>
              <div class="OneContent">
                <div id="echartsFive"></div>
                <div class="type">
                  <div class="typeChange" v-for="(item,index) in powerType" :key="index" :class="{'powerTypeAction':powerTypeAction==index}" :text="item.name" @click="typeChange(index)">{{item.name}}</div>
                </div>
              </div>
            </div>
            <div class="two">
              <div class="twoTitle" text="非统调光伏电站装机容量分布">非统调光伏电站装机容量分布</div>
              <div class="twoCount">
                <div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px" @click="handlePop(4)"/></div>
                <div id="echartsSix"></div>
              </div>
            </div>
            <div class="three">
              <div class="twoTitle" text="海上风电配套送出工程">海上风电配套送出工程</div>
              <div class="threeContent">
                <div class="seaCount">
                  <div class="seaNumber" v-for="(item,index) in seaCount" :key="index">
                    <div :style="{color:item.color}" style=" font-size: 30px;font-weight: 700;">{{item.count}}</div>
                    <div>{{item.name}}</div>
                  </div>
                </div>
                <div id="echartsSeven"></div>
              </div>
            </div> 
          </div>
        </div>
      </div>
      <div class="newEnergy">
        <div class="title" text="新能源产业链">新能源产业链</div>
        <div class="content">
          <div class="mapCity">
            <div class="cityBtn" v-for="(item,index) in mapCity" :key="index" :text="item.name" :class="{'mapCityAction':mapCityAction==index}" @click="mapCityChange(index)">{{item.name}}</div>
          </div>
           <div id="echartsMap"  ref="mapBar"></div>
        </div>
      </div>
      <div class="car">
        <div class="title" text="汽车产业数据">汽车产业数据</div>
        <div class="content">
          <div class="one">
            <div class="twoTitle" text="汽车产业与工业复产率对比">汽车产业与工业复产率对比</div>
            <div class="oneContent">
              <div id="echartsEight"></div>
            </div>
          </div>
          <div class="two">
            <div class="twoTitle" text="汽车产业与工业复产率对比">汽车产业与工业复产率对比</div>
            <div class="twoContent">
              <div id="echartsNine"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="Bicarbon">
        <div class="title" text="绿色双碳">绿色双碳</div>
        <div class="content">
          <div class="one"></div>
          <div class="two">
            <div class="title" text="清洁能源电力消纳情况">清洁能源电力消纳情况</div>
            <div class="twoContent">
               <div class="twoTitle" text="清洁能源规模">清洁能源规模</div>
               <div class="cleanEnergy">
                 <div class="left">
                   <div class="cleanEnergyTop">
                     <div text="清洁能源装机容量" class="cleanEnergyText">清洁能源装机容量&nbsp;&nbsp;
                       <span style="color:yellow;font-weight: 700">2311.30</span>&nbsp;&nbsp;
                       <div class="cleanEnergyText" text="MV">MV</div></div>
                   </div>
                   <div id="echartsTen"></div>
                 </div>
                 <div class="right">
                    <div class="cleanEnergyTop">
                     <div text="清洁能发电量" class="cleanEnergyText">清洁能发电量&nbsp;&nbsp;
                       <span style="color:yellow;font-weight: 700">39.82</span>&nbsp;&nbsp;
                       <div class="cleanEnergyText" text="亿千瓦时">亿千瓦时</div></div>
                   </div>
                   <div id="echartsEleven"></div>
                 </div>
               </div>
            </div>
          </div>
          <div class="three">
            <div class="first">
              <div class="twoTitle" text="盐城市新能源发电量增长">盐城市新能源发电量增长</div>
              <div class="threeContent">
                <div id="echartsTwelve"></div>
              </div>
            </div>
            <div class="second">
               <div class="twoTitle" text="盐城市发电量及占比">盐城市发电量及占比</div>
               <div class="secondContent">
                 <div id="echartsThirteen"></div>
               </div>
            </div>
          </div>
        </div>
      </div>
      <div class="meteorological">
        <div class="title" text="盐城能源气象相关数据">盐城能源气象相关数据</div>
        <div class="content">
          <div class="one">
            <div class="first">
              <div class="twoTitle" text="近15日天气历史记录">近15日天气历史记录</div>
              <div class="oneContent">
                <div id="echartsFourteen"></div>
              </div>
            </div>
            <div class="second">
              <div class="twoTitle" text="台风实时数据">台风实时数据</div>
              <div class="secondContent">
                <div id="echartsFifteen"></div>
              </div>
            </div>
            <div class="third">
              <div class="twoTitle" text="设备故障数量统计图">设备故障数量统计图</div>
              <div class="thirdContent">
                <div id="echartsSixteen"></div>
                <div id="echartsSeventeen"></div>
              </div>
            </div>
          </div>
          <div class="two">
            <div class="first">
              <div class="twoTitle" text="2022年台风期间设备故障数量分布">2022年台风期间设备故障数量分布</div>
              <div class="twoContent">
                <div class="count">
                  <div style="color:rgb(255,204,0);font-size:40px;font-family: inherit;font-weight: 700;height: 52%;">19</div>
                  <div style="color:#ffffff;font-size:13px;">易损线路/开关共计</div>
                </div>
                <div class="select">
                  <el-select v-model="selectValue" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                </el-select>
                </div>
                <div class="iconYisun">易损线路/开关</div>
                <div id="echartsSmallMap" ref="mapBars"></div>
              </div>
            </div>
            <div class="second">
              <div class="twoTitle" text="台风期配电网易发故障设备清单">台风期配电网易发故障设备清单</div>
              <div class="secondContent">
                 <el-table
                      :data="tableData"
                      style="width: 100%"
                       height="100%" 
                       stripe
                      >
                      <el-table-column label="序号" align="center" width="50">
                        <template slot-scope="scop">
                          {{ scop.$index + 1 }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="shiqu"
                        label="市区"
                       >
                      </el-table-column>
                      <el-table-column
                        prop="yunweizhan"
                        label="运维站"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="biandianzhan"
                        label="变电站"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="yisun"
                        label="易损线路/开关"
                        show-overflow-tooltip
                        >
                      </el-table-column>
                      <el-table-column
                        prop="guzhang"
                        label="故障发生时间"
                        show-overflow-tooltip
                        >
                      </el-table-column>
                    </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
     <div class="componentShow" v-if="modelOthers">
      <keep-alive>
        <component
          :is="componentShow"
          :popName = 'popName'
          :popTableShow = 'popTableShow'
          :popTableData1 = 'popTableData1'
          :popTableData2 = 'popTableData2'
          :popTableData3 = 'popTableData3'
          :popTableData4 = 'popTableData4'
          :popTableData5 = 'popTableData5'
          :popTableData6 = 'popTableData6'
          :popTableData7 = 'popTableData7'
          :popTableData8 = 'popTableData8'
          :popTableData9 = 'popTableData9'
          :popTableData10 = 'popTableData10'
          :popTableData11 = 'popTableData11'
          :popTableData12 = 'popTableData12'
          :popTableData13 = 'popTableData13'
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import geoJson from '../json/320900.json';
import axios from 'axios'
import pop from './pop.vue'
import {getData} from '../api/index.js'
export default {
  data(){
    return{
      capacity:0, //装机总量
      news:[
        {
          Journalism:''
        },
      ], //新闻内容
      popTableShow:0,
      modelOthers:false,
      componentShow: "",
      popName:'',
      selectValue:'易损线路开关',
       options: [{
          value: '1',
          label: '易损线路开关'
        }],
      cityActive:null,
      powerTypeAction:null,
      mapCityAction:0,
      city:[
        {name:'风电'},
        {name:'光伏'},
        {name:'光热一体'},
        {name:'火电'},
        {name:'水电'},
      ],
      powerType:[
        {name:'光伏发电'},
        {name:'风力发电'},
        {name:'余电上网光伏'},
        {name:'电厂'},
      ],
      seaCount:[
        {count:'69.4',name:'国华东台新建线路(公里)',color:'rgb(5,204,148)'},
        {count:'50.8',name:'国能大丰H5新建线路(公里)',color:'rgb(30,140,189)'},
        {count:'43',name:'龙源大丰H4新建线路(公里)',color:'rgb(30,140,189)'},
        {count:'4.1',name:'华能射阳南区H1新建线路(公里)',color:'rgb(255,152,70)'},
      ],
      mapCity:[
        {name:'建湖县'},
        {name:'东台市'},
        {name:'盐都区'},
        {name:'射阳县'},
        {name:'滨海县'},
        {name:'大丰区'},
        {name:'响水县'},
        {name:'亭湖区'},
        {name:'阜宁县'},
      ],
      tableData:[
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
        {
          shiqu:'东台市',
          yunweizhan:'东台运维站',
          biandianzhan:'新海变',
          yisun:'20KV辛亥线251',
          guzhang:'2020/9/14 12:20'
        },
      ],
      popTableData1:[
        {
          xianqu:'亭湖区',
          yongdianliang:'13',
          tanpaifang:'1',
          qiyeshuliang:'12'
        },
        {
          xianqu:'东台市',
          yongdianliang:'13',
          tanpaifang:'1',
          qiyeshuliang:'12'
        },
        {
          xianqu:'响水县',
          yongdianliang:'13',
          tanpaifang:'1',
          qiyeshuliang:'12'
        },
      ],
      popTableData2:[],
      popTableData3:[],
      popTableData4:[],
      popTableData5:[
      ],
      popTableData6:[
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'光伏',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'在运'
        },
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'光伏',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'在建'
        },
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'光伏',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'退运'
        },
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'光伏',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'在运'
        },
      ],
      popTableData7:[
      ],
      popTableData8:[
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'火电',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'在运'
        },
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'火电',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'在建'
        },
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'火电',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'退运'
        },
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'火电',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'在运'
        },
      ],
      popTableData9:[
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'水电',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'在运'
        },
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'水电',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'在建'
        },
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'水电',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'退运'
        },
        {
          fadianchang:'毛竹沙风电',
          zhuangji:'300',
          fengdian:'水电',
          zuigao:'500kv',
          date:'2021-11-26 00:00:00',
          status:'在运'
        },
      ],
      popTableData10:[
        {
          fadianchang:'大唐大丰光伏电厂上网电量',
          shangwang:'1.1764',
        },
        {
          fadianchang:'阜宁光伏发电厂上网电量',
          shangwang:'1.1764',
        },
        {
          fadianchang:'大唐大丰光伏电厂上网电量',
          shangwang:'1.1764',
        },
        {
          fadianchang:'阜宁光伏发电厂上网电量',
          shangwang:'1.1764',
        },
      ],
      popTableData11:[
        {
          fadianchang:'滨海盐海光伏',
          shangwang:'2.065',
        },
        {
          fadianchang:'滨海盐海光伏',
          shangwang:'2.065',
        },
        {
          fadianchang:'滨海盐海光伏',
          shangwang:'2.065',
        },
        {
          fadianchang:'滨海盐海光伏',
          shangwang:'2.065',
        },
      ],
      popTableData12:[
        {
          fadianchang:'国华弶港风电上网电量',
          shangwang:'34.2434',
        },
        {
          fadianchang:'国华弶港风电上网电量',
          shangwang:'34.2434',
        },
        {
          fadianchang:'国华弶港风电上网电量',
          shangwang:'34.2434',
        },
        {
          fadianchang:'国华弶港风电上网电量',
          shangwang:'34.2434',
        },
      ],
      popTableData13:[
        {
          fadianchang:'陈家港上网电量',
          shangwang:'1.1764',
        },
        {
          fadianchang:'陈家港上网电量',
          shangwang:'1.1764',
        },
        {
          fadianchang:'陈家港上网电量',
          shangwang:'1.1764',
        },
        {
          fadianchang:'陈家港上网电量',
          shangwang:'1.1764',
        },
      ]
    }
  },
  mounted(){
    this.echartsSix();
    this.echartsSeven();
    this.echartsMap();
    this.echartsEight();
    this.echartsNine();
    this.echartsTen();
    this.echartsEleven();
    this.echartsTwelve();
    this.echartsThirteen();
    this.echartsFourteen();
    this.echartsFifteen();
    this.echartsSixteen();
    this.echartsSeventeen();
    this.echartsSmallMap();
    //查询新闻政策
    getData(
      {
        action:'one',
        key:'政策新闻'
      }
    ).then((res)=>{
      this.news = Object.keys(res.data.data).map((item,index)=>{
        return {Journalism:res.data.data[index].新闻内容}
      })
    })
     //查询污染企业监测
    getData(
      {
        action:'one',
        key:'两高行业用电量按区县汇总'
      }
    ).then((res)=>{
      let contaminatedData = [];
      contaminatedData = res.data.data
      this.echartsOne(contaminatedData);
    })
    //查询当日上网电量
    getData(
      {
        action:'one',
        key:'当日上网电量'
      }
    ).then((res)=>{
      let powerData = []
      powerData = res.data.data
      this.echartsFive(powerData);
      
    })
    //查询盐城装机容量
    getData(
      {
        action:'one',
        key:'盐城装机容量'
      }
    ).then((res)=>{
      let sumCapacity = [];
      let capacityData = res.data.data
      this.echartsTwo(capacityData);
      Object.keys(capacityData).map((item,index)=>{
        for (const key in capacityData[index]) {
          sumCapacity.push(Number(capacityData[index][key]))
        }
      })
      this.capacity = sumCapacity.reduce((x,y)=>x+y)
    })
     //查询非统调光伏电站座数
    getData(
      {
        action:'one',
        key:'非统调光伏电站座数'
      }
    ).then((res)=>{
      this.popTableData2 = res.data.data
      let powerStation = res.data.data
      this.echartsThree(powerStation);
    })
    //查询非统调电厂并网容量
    getData(
      {
        action:'one',
        key:'非统调电厂并网容量'
      }
    ).then((res)=>{
      this.popTableData3 = res.data.data
      this.echartsFour(this.popTableData3);
    })
  },
  methods:{
    cityChange(val){
      this.popTableShow = 0
      this.cityActive = val
      if (val == 0) {
        this.popName = '风电';
      }else if (val == 1) {
        this.popName = '光伏';
      }else if (val == 2) {
        this.popName = '光热一体';
      }else if (val == 3) {
        this.popName = '火电';
      }else if (val == 4) {
        this.popName = '水电';
      }
      getData(
            {
              action:'one',
              key:'装机容量'+this.popName
            }
          ).then((res)=>{
            this.modelOthers = true
            this.componentShow = 'pop';
            this.popTableShow = 5
           if (this.popName == '风电') {
             this.popTableData5 = res.data.data
            }else if (this.popName == '光伏') {
              this.popTableData6 = res.data.data
            }else if (this.popName == '光热一体') {
              this.popTableData7 = res.data.data
            }else if (this.popName == '火电') {
              this.popTableData8 = res.data.data
            }else if (this.popName == '水电') {
              this.popTableData9 = res.data.data
            }
          })
          
    },
    typeChange(val){
      this.popTableShow = 0
      this.powerTypeAction = val
      if (val == 0) {
        this.modelOthers = true
         this.componentShow = 'pop';
         this.popName = '光伏发电';
         this.popTableShow = 6
      }else if (val == 1) {
        this.modelOthers = true
         this.componentShow = 'pop';
         this.popName = '风力发电';
         this.popTableShow = 6
      }else if (val == 2) {
        this.modelOthers = true
         this.componentShow = 'pop';
         this.popName = '余电上网光伏';
         this.popTableShow = 6
      }else if (val == 3) {
        this.modelOthers = true
         this.componentShow = 'pop';
         this.popName = '电厂';
         this.popTableShow = 6
      }
    },
    mapCityChange(val){
      this.mapCityAction = val
    },
     echartsOne(contaminatedData){
       let regionData = [
         {
           name:'',
           value:''
        }
       ]
       //求企业数量和
      //  let enterpriseNum = contaminatedData.reduce((sum,e)=> sum + Number(e.企业数量 || 0),0)
       regionData = Object.keys(contaminatedData).map((item,index)=>{
         return {name:contaminatedData[index].区县,value: contaminatedData[index].企业数量}
       })
     var myChart = this.$echarts.init(document.getElementById("echartsOne"));
     var option ={
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: "企业污染",
            type: "pie",
            radius: ["20%", "63%"],
            center: ["50%", "50%"],
            roseType: "radius",
            emphasis: {
              label: {
                show: false
              }
            },
             labelLine: {
                  normal: {
                      show: true,
                      length: 35,
                  },
              },
             label: {
                  normal: {
                      show: true,
                      position: 'outside',
                      color: '#fff',
                      alignTo: 'none',
                      bleedMargin: 10,
                       backgroundColor: 'rgb(5,52,44)',
                      borderColor: '#08c386',
                      borderWidth: 1,
                      padding:[5,10,10,5],
                      // borderRadius: [0,0,14,0],
                      formatter: [ '{b}','{d}%'].join(':'),
                     
                  },
                 
            },
            // itemStyle: {
            //   shadowBlur: 1,
            //   shadowColor: 2,
            //   shadowOffsetX: 5,
            //   shadowOffsetY: 5
            // },
            data:regionData
          },
        {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.7,
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 1
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 2
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 0 * Math.PI / 180,
                         endAngle: 60 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 90 * Math.PI / 180,
                         endAngle: 150 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 180 * Math.PI / 180,
                         endAngle: 240 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 270 * Math.PI / 180,
                         endAngle: 330 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.12,
                     },
                     style: {
                         stroke: "rgb(18,45,71)",
                         fill: "transparent",
                         lineWidth: 20
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.06,
                     },
                     style: {
                         stroke: "rgb(29,41,109)",
                         fill: "transparent",
                         lineWidth: 10
                     },
                     silent: true
                 };
             },
             data: [0]
         }
        ]
      };
      myChart.setOption(option);
    },
    echartsTwo(capacityData){
      let capacitySum = null
      let capacityList = []
      // for (let i = 0; i < capacityData.length; i++) {
      //   capacitySum = Number(capacityData[i].风电) + Number(capacityData[i].光伏) + Number(capacityData[i].光热一体) + 
      //    Number(capacityData[i].火电) + Number(capacityData[i].水电)
      // }
       Object.keys(capacityData).map((item,index)=>{
        for (const key in capacityData[index]) {
           capacityList.push({name:key , value:capacityData[index][key]})
        }
      })
           var myChart = this.$echarts.init(document.getElementById("echartsTwo"));
           var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '电力生产总装机量',
                    type: 'pie',
                    labelLine: {
                        normal: {
                            show: true,
                         borderType: 'dotted',
                        },
                    },
                    label: {
                        show: true,
                        fontSize:15,
                        // position: [10,20],
                        color: '#fff',
                       backgroundColor: 'rgb(5,52,44)',
                        formatter: [ '{b}','{d}%'].join('\n'),
                    },
                    radius: [0, '70%'],
                    color: ['#57d1fa','#b6b91d','#8bd2b2','#57d1fa','#ff9374'],
                    roseType: 'area',
                    data: capacityList
                }
            ]
        }
        myChart.setOption(option);
    },
    echartsThree(powerStation){
      let  powerStationList = [];
      powerStationList = Object.keys(powerStation).map((item,index)=>{
        return {name:powerStation[index].地区, value: powerStation[index].电站数}
      })
     var myChart = this.$echarts.init(document.getElementById("echartsThree"));
     var option ={
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: "非统调光伏电站座数分布",
            type: "pie",
            radius: ["20%", "63%"],
            center: ["50%", "50%"],
            roseType: "radius",
            emphasis: {
              label: {
                show: false
              }
            },
             labelLine: {
                  normal: {
                      show: true,
                      length: 35,
                  },
              },
             label: {
                  normal: {
                      show: true,
                      position: 'outside',
                      color: '#fff',
                      alignTo: 'none',
                      bleedMargin: 10,
                       backgroundColor: 'rgb(5,52,44)',
                      borderColor: '#08c386',
                      borderWidth: 1,
                      padding:[5,10,10,5],
                      // borderRadius: [0,0,14,0],
                      formatter: [ '{b}','{d}%'].join(':'),
                     
                  },
                 
            },
            // itemStyle: {
            //   shadowBlur: 1,
            //   shadowColor: 2,
            //   shadowOffsetX: 5,
            //   shadowOffsetY: 5
            // },
            data:powerStationList
          },
        {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.7,
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 1
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 2
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 0 * Math.PI / 180,
                         endAngle: 60 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 90 * Math.PI / 180,
                         endAngle: 150 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 180 * Math.PI / 180,
                         endAngle: 240 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 270 * Math.PI / 180,
                         endAngle: 330 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.12,
                     },
                     style: {
                         stroke: "rgb(18,45,71)",
                         fill: "transparent",
                         lineWidth: 20
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.06,
                     },
                     style: {
                         stroke: "rgb(29,41,109)",
                         fill: "transparent",
                         lineWidth: 10
                     },
                     silent: true
                 };
             },
             data: [0]
         }
        ]
      };
      myChart.setOption(option);
    },
    echartsFour(powerPlant){
      let powerPlantType = [];
      let powerPlantCount = [];
      for (let i = 0; i < powerPlant.length; i++) {
        powerPlantType.push(powerPlant[i].非统调电源类型)
        powerPlantCount.push(powerPlant[i].实际并网容量)
      }
          var myChart = this.$echarts.init(document.getElementById("echartsFour"));
         var option = {
              tooltip: {
                  // confine: true,
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow',
                    },
                  // backgroundColor: 'rgba(3, 16, 42, 0.85)',
                  // borderColor: 'rgba(114, 190, 253, 0.6)',
                  // borderWidth: 1,
                  // padding: 12,
                  formatter: '{b0}<br>{a0}: {c0}',
                },
                // animation: true,
                grid: {
                  // top:'20%',
                  // bottom: '10%',
                  right: '8%',
                  left: '10%',
                },
                xAxis: {
                  data: powerPlantType,
                  axisLine: {
                    lineStyle: {
                        color: '#08c386'
                    }
                  },
                  axisTick: {
                    show:false,
                    lineStyle: {
                      color: '#08c386',
                    },
                  },
                  splitLine: {
                    lineStyle: {
                        color: '#08c386',
                        type: "dotted",
                    }
                  },
                  axisLabel: {
                    show: true,
                    interval:0,
                    rotate:20,
                    margin: 14,
                    fontSize: 12,
                    color: 'rgb(78,227,207)',
                  },
                },
                yAxis: [
                  {
                    name: '单位:MW',
                    nameTextStyle: {
                      fontSize: 11,
                      color: '#08c386',
                    },
                    splitArea: { 
                      show: false,
                      lineStyle: {
                          color: '#08c386',
                          type: "solid",
                      }
                    },
                    type: 'value',
                    gridIndex: 0,
                    minInterval: 1,
                    // max: 100,
                    // interval: 25,
                    // splitNumber: 4,
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: '#08c386',
                        type: "dotted",
                      }
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLine: {
                      lineStyle: {
                            color: '##08c386'
                        }
                    },
                    axisLabel: {
                      show: true,
                      margin: 14,
                      fontSize: 14,
                      color: 'rgb(78,227,207)',
                    },
                  },
                ],
                series: [
                  {
                    name:'项目数量',
                    type: 'bar',
                    barWidth: 18,
                    itemStyle: {
                      // @ts-ignore
                      normal: {
                        color:  this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {
                            offset: 0,
                            color: 'rgb(38,71,47)',
                          },
                          {
                            offset: 0.5,
                            color: 'rgb(214,181,69)',
                          },
                          {
                            offset: 1,
                            color: 'rgb(235,208,87)',
                          },
                        ]),
                      },
                    },
                     label: {
                        show: true,
                        fontSize:15,
                        position: 'top',
                        color: 'rgb(235,208,87)',
                       backgroundColor: 'rgb(5,52,44)',
                        formatter: '{c}',
                    },
                    data: powerPlantCount,
                    z: 10,
                    zlevel: 0,
                  },
                  {
                    // 分隔
                    type: 'pictorialBar',
                    itemStyle: {
                      normal: {
                        color: 'rgba(5,53,45,0.9)',
                      },
                    },
                    symbolRepeat: 'fixed',
                    symbolMargin: 4,
                    symbol: 'rect',
                    symbolClip: true,
                    symbolSize: [22, 5],
                    symbolPosition: 'start',
                    symbolOffset: [1, 1],
                    data: powerPlantCount,
                    width: 2,
                    z: 0,
                    zlevel: 1,
                  },
                  {
                    name: '外框',
                    type: 'bar',
                    barGap: '-110%', // 设置外框粗细
                    barWidth: 22,
                    itemStyle: {
                      normal: {
                        color: 'transparent', // 填充色
                        // barBorderRadius: 0, //圆角半径
                        label: {
                          // 标签显示位置
                          show: false,
                          position: 'top', // insideTop 或者横向的 insideLeft
                        },
                      },
                    },
                    z: 0,
                  },
                ],
                
        };
        myChart.setOption(option)
    },
    echartsFive(powerData){
      let powerX = []
      let powerY = []
      for (let i = 0; i < powerData.length; i++) {
        powerX.push(powerData[i].类型)
        powerY.push(powerData[i].电量)
      }
          var myChart = this.$echarts.init(document.getElementById("echartsFive"));
         var option = {
              tooltip: {
                  // confine: true,
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow',
                    },
                  // backgroundColor: 'rgba(3, 16, 42, 0.85)',
                  // borderColor: 'rgba(114, 190, 253, 0.6)',
                  // borderWidth: 1,
                  // padding: 12,
                  formatter: '{b0}<br>{a0}: {c0}',
                },
                // animation: true,
                grid: {
                  top:'20%',
                  bottom: '12%',
                  right: '10%',
                  left: '10%',
                },
                xAxis: {
                  data: powerX,
                  axisLine: {
                    lineStyle: {
                        color: '#08c386'
                    }
                  },
                  axisTick: {
                    show:false,
                    lineStyle: {
                      color: '#08c386',
                    },
                  },
                  splitLine: {
                    lineStyle: {
                        color: '#08c386',
                        type: "dotted",
                    }
                  },
                  axisLabel: {
                    show: true,
                    interval:0,
                    // rotate:20,
                    margin: 14,
                    fontSize: 14,
                    color: 'rgb(78,227,207)',
                  },
                },
                yAxis: [
                  {
                    name: '单位/万kWh',
                    nameTextStyle: {
                      fontSize: 11,
                      color: '#08c386',
                    },
                    splitArea: { 
                      show: false,
                      lineStyle: {
                          color: '#08c386',
                          type: "solid",
                      }
                    },
                    type: 'value',
                    gridIndex: 0,
                    minInterval: 1,
                    // max: 100,
                    // interval: 25,
                    // splitNumber: 4,
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: '#08c386',
                        type: "dotted",
                      }
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLine: {
                      lineStyle: {
                            color: '##08c386'
                        }
                    },
                    axisLabel: {
                      show: true,
                      margin: 14,
                      fontSize: 14,
                      color: 'rgb(78,227,207)',
                    },
                  },
                ],
                series: [
                  {
                    name:'项目数量',
                    type: 'bar',
                    barWidth: 22,
                    itemStyle: {
                      // @ts-ignore
                      normal: {
                        color:  this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {
                            offset: 0,
                            color: 'rgb(38,71,47)',
                          },
                          {
                            offset: 0.5,
                            color: 'rgb(214,181,69)',
                          },
                          {
                            offset: 1,
                            color: 'rgb(235,208,87)',
                          },
                        ]),
                      },
                    },
                     label: {
                        show: true,
                        fontSize:15,
                        position: 'top',
                        color: 'rgb(235,208,87)',
                       backgroundColor: 'rgb(5,52,44)',
                        formatter: '{c}',
                    },
                    data: powerY,
                    z: 10,
                    zlevel: 0,
                  },
                  {
                    // 分隔
                    type: 'pictorialBar',
                    itemStyle: {
                      normal: {
                        color: 'rgba(5,53,45,1)',
                      },
                    },
                    symbolRepeat: 'fixed',
                    symbolMargin: 4,
                    symbol: 'rect',
                    symbolClip: true,
                    symbolSize: [22, 2],
                    symbolPosition: 'start',
                    symbolOffset: [1, 25],
                    data: powerY,
                    width: 1,
                    z: 0,
                    zlevel: 1,
                  },
                  {
                    name: '外框',
                    type: 'bar',
                    barGap: '-110%', // 设置外框粗细
                    barWidth: 22,
                    itemStyle: {
                      normal: {
                        color: 'transparent', // 填充色
                        // barBorderRadius: 0, //圆角半径
                        label: {
                          // 标签显示位置
                          show: false,
                          position: 'top', // insideTop 或者横向的 insideLeft
                        },
                      },
                    },
                    z: 0,
                  },
                ],
                
        };
        myChart.setOption(option)
    },
    echartsSix(){
     var myChart = this.$echarts.init(document.getElementById("echartsSix"));
     var option ={
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: "非统调光伏电站装机容量分布",
            type: "pie",
            radius: ["20%", "63%"],
            center: ["50%", "50%"],
            roseType: "radius",
            emphasis: {
              label: {
                show: false
              }
            },
             labelLine: {
                  normal: {
                      show: true,
                      length: 35,
                  },
              },
             label: {
                  normal: {
                      show: true,
                      position: 'outside',
                      color: '#fff',
                      alignTo: 'none',
                      bleedMargin: 10,
                       backgroundColor: 'rgb(5,52,44)',
                      borderColor: '#08c386',
                      borderWidth: 1,
                      padding:[5,10,10,5],
                      // borderRadius: [0,0,14,0],
                      formatter: function (param) {
                        // return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
                        // 	.toFixed(2) + '%'
                        return param.name + ':' + param.value + '%'
                      },
                     
                  },
                 
            },
            // itemStyle: {
            //   shadowBlur: 1,
            //   shadowColor: 2,
            //   shadowOffsetX: 5,
            //   shadowOffsetY: 5
            // },
            data:[{name:'东台市',value:71.03},
                  {name:'阜宁县',value:12.66},
                  {name:'盐都区',value:6.04},
                  {name:'响水县',value:8.04},
                  {name:'建湖县',value:8.04},
                  {name:'大丰区',value:18.04},
                  {name:'射阳县',value:9.04},
              ]
          },
        {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.7,
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 1
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 2
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 0 * Math.PI / 180,
                         endAngle: 60 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 90 * Math.PI / 180,
                         endAngle: 150 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 180 * Math.PI / 180,
                         endAngle: 240 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.71,
                         startAngle: 270 * Math.PI / 180,
                         endAngle: 330 * Math.PI / 180
                     },
                     style: {
                         stroke: "#08c386",
                         fill: "transparent",
                         lineWidth: 8
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.12,
                     },
                     style: {
                         stroke: "rgb(18,45,71)",
                         fill: "transparent",
                         lineWidth: 20
                     },
                     silent: true
                 };
             },
             data: [0]
         },
         {
             name: "ring5",
             type: 'custom',
             coordinateSystem: "none",
             renderItem: function(params, api) {
                 return {
                     type: 'arc',
                     shape: {
                         cx: api.getWidth() / 2,
                         cy: api.getHeight() / 2,
                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.06,
                     },
                     style: {
                         stroke: "rgb(29,41,109)",
                         fill: "transparent",
                         lineWidth: 10
                     },
                     silent: true
                 };
             },
             data: [0]
         }
        ]
      };
      myChart.setOption(option);
    },
    echartsSeven(){
      var myChart = this.$echarts.init(document.getElementById("echartsSeven"));
           var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '海上风电配套送出工程',
                    type: 'pie',
                    labelLine: {
                        normal: {
                            show: true,
                         borderType: 'dotted',
                        },
                    },
                    label: {
                        show: true,
                        fontSize:15,
                        // position: [10,20],
                        color: '#fff',
                       backgroundColor: 'rgb(5,52,44)',
                        formatter: (params) => {
                      let color = "blue";
                      let showText = `${params.name}`;
                      if (params.dataIndex === 0) {
                        color = "purple";
                      } else if (params.dataIndex === 1) {
                        color = "green";
                      } else if (params.dataIndex === 2) {
                        color = "blue";
                      } else if (params.dataIndex === 3) {
                        color = "yellow";
                      }
                      const circle =
                        "hr" +
                        color.slice(0, 1).toUpperCase() +
                        color.slice(1).toLowerCase();
                      return `{${circle}|}\n{${color}|${params.name}\n${params.value}}`;
                    },
                    rich: {
                        purple: {
                          color:'rgb(5,204,148)',
                          fontSize: 18,
                        },
                        green: {
                          color: 'rgb(19,138,207)',
                          fontSize: 18,
                        },
                        blue: {
                          color:'rgb(30,140,189)',
                          fontSize: 18,
                        },
                        yellow: {
                          color: 'rgb(255,160,98)',
                          fontSize: 18,
                        },
                    },
                    },
                    radius: [0, '75%'],
                    color: ['rgb(5,204,148)','rgb(19,138,207)','rgb(30,140,189)','rgb(255,160,98)'],
                    roseType: 'area',
                    data: [
                        {value: 2876, name: '国华东台竹根沙'},
                        {value: 166, name: '龙源大丰'},
                        {value: 768, name: '国能大丰H5'},
                        {value: 1239, name: '华能射阳南区H1'},
                    ]
                }
            ]
        }
        myChart.setOption(option);
    },
    echartsMap(){
     
     var iconData = [
                             {
                name: "响水县", locs: [
                    {name: "", value: [119.354952, 33.247371]},
                    {name: "", value: [119.319891, 33.230946]}
                ]
            },
            {
                name: "滨海县", locs: [
                    {name: "", value: [119.499821, 32.788484]},
                    {name: "", value: [119.511176, 32.779256]}
                ]
            },
            {
                name: "射阳县", locs: [
                    {name: "", value: [119.576383, 32.440478]},
                    {name: "", value: [119.573257, 32.464578]}
                ]
            },
            {
                name: "亭湖区", locs: [
                    // {name: "", value: [120.139998,33.377631]},
                    {name: "", value: [119.358967, 32.397142]}
                ]
            },
            {
                name: "大丰市", locs: [
                    {name: "", value: [119.249536, 32.26075]},
                    {name: "", value: [119.1541, 32.320819]}
                ]
            }
                        ];
            function getsimboldata(mapName, XXX_ARR) {
            //console.log(mapName);
            let NullArr = [];
 
            for (const arr of XXX_ARR) {
                NullArr = NullArr.concat(arr.locs);
            }
            console.log(NullArr);
            return NullArr;
        }
        this.$echarts.registerMap('yancheng', geoJson);
          var myChart = this.$echarts.init(this.$refs.mapBar);
            // 使用数据 geoJson 注册名为 'china' 的地图
             var option ={
                 tooltip: {
                    // 鼠标是否可以进入悬浮框
                    enterable: true,
                    // 触发方式 mousemove, click, none, mousemove|click
                    triggerOn: `click`, 
                    trigger: 'item',
                     // 浮层隐藏的延迟
                    // hideDelay: 800,
                     // 背景色
                    backgroundColor: `rgba(0,0,0,0)`,
                    formatter: function (params) {
                        if (params.componentSubType == 'scatter') {
                             return `<div class=chartLabel>
                            <div class=title>${params.name}</div>
                            </div>`
                        }
                   
                    }
                },
	            	// 一系列的配置参数
                    visualMap: {
                      show:false,
                            min: 800,
                            max: 50000,
                            text: ['High', 'Low'],
                            realtime: false,
                            calculable: true,
                            inRange: {
                            color: ["rgb(24,170,118)"]
                            }
                        },
                        geo: {
                                map: "yancheng",
                                aspectScale: 0.75,
                                layoutCenter: ["50%", "51.5%"], //地图位置
                                layoutSize: "80%",
                                roam: false,
                                itemStyle: {
                                normal: {
                                    borderColor: "rgba(147, 235, 248, 1)",
                                    borderWidth: 0.5,
                                    color: {
                                    type: "linear-gradient",
                                    x: 0,
                                    y: 1500,
                                    x2: 2500,
                                    y2: 0,
                                    colorStops: [
                                        {
                                        offset: 0,
                                        color: "rgb(11,224,181)", // 0% 处的颜色
                                        },
                                        {
                                        offset: 1,
                                        color: "rgb(11,224,181)", // 50% 处的颜色
                                        },
                                    ],
                                        global: true, // 缺省为 false
                                        },
                                        opacity: 0.5,
                                },
                                // emphasis: {
                                //     areaColor: "#2a333d",
                                // },
                                 
                                },
                                z: 2,
                            },
	                series: [
                        {
	                    type: 'map',
	                    map: 'yancheng',
                          roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
                        // zoom: 1.23, // 当前视角的缩放比例
                        // scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
                        //     min: 1,  // 最小的缩放值
                        //     max: 10,  // 最大的缩放值
                        // },

                         // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                        label: { 
                            show: true, // 是否显示标签。
                            fontSize: '11',
                            color: 'rgba(0,0,0,0.7)',
                                fontSize:15,
                                // position: [10,20],
                                color: '#fff',
                              backgroundColor: 'rgb(5,52,44)',
                                formatter: (params) => {
                              let color = "blue";
                              if (params.dataIndex === 0) {
                                 var res =  "{binhai|}"
                                 return res;
                              } else if (params.dataIndex === 1) {
                                var res =  "{dafeng|}"
                                 return res;
                              } else if (params.dataIndex === 2) {
                                var res =  "{dongtai|}"
                                 return res;
                              } else if (params.dataIndex === 3) {
                                var res =  "{funing|}"
                                 return res;
                              }else if (params.dataIndex === 4) {
                                var res =  "{jianhu|}"
                                 return res;
                              }else if (params.dataIndex === 5) {
                                var res =  "{sheyang|}"
                                 return res;
                              }else if (params.dataIndex === 6) {
                                var res =  "{tinghu|}"
                                 return res;
                              }else if (params.dataIndex === 7) {
                                var res =  "{xiangshui|}"
                                 return res;
                              }else if (params.dataIndex === 8) {
                                var res =  "{yandu|}"
                                 return res;
                              }
                            },
                            rich: {
                                binhai: {
                                   height: 21,
                                   width: 64,
                                  backgroundColor: {
                                  image: '/mapIcon/binhai.png'
                                   },
                                },
                                dafeng: {
                                  height: 21,
                                   width: 52,
                                  backgroundColor: {
                                  image: '/mapIcon/dafeng.png'
                                   },
                                },
                                dongtai: {
                                  height: 21,
                                   width: 49,
                                  backgroundColor: {
                                  image: '/mapIcon/dongtai.png'
                                   },
                                },
                                funing: {
                                  height: 21,
                                   width: 52,
                                  backgroundColor: {
                                  image: '/mapIcon/funing.png'
                                   },
                                },
                                jianhu: {
                                  height: 21,
                                   width: 52,
                                  backgroundColor: {
                                  image: '/mapIcon/jianhu.png'
                                   },
                                },
                                sheyang: {
                                  height: 21,
                                   width: 52,
                                  backgroundColor: {
                                  image: '/mapIcon/sheyang.png'
                                   },
                                },
                                tinghu: {
                                  height: 21,
                                   width: 52,
                                  backgroundColor: {
                                  image: '/mapIcon/tinghu.png'
                                   },
                                },
                                xiangshui: {
                                  height: 21,
                                   width: 52,
                                  backgroundColor: {
                                  image: '/mapIcon/xiangshui.png'
                                   },
                                },
                                yandu: {
                                  height: 21,
                                   width: 52,
                                  backgroundColor: {
                                  image: '/mapIcon/yandu.png'
                                   },
                                },
                            },
                        },
                        
                        itemStyle: {
                            normal: {
                                areaColor: '#dfdfdf',
                                borderColor: '#ffffff',
                                borderWidth: 0.5,
                            },
                            emphasis: {
                                areaColor: '#9ebd2a'
                            }
                        },
                        data:[
                            { name: '滨海县', value: 20057.34 },
                            { name: '大丰市', value: 15477.48 },
                            { name: '东台市', value: 31686.1 },
                            { name: '阜宁县', value: 6992.6 },
                            { name: '建湖县', value: 44045.49 },
                            { name: '射阳县', value: 40689.64 },
                            { name: '亭湖区', value: 37659.78 },
                            { name: '响水县', value: 45180.97 },
                            { name: '盐都区', value: 55204.26 },
                        ],
                         
                        // "left": 0,
                        // "right": 0,
                        // "top": 0,
                        // "bottom": 0
	                },
                //     {
                //     name: "RTM",
                //     type: "scatter",
                //     coordinateSystem: "geo",
                //     data: getsimboldata("yancheng", iconData), // 地图的数据点
 
                //     symbolSize: function () {
                //         return 10;
                //     },
                //     label: { // 圆点的标签
                //         normal: {
                //             show: false,
                //             formatter: function (params) {
                //                 return params.name;
                //             },
                //             position: "right",
                //             color: "#69A4D9",
                //             fontSize: "1",
                //         },
                //         emphasis: {
                //             show: false,
                //         },
                //     },
                //     itemStyle: { // 地图上的数据的
                //         normal: {
                //             color: "#4FE2CF",
                //             borderWidth: 2,
                //             borderColor: "#4FE2CF",
                //         },
                //     },
                // },
                       // 用于地图中给每个名字设置前面的图标
                        {
                            type: "scatter",
                            coordinateSystem: "geo",
                            data: [
                            { name: '滨海县', value: [120.139998,33.377631]},
                            { name: '大丰市', value: [120.1399984,33.7776319]},
                            { name: '东台市', value: [120.189998,33.377731] },
                            { name: '阜宁县', value: [120.239938,33.577631] },
                            { name: '建湖县', value: [120.419998,33.977661] },
                            { name: '射阳县', value: [120.239978,34.377631] },
                            { name: '亭湖区', value: [120.139995,33.977681] },
                            { name: '响水县', value: [120.339948,33.177641] },
                            { name: '盐都区', value: [120.439991,33.077621] },
                        ],
                            symbol: "image:///mapIcon/location.png",
                            symbolSize:[16, 20],
                            symbolKeepAspect:"true"
                            // itemStyle: {
                            //     normal: {
                            //         color: "#4bbbb2",
                            //         borderColor: "#b4dccd",
                            //         width:12,
                            //         height:16
                            //     }
                            // }
                        },
                    ]
	              };
                //   myChart.dispatchAction({
                //             type: "unselect",
                //             seriesIndex: 0,
                //             dataIndex: 0,
                //         });
                myChart.on('click', function(params){
                      if (params.componentSubType == 'scatter') {
                        console.log(params,'params');//此处可以写一些某个市被点击后的操作
                      }
                });
                myChart.setOption(option);
     },
    echartsEight(){
      var myChart = this.$echarts.init(document.getElementById("echartsEight"));
          let xData = ["第一周", "第二周", "第三周", "第四周","第五周","第六周","第七周","第八周"];
          let legendData = ["汽车产业复产率", "工业复产率"]; //图例
          let firstIndustry = [72, 37, 4, 75,56,34,43,12]; //汽车产业复产率
          let thirdIndustry = [8, 15, 34, 31,32,4,56,78,32]; //工业复产率
        var  option = {
              // grid: {
              //     x: 0,
              //     y: 0,
              //     x2: 0,
              //     y2: 0,
              //     top: '15%',
              //     left: '3%',
              //     right: '3%',
              //     bottom: '20%',
              //     containLabel: true,
              // },
              tooltip: {
                  trigger: 'axis',
                  show:true,
                  axisPointer: {
                      type: 'cross',
                      crossStyle: {
                          color: '#999'
                      }
                  }
              },
              legend: {
                  orient: 'horizontal',
                  left: 'center',
                  top: 'top',
                  padding: [10, 0, 0, 0],
                  data: legendData,
                  //图例滚动
                  type: 'scroll',
                  //图例文字样式
                  textStyle: {
                      color: '#ffffff',
                      fontSize:"1rem"
                  }
              },
              xAxis: [
                  {
                      type: 'category',
                      axisTick: {
                          show: false,
                      },
                      interval: 1,
                      axisLabel: {
                          color: '#ffffff',
                          fontSize:"1rem",
                          interval:0,
                      },
                      axisLine: {
                          show: false
                      },
                      data: xData,
                  }
              ],
              yAxis: [
                  {
                      type: 'value',
                      name: '',
                      min: 0,
                      max: 100,
                      interval: 20,
                      axisLabel: {
                          formatter: '{value} '
                      },
                      axisLabel: {
                          textStyle: {
                              //坐标轴颜色
                              color: '#ffffff',
                              fontSize:"1rem"
                          }
                      },
                      //坐标轴线样式
                      splitLine: {
                          show: true,
                          lineStyle: {
                              type: 'solid', //solid实线;dashed虚线
                              color: 'rgba(36, 173, 254, 0.2)'
                          }
                      },
                  },
                  // {
                  //     type: 'value',
                  //     name: '',
                  //     min: 0,
                  //     max: 100,
                  //     interval: 20,
                  //     axisLabel: {
                  //         formatter: '{value}'
                  //     },
                  //     axisLabel: {
                  //         textStyle: {
                  //             //坐标轴颜色
                  //             color: 'rgba(36, 173, 254, 1)',
                  //             fontSize:"1rem"
                  //         }
                  //     },
                  //     //坐标轴线样式
                  //     splitLine: {
                  //         show: true,
                  //         lineStyle: {
                  //             type: 'solid',
                  //             color: 'rgba(36, 173, 254, 0.2)'
                  //         }
                  //     },
                  // }
              ],
              series: [
                  {
                      name: "汽车产业复产率",
                      data: firstIndustry,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: '#ffc600', //改变折线点的颜色
                              lineStyle: {
                                  color: '#ffc600', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                      areaStyle: {
                          //折线图颜色半透明
                          color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [{
                                  offset: 0, color: 'rgba(255,198,0, 0.5)' // 0% 处的颜色
                              }, {
                                  offset: 1, color: 'rgba(255,198,0, 0.1)' // 100% 处的颜色
                              }],
                              global: false // 缺省为 false
                          }
                      }
                  },
                  {
                      name: "工业复产率",
                      data: thirdIndustry,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'rgb(2,243,175)', //改变折线点的颜色
                              lineStyle: {
                                  color: 'rgb(2,243,175)', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                      areaStyle: {
                          //折线图颜色半透明
                          color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [{
                                  offset: 0, color: 'rgba(2,243,175, 0.5)' // 0% 处的颜色
                              }, {
                                  offset: 1, color: 'rgba(2,243,175, 0.1)' // 100% 处的颜色
                              }],
                              global: false // 缺省为 false
                          }
                      }
                  }
              ]
          };
          myChart.setOption(option);
     },
     echartsNine(){
       var myChart = this.$echarts.init(document.getElementById("echartsNine"));
          let xData = ["第一周", "第二周", "第三周", "第四周","第五周","第六周","第七周","第八周"];
          let legendData = ["建湖县", "东台市",'盐都市','射阳县','滨海县','大丰区','响水县','亭湖区','阜宁县']; //图例
          let firstIndustry = [72, 37, 4, 75,56,34,43,12]; //汽车产业复产率
          let thirdIndustry = [8, 15, 34, 31,32,4,56,78,32]; //工业复产率
          let yandu = [28, 15, 4, 51,30,43,22,33,67]; //工业复产率
          let sheyang = [21, 42, 13, 67,32,13,22,46,78]; //工业复产率
          let binhai = [8, 15, 34, 4,24,25,67,78,32]; //工业复产率
          let dafeng = [48, 33, 15, 31,20,23,22,22,34]; //工业复产率
          let xiangshui = [30, 45, 56, 14,20,63,24,36,45]; //工业复产率
          let tinghu = [38, 18, 8, 2,67,67,33,44,22]; //工业复产率
          let funing = [24, 34, 9, 41,20,13,12,43,57]; //工业复产率
        var  option = {
              grid: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  top: '20%',
                  left: '3%',
                  right: '3%',
                  bottom: '10%',
                  containLabel: true,
              },
              tooltip: {
                  trigger: 'axis',
                  show:true,
                  axisPointer: {
                      type: 'cross',
                      crossStyle: {
                          color: '#999'
                      }
                  }
              },
              legend: {
                  orient: 'horizontal',
                  left: 'center',
                  top: 'top',
                  width:400,
                  padding: [10, 0, 0, 0],
                  data: legendData,
                  //图例滚动
                  // type: 'scroll',
                  //图例文字样式
                  textStyle: {
                      color: '#ffffff',
                      fontSize:"1rem"
                  }
              },
              xAxis: [
                  {
                      type: 'category',
                      axisTick: {
                          show: false,
                      },
                      interval: 1,
                      axisLabel: {
                          color: '#ffffff',
                          fontSize:"1rem",
                          interval:0,
                      },
                      axisLine: {
                          show: false
                      },
                      data: xData,
                  }
              ],
              yAxis: [
                  {
                      type: 'value',
                      name: '',
                      min: 0,
                      max: 100,
                      interval: 20,
                      axisLabel: {
                          formatter: '{value} '
                      },
                      axisLabel: {
                          textStyle: {
                              //坐标轴颜色
                              color: '#ffffff',
                              fontSize:"1rem"
                          }
                      },
                      //坐标轴线样式
                      splitLine: {
                          show: true,
                          lineStyle: {
                              type: 'solid', //solid实线;dashed虚线
                              color: 'rgba(36, 173, 254, 0.2)'
                          }
                      },
                  },
                  // {
                  //     type: 'value',
                  //     name: '',
                  //     min: 0,
                  //     max: 100,
                  //     interval: 20,
                  //     axisLabel: {
                  //         formatter: '{value}'
                  //     },
                  //     axisLabel: {
                  //         textStyle: {
                  //             //坐标轴颜色
                  //             color: 'rgba(36, 173, 254, 1)',
                  //             fontSize:"1rem"
                  //         }
                  //     },
                  //     //坐标轴线样式
                  //     splitLine: {
                  //         show: true,
                  //         lineStyle: {
                  //             type: 'solid',
                  //             color: 'rgba(36, 173, 254, 0.2)'
                  //         }
                  //     },
                  // }
              ],
              series: [
                  {
                      name: "建湖县",
                      data: firstIndustry,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: '#ffc600', //改变折线点的颜色
                              lineStyle: {
                                  color: '#ffc600', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                  },
                  {
                      name: "东台市",
                      data: thirdIndustry,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'rgb(2,243,175)', //改变折线点的颜色
                              lineStyle: {
                                  color: 'rgb(2,243,175)', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                  },
                  {
                      name: "盐都区",
                      data: yandu,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'rgb(0,157,227)', //改变折线点的颜色
                              lineStyle: {
                                  color: 'rgb(0,157,227)', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                  },
                  {
                      name: "射阳县",
                      data: sheyang,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'rgb(156,24,73)', //改变折线点的颜色
                              lineStyle: {
                                  color: 'rgb(156,24,73)', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                  },
                  {
                      name: "滨海县",
                      data: binhai,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'rgb(93,201,207)', //改变折线点的颜色
                              lineStyle: {
                                  color: 'rgb(93,201,207)', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                  },
                    {
                      name: "大丰区",
                      data: dafeng,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'rgb(213,119,112)', //改变折线点的颜色
                              lineStyle: {
                                  color: 'rgb(213,119,112)', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                  },
                   {
                      name: "响水县",
                      data: xiangshui,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'rgb(97,96,217)', //改变折线点的颜色
                              lineStyle: {
                                  color: 'rgb(97,96,217)', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                  },
                  {
                      name: "亭湖区",
                      data: tinghu,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'rgb(185,84,77)', //改变折线点的颜色
                              lineStyle: {
                                  color: 'rgb(185,84,77)', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                  },
                  {
                      name: "阜宁县",
                      data: funing,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'red', //改变折线点的颜色
                              lineStyle: {
                                  color: 'red', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                  }
              ]
          };
          myChart.setOption(option);
     },
     echartsTen(){
       var myChart = this.$echarts.init(document.getElementById("echartsTen"));
       var trafficWay = [
        {
          name: '光伏',
          value: 380,
        },
        {
          name: '生物质',
          value: 200,
        },
        {
          name: '风电',
          value: 800,
        },
       
      ];

      var data = [];
      var color = ['rgba(180,174,114,1)', 'rgba(38,181,192,1)', 'rgba(49,99,181,1)'];
      var color1 = ['rgb(239,214,137)', 'rgb(49,221,233)', 'rgb(63,127,233)'];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 3,
                shadowBlur: 3,
                borderColor: color[i],
                shadowColor: color1[i],
              },
            },
          },
         
        );
      }
       var option = {
        color: color,
        title: {
        },
        //   {
        //   text: '水质监测',
        //   top: '44%',
        //   textAlign: 'center',
        //   left: '49.50%',
        //   backgroundColor: '#163253',
        //   borderRadius: 100,
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 20,
        //     fontWeight: '400',
        //   },
        // },
        tooltip: {
          show: false,
        },
         legend: {
                  orient: 'horizontal',
                  left: 'center',
                  bottom: 'bottom',
                  width:300,
                  padding: [5, 0, 0, 0],
                  itemHeight: 8,
                  itemWidth:20,
                  //图例滚动
                  // type: 'scroll',
                  //图例文字样式
                  textStyle: {
                      color: '#ffffff',
                      fontSize:"0.7rem"
                  }
              },
        toolbox: {
          show: false,
        },
        series: [
           {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [50, 60],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              labelLine: {
                length: 5,
                length2: 10,
                show: true,
                color: '#00ffff',
              },
            },
          },
        
           label: {
                        show: true,
                        fontSize:15,
                        // position: [10,20],
                        color: '#fff',
                      //  backgroundColor: 'rgb(5,52,44)',
                        formatter: (params) => {
                      let color = "blue";
                      if (params.dataIndex === 0) {
                        color = "purple";
                      } else if (params.dataIndex === 1) {
                        color = "green";
                      } else if (params.dataIndex === 2) {
                        color = "blue";
                      }
                      const circle =
                        "hr" +
                        color.slice(0, 1).toUpperCase() +
                        color.slice(1).toLowerCase();
                      return `{${circle}|}\n{${color}|${params.name}\n${params.value}}`;
                      
                    },
                    rich: {
                        green: {
                          color: 'rgba(180,174,114,1)', 
                          fontSize: 15,
                        },
                        blue: {
                          color:'rgba(38,181,192,1)',
                          fontSize: 15,
                        },
                        purple: {
                          color: 'rgba(49,99,181,1)',
                          fontSize: 15,
                        },
                    },
                    },
          data: data,
        },
         {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: '40%',
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false,
                    },
                    color: this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                        {
                            offset: 1,
                            color: 'rgba(64,210,251, 1)',
                        },
                        {
                            offset: 0,
                            color: 'rgba(64,210,251, 0)',
                        },
                    ]),
                    // borderWidth: 1,
                    // borderColor: '',
                    shadowBlur: 10,
                    // shadowColor: 'rgba(55,70,130, 1)'
                },
            },
            data: [
                {
                    value: 100,
                },
            ],
        },
        {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: ['40%','45%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false,
                    },
                    color:'rgba(64,210,251, 1)',
                    // borderWidth: 1,
                    // borderColor: '',
                    shadowBlur: 10,
                    // shadowColor: 'rgba(55,70,130, 1)'
                },
            },
            data: [
                {
                    value: 100,
                },
            ],
        },
        ],
      };
      myChart.setOption(option)
     },
     echartsEleven(){
        var myChart = this.$echarts.init(document.getElementById("echartsEleven"));
       var trafficWay = [
        {
          name: '光伏',
          value: 380,
        },
        {
          name: '生物质',
          value: 200,
        },
        {
          name: '风电',
          value: 800,
        },
       
      ];

      var data = [];
      var color = ['rgba(180,174,114,1)', 'rgba(38,181,192,1)', 'rgba(49,99,181,1)'];
      var color1 = ['rgb(239,214,137)', 'rgb(49,221,233)', 'rgb(63,127,233)'];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 3,
                shadowBlur: 3,
                borderColor: color[i],
                shadowColor: color1[i],
              },
            },
          },
         
        );
      }
       var option = {
        color: color,
        title: {
        },
        //   {
        //   text: '水质监测',
        //   top: '44%',
        //   textAlign: 'center',
        //   left: '49.50%',
        //   backgroundColor: '#163253',
        //   borderRadius: 100,
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 20,
        //     fontWeight: '400',
        //   },
        // },
        tooltip: {
          show: false,
        },
        legend: {
                  orient: 'horizontal',
                  left: 'center',
                  bottom: 'bottom',
                  width:300,
                  padding: [5, 0, 0, 0],
                  itemHeight: 8,
                  itemWidth:20,
                  //图例滚动
                  // type: 'scroll',
                  //图例文字样式
                  textStyle: {
                      color: '#ffffff',
                      fontSize:"0.7rem"
                  }
              },
        toolbox: {
          show: false,
        },
        series: [
           {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [50, 60],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              labelLine: {
                length: 5,
                length2: 10,
                show: true,
                color: '#00ffff',
              },
            },
          },
        
           label: {
                        show: true,
                        fontSize:15,
                        // position: [10,20],
                        color: '#fff',
                      //  backgroundColor: 'rgb(5,52,44)',
                        formatter: (params) => {
                      let color = "blue";
                      if (params.dataIndex === 0) {
                        color = "purple";
                      } else if (params.dataIndex === 1) {
                        color = "green";
                      } else if (params.dataIndex === 2) {
                        color = "blue";
                      }
                      const circle =
                        "hr" +
                        color.slice(0, 1).toUpperCase() +
                        color.slice(1).toLowerCase();
                      return `{${circle}|}\n{${color}|${params.name}\n${params.value}}`;
                      
                    },
                    rich: {
                        green: {
                          color: 'rgba(180,174,114,1)', 
                          fontSize: 15,
                        },
                        blue: {
                          color:'rgba(38,181,192,1)',
                          fontSize: 15,
                        },
                        purple: {
                          color: 'rgba(49,99,181,1)',
                          fontSize: 15,
                        },
                    },
                    },
          data: data,
        },
         {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: '40%',
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false,
                    },
                    color: this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                        {
                            offset: 1,
                            color: 'rgba(64,210,251, 1)',
                        },
                        {
                            offset: 0,
                            color: 'rgba(64,210,251, 0)',
                        },
                    ]),
                    // borderWidth: 1,
                    // borderColor: '',
                    shadowBlur: 10,
                    // shadowColor: 'rgba(55,70,130, 1)'
                },
            },
            data: [
                {
                    value: 100,
                },
            ],
        },
        {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: ['40%','45%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false,
                    },
                    color:'rgba(64,210,251, 1)',
                    // borderWidth: 1,
                    // borderColor: '',
                    shadowBlur: 10,
                    // shadowColor: 'rgba(55,70,130, 1)'
                },
            },
            data: [
                {
                    value: 100,
                },
            ],
        },
        ],
      };
      myChart.setOption(option)
     },
     echartsTwelve(){
        var myChart = this.$echarts.init(document.getElementById("echartsTwelve"));
         var option = {
              tooltip: {
                  // confine: true,
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow',
                    },
                  // backgroundColor: 'rgba(3, 16, 42, 0.85)',
                  // borderColor: 'rgba(114, 190, 253, 0.6)',
                  // borderWidth: 1,
                  // padding: 12,
                  formatter: '{b0}<br>{a0}: {c0}',
                },
                // animation: true,
                grid: {
                  top:'15%',
                  bottom: '15%',
                  right: '5%',
                  left: '16%',
                },
                xAxis: {
                  data: ['2016','2017','2018','2019','2020','2021','2022'],
                  axisLine: {
                    lineStyle: {
                        color: '#08c386'
                    }
                  },
                  axisTick: {
                    show:false,
                    lineStyle: {
                      color: '#08c386',
                    },
                  },
                  splitLine: {
                    lineStyle: {
                        color: '#08c386',
                        type: "dotted",
                    }
                  },
                  axisLabel: {
                    show: true,
                    interval:0,
                    // rotate:20,
                    margin: 14,
                    fontSize: 10,
                    color: 'rgb(78,227,207)',
                  },
                },
                yAxis: [
                  {
                    name: '单位：亿千瓦时',
                    nameTextStyle: {
                      fontSize: 11,
                      color: '#08c386',
                    },
                    splitArea: { 
                      show: false,
                      lineStyle: {
                          color: '#08c386',
                          type: "solid",
                      }
                    },
                    type: 'value',
                    gridIndex: 0,
                    minInterval: 1,
                    // max: 100,
                    // interval: 25,
                    // splitNumber: 4,
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: '#08c386',
                        type: "dotted",
                      }
                    },
                    axisTick: {
                      show: false,
                    },
                    axisLine: {
                      lineStyle: {
                            color: '##08c386'
                        }
                    },
                    axisLabel: {
                      show: true,
                      margin: 14,
                      fontSize: 10,
                      color: 'rgb(78,227,207)',
                    },
                  },
                ],
                series: [
                  {
                    name:'项目数量',
                    type: 'bar',
                    barWidth: 15,
                    itemStyle: {
                      // @ts-ignore
                      normal: {
                        color:  this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                          {
                            offset: 0,
                            color: 'rgb(38,71,47)',
                          },
                          {
                            offset: 0.5,
                            color: 'rgb(214,181,69)',
                          },
                          {
                            offset: 1,
                            color: 'rgb(235,208,87)',
                          },
                        ]),
                      },
                    },
                     label: {
                        show: true,
                        fontSize:15,
                        position: 'top',
                        color: 'rgb(235,208,87)',
                       backgroundColor: 'rgb(5,52,44)',
                        formatter: '{c}',
                    },
                    data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
                    z: 10,
                    zlevel: 0,
                  },
                  {
                    // 分隔
                    type: 'pictorialBar',
                    itemStyle: {
                      normal: {
                        color: 'rgba(5,53,45,0.9)',
                      },
                    },
                    symbolRepeat: 'fixed',
                    symbolMargin: 4,
                    symbol: 'rect',
                    symbolClip: true,
                    symbolSize: [22, 5],
                    symbolPosition: 'start',
                    symbolOffset: [1, 1],
                    data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
                    width: 1,
                    z: 0,
                    zlevel: 1,
                  },
                  {
                    name: '外框',
                    type: 'bar',
                    barGap: '-110%', // 设置外框粗细
                    barWidth: 15,
                    itemStyle: {
                      normal: {
                        color: 'transparent', // 填充色
                        // barBorderRadius: 0, //圆角半径
                        label: {
                          // 标签显示位置
                          show: false,
                          position: 'top', // insideTop 或者横向的 insideLeft
                        },
                      },
                    },
                    z: 0,
                  },
                ],
                
        };
        myChart.setOption(option)
     },
     echartsThirteen(){
       var myChart = this.$echarts.init(document.getElementById("echartsThirteen"));
       let chartData = {
              xAxisData: ['2022-04-12', '2022-04-14', '2022-04-15', '2022-04-16', '2022-04-17', '2022-04-18'],
              finishNum: [28, 51, 43, 43, 48, 15],
              unFinishNum: [28, 39, 36, 36, 31, 21],
              finishRate: [50, 56, 54, 54, 60, 41],
            }
          var option = {
              color: ['rgb(71,221,245)', 'rgb(135,7,221)', 'rgb(71,221,245)'],
              tooltip: {
                confine: true,
              },
              grid: {
                left: '2%',
                right: '4%',
                bottom: '10%',
                top: '20%',
                containLabel: true,
              },
              legend: {
                icon: 'rect',
                orient: 'horizontal',
                left: 'right',
                itemWidth: 12,
                itemHeight: 12,
                formatter: ['{a|{name}}'].join('\n'),
                textStyle: {
                  fontSize: 12,
                  color: '#6A93B9',
                  height: 8,
                  rich: {
                    a: {
                      verticalAlign: 'bottom',
                    },
                  },
                },
                data: ['清洁能源', '化石能源', '能源占比'],
              },
              xAxis: {
                type: 'category',
                data: ['2016', '2017', '2018', '2019', '2020', '2021'],
                axisLine: {
                  lineStyle: {
                    color: 'rgba(255,255,255,0.45)',
                  },
                },
                axisLabel: {
                  fontSize: 12,
                  color: '#6A93B9',
                },
                axisTick: {
                  show: false,
                },
              },
              yAxis: {
                name: '亿千瓦时',
                nameTextStyle: {
                      fontSize: 11,
                      color: '#08c386',
                    },
                type: 'value',
                min: 0,
                minInterval: 1,
                splitArea: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  lineStyle: {
                    color: '#08c386',
                    type: 'dashed', // dotted 虚线
                  },
                },
                axisLabel: {
                  fontSize: 12,
                  color: '#6A93B9',
                  fontFamily: 'Bebas',
                },
              }, 
              // {
              //   type: 'value',
              //   axisLine: {
              //     show: false,
              //   },
              //   axisTick: {
              //     show: false,
              //   },
              //   splitLine: {
              //     show: false,
              //   },
              //   axisLabel: {
              //     fontSize: 12,
              //     formatter: '{value}%', // 右侧Y轴文字显示
              //     fontFamily: 'Bebas',
              //     color: '#6A93B9',
              //   },
              //   splitArea: {
              //     show: false,
              //   },
              // }
              
              series: [
                { type: 'bar',
                 barWidth: 10,
                  itemStyle: { barBorderRadius: [15, 15, 0, 0], },
                  name: '清洁能源',
                  data: chartData.finishNum 
                  },
              { type: 'bar', barWidth: 10, itemStyle: { barBorderRadius: [15, 15, 0, 0], }, name: '化石能源', data: chartData.unFinishNum },
              {
                type: 'line',
                // yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                smooth: true, // 平滑曲线显示
                // symbol: 'solid', // 标记的图形为实心圆
                symbolSize: 8, // 标记的大小
                itemStyle: {
                  color: '#ffffff',
                  borderColor: '#fff', // 圆点透明 边框
                  normal: {
                    lineStyle: {
                      width: 3,
                    }
                  }
                },
                name: '能源占比',
                data: chartData.finishRate
              },
              ],
            };
         myChart.setOption(option)
     },
     echartsFourteen(){
        var myChart = this.$echarts.init(document.getElementById("echartsFourteen"));
            var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      lineStyle: {
                          color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [{
                                  offset: 0,
                                  color: 'rgba(0, 255, 233,0)'
                              }, {
                                  offset: 0.5,
                                  color: 'rgba(255, 255, 255,1)',
                              }, {
                                  offset: 1,
                                  color: 'rgba(0, 255, 233,0)'
                              }],
                              global: false
                          }
                      },
                  },
              },
              legend: {
                  // x: '46%',
                  // top: '50%',
                  textStyle: {
                      color: '#fff',
                      fontSize:15,
                  },
                  data: ["最低温度","最高温度","风力"]
              },
              
              grid: {
                  top: '15%',
                  left: '8%',
                  right: '3%',
                  bottom: '15%',
                  // containLabel: true,
                  // borderWidth: 1,
              },
              xAxis: [{
                  type: 'category',
                  nameGap: 20,
                  axisLine: {
                      show: false,
                      color:'#A582EA'
                  },
                  
                  axisLabel: {
                      color: '#08c386',
                      // width:100
                      // padding: [0, 0, 0, -120]
                  },
                  splitLine: {
                      // show: true
                  },
                  // boundaryGap: false,
                  data: [
                          '2022/11/12',
                          '2022/11/13',
                          '2022/11/14',
                          '2022/11/15',
                          '2022/11/16',
                          '2022/11/17',
          ]//this.$moment(data.times).format("HH-mm") ,

              }],

              yAxis: [{
                  name:"",
                  nameTextStyle:{
                      color: '#fff',
                      fontSize:15,
                  },
                  type: 'value',
                  min: 0,
                  splitNumber: 10,
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: '#00BFF3',
                          opacity:0.23,
                           type: 'dashed', // dotted 虚线
                      }
                  },
                  axisLine: {
                      show: false,
                  },
                  axisLabel: {
                      show: true,
                      margin: 20,
                      textStyle: {
                          color: '#08c386',

                      },
                  },
                  axisTick: {
                      show: false,
                  },
              }],
              series: [
                  {
                      name:'最低温度',
                      type: 'line',
                      showAllSymbol: true,
                      // symbol: 'image://./static/images/guang-circle.png',
                      symbol: 'circle',
                      symbolSize: 5,
                      lineStyle: {
                          normal: {
                              color: "rgb(255,204,0)",
                          },
                      },
                      label: {
                          show: true,
                          position: 'top',
                          backgroundColor: 'rgb(255,204,0)',
                          textStyle: {
                              color: 'rgb(8,23,43)',
                              fontSize:8
                          }
                      },
                      itemStyle: {
                          color: "rgb(255,204,0)",
                          borderColor: "rgb(255,204,0)",
                          borderWidth: 0,
                      },
                      data: [158.68,
                              177.84,
                              182.2,
                              97.89,
                              248.98,
                             ]//data.values
                  },
                  {
                      name:'最高温度',
                      type: 'line',
                      showAllSymbol: true,
                      symbol: 'circle',
                      symbolSize: 5,
                      lineStyle: {
                          normal: {
                              color: "rgb(10,189,151)",
                          },
                      },
                      label: {
                          show: true,
                          position: 'top',
                          backgroundColor: 'rgb(10,189,151)',
                          textStyle: {
                              color: 'rgb(8,23,43)',
                              fontSize:10
                          }
                      },
                      itemStyle: {
                          color: "rgb(10,189,151)",
                          borderColor: "rgb(10,189,151)",
                          borderWidth: 0,
                      },
                      data: [104.08,
                              436.97,
                              342.37,
                              335.04,
                              259.28,
                    ]//data.values
                  },
                  {
                      name:'风力',
                      type: 'line',
                      showAllSymbol: true,
                      symbol: 'circle',
                      symbolSize: 5,
                      lineStyle: {
                          normal: {
                              color: "rgb(12,117,130)",
                          },
                      },
                      label: {
                          show: true,
                          position: 'top',
                          backgroundColor: 'rgb(12,117,130)',
                          textStyle: {
                              color: 'rgb(8,23,43)',
                              fontSize:10
                          }
                      },
                      itemStyle: {
                          color: "rgb(12,117,130)",
                          borderColor: "rgb(12,117,130)",
                          borderWidth: 0,
                      },
                      data: [304.08,
                              236.97,
                              142.37,
                              535.04,
                              659.28,
                    ]//data.values
                  },
              ]
          };
          myChart.setOption(option)
     },
     echartsFifteen(){
        var myChart = this.$echarts.init(document.getElementById("echartsFifteen"));
          let xData = ["2022-12-20", "2022-12-21", "2022-12-22", "2022-12-23","2022-12-24","2022-12-25","2022-12-26","2022-12-27"];
          let legendData = ["风速", "降水量"]; //图例
          let firstIndustry = [72, 37, 4, 75,56,34,43,12]; 
          let thirdIndustry = [8, 15, 34, 31,32,4,56,78,32]; 
        var  option = {
              grid: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  top: '15%',
                  left: '3%',
                  right: '3%',
                  bottom: '10%',
                  containLabel: true,
              },
              tooltip: {
                  trigger: 'axis',
                  show:true,
                  axisPointer: {
                      type: 'cross',
                      crossStyle: {
                          color: '#999'
                      }
                  }
              },
              legend: {
                  orient: 'horizontal',
                  left: 'center',
                  top: 'top',
                  padding: [10, 0, 0, 0],
                  data: legendData,
                  //图例滚动
                  type: 'scroll',
                  //图例文字样式
                  textStyle: {
                      color: '#ffffff',
                      fontSize:"1rem"
                  }
              },
              xAxis: [
                  {
                      type: 'category',
                      axisTick: {
                          show: false,
                      },
                      interval: 1,
                      axisLabel: {
                          color: '#ffffff',
                          fontSize:"12",
                          interval:0,
                      },
                      axisLine: {
                          show: false
                      },
                      data: xData,
                  }
              ],
              yAxis: [
                  {
                      type: 'value',
                      name: '',
                      min: 0,
                      max: 100,
                      interval: 20,
                      axisLabel: {
                          formatter: '{value} '
                      },
                      axisLabel: {
                          textStyle: {
                              //坐标轴颜色
                              color: '#ffffff',
                              fontSize:"1rem"
                          }
                      },
                      //坐标轴线样式
                      splitLine: {
                          show: true,
                          lineStyle: {
                              type: 'solid', //solid实线;dashed虚线
                              color: 'rgba(36, 173, 254, 0.2)'
                          }
                      },
                  },
                  // {
                  //     type: 'value',
                  //     name: '',
                  //     min: 0,
                  //     max: 100,
                  //     interval: 20,
                  //     axisLabel: {
                  //         formatter: '{value}'
                  //     },
                  //     axisLabel: {
                  //         textStyle: {
                  //             //坐标轴颜色
                  //             color: 'rgba(36, 173, 254, 1)',
                  //             fontSize:"1rem"
                  //         }
                  //     },
                  //     //坐标轴线样式
                  //     splitLine: {
                  //         show: true,
                  //         lineStyle: {
                  //             type: 'solid',
                  //             color: 'rgba(36, 173, 254, 0.2)'
                  //         }
                  //     },
                  // }
              ],
              series: [
                  {
                      name: "风速",
                      data: firstIndustry,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: '#ffc600', //改变折线点的颜色
                              lineStyle: {
                                  color: '#ffc600', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                      areaStyle: {
                          //折线图颜色半透明
                          color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [{
                                  offset: 0, color: 'rgba(255,198,0, 0.5)' // 0% 处的颜色
                              }, {
                                  offset: 1, color: 'rgba(255,198,0, 0.1)' // 100% 处的颜色
                              }],
                              global: false // 缺省为 false
                          }
                      }
                  },
                  {
                      name: "降水量",
                      data: thirdIndustry,
                      type: 'line',
                      smooth: true, //true曲线; false折线
                      itemStyle: {
                          normal: {
                              color: 'rgb(2,243,175)', //改变折线点的颜色
                              lineStyle: {
                                  color: 'rgb(2,243,175)', //改变折线颜色
                                  type: 'solid'
                              }
                          }
                      },
                      areaStyle: {
                          //折线图颜色半透明
                          color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [{
                                  offset: 0, color: 'rgba(2,243,175, 0.5)' // 0% 处的颜色
                              }, {
                                  offset: 1, color: 'rgba(2,243,175, 0.1)' // 100% 处的颜色
                              }],
                              global: false // 缺省为 false
                          }
                      }
                  }
              ]
          };
          myChart.setOption(option);
     },
     echartsSixteen(){
       let chartData = {
              funing: [1,2, 3],
              dafeng: [3, 4, 2],
              sheyang: [5, 2, 1],
              jianhu: [2, 1, 1],
              sheyang: [2, 2, 1],
              binhai: [3, 1, 5],
              peidian: [1, 3, 4],
              dongtai: [2, 2, 1],
            }
       var myChart = this.$echarts.init(document.getElementById("echartsSixteen"));
       var option = {
              tooltip: {
                confine: true,
              },
              grid: {
                left: '2%',
                right: '4%',
                bottom: '10%',
                top: '20%',
                containLabel: true,
              },
              legend: {
                icon: 'rect',
                orient: 'horizontal',
                width:'400',
                left: 'center',
                itemWidth: 12,
                itemHeight: 12,
                formatter: ['{a|{name}}'].join('\n'),
                textStyle: {
                  fontSize: 12,
                  color: '#6A93B9',
                  height: 8,
                  rich: {
                    a: {
                      verticalAlign: 'bottom',
                    },
                  },
                },
                data: ['阜宁运维站', '大丰运维站', '射阳运维站','建湖运维站','滨海运维站','配电运检室','东台运维站'],
              },
              xAxis: {
                type: 'category',
                data: ['2022-04-12', '2022-04-14', '2022-04-15'],
                axisLine: {
                  lineStyle: {
                    color: 'rgba(255,255,255,0.45)',
                  },
                },
                axisLabel: {
                  fontSize: 12,
                  color: '#6A93B9',
                },
                axisTick: {
                  show: false,
                },
              },
              yAxis: {
                name: '',
                nameTextStyle: {
                      fontSize: 11,
                      color: '#08c386',
                    },
                type: 'value',
                min: 0,
                minInterval: 1,
                splitArea: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  lineStyle: {
                    color: '#08c386',
                    type: 'dashed', // dotted 虚线
                  },
                },
                axisLabel: {
                  fontSize: 12,
                  color: '#6A93B9',
                  fontFamily: 'Bebas',
                },
              }, 
              
              series: [
                    { type: 'bar',
                    barWidth: 10,
                      itemStyle: { barBorderRadius: [15, 15, 0, 0],},
                      name: '阜宁运维站',
                      label:{
                        show:true,
                        position:'top',
                        color:'#ffffff',
                      },
                      data: chartData.funing 
                      },
                  { type: 'bar', 
                  barWidth: 10, 
                  itemStyle: { barBorderRadius: [15, 15, 0, 0], },
                  label:{
                        show:true,
                        position:'top',
                        color:'#ffffff',
                      },
                  name: '大丰运维站',
                  data: chartData.dafeng 
                  },
                { type: 'bar', 
                  barWidth: 10, 
                  itemStyle: { barBorderRadius: [15, 15, 0, 0], },
                  label:{
                        show:true,
                        position:'top',
                        color:'#ffffff',
                      },
                  name: '射阳运维站',
                  data: chartData.sheyang 
                  },
                  { type: 'bar', 
                  barWidth: 10, 
                  itemStyle: { barBorderRadius: [15, 15, 0, 0], },
                  label:{
                        show:true,
                        position:'top',
                        color:'#ffffff',
                      },
                  name: '建湖运维站',
                  data: chartData.jianhu 
                  },
                  { type: 'bar', 
                  barWidth: 10, 
                  itemStyle: { barBorderRadius: [15, 15, 0, 0], },
                  label:{
                        show:true,
                        position:'top',
                        color:'#ffffff',
                      },
                  name: '滨海运维站',
                  data: chartData.binhai 
                  },
                  { type: 'bar', 
                  barWidth: 10, 
                  itemStyle: { barBorderRadius: [15, 15, 0, 0], },
                  label:{
                        show:true,
                        position:'top',
                        color:'#ffffff',
                      },
                  name: '配电运检室',
                  data: chartData.peidian 
                  },
                  { type: 'bar', 
                  barWidth: 10, 
                  itemStyle: { barBorderRadius: [15, 15, 0, 0], },
                  label:{
                        show:true,
                        position:'top',
                        color:'#ffffff',
                      },
                  name: '东台运维站',
                  data: chartData.dongtai 
                  },
              
              ],
            };
       myChart.setOption(option)
     },
     echartsSeventeen(){
       var myChart = this.$echarts.init(document.getElementById("echartsSeventeen"));
       var option = {
         grid: {
                left: '2%',
                right: '4%',
                bottom: '10%',
                top: '30%',
                containLabel: true,
              },
              legend: {
                orient: 'horizontal',
                top: 'top',
                // right: 'right',
                icon: 'circle',
                itemWidth: 10, 
                itemHeight: 10,
                textStyle: {
                  fontSize: '12px',
                  color: '#a8d5ff',
                }
              },
              //color: ['#ff7824', '#ffde32', '#3bffb7', '#00eaff', '#0084ff'],
              series: [
                {
                  name: 'Nightingale Chart',
                  type: 'pie',
                  radius: [20, 80],
                  center: ['50%', '60%'],
                  roseType: 'area',
                  //roseType: 'radius',
                  // itemStyle: {
                  //   // borderRadius: 0
                  //   //color: '#c23531',
                  //   shadowBlur: 40,
                  //   shadowColor: 'rgba(0, 0, 0, 0.5)',
                  //   // borderWidth: 1,
                  //   // borderJoin: round
                  // },
                  itemStyle: {
                        normal: {
                          labelLine: {
                            length: 5,
                            length2: 8,
                            show: true,
                            color: '#00ffff',
                          },
                        },
                      },
                  label: {
                      //color: '#a8d5ff',
                      fontSize: '14px',
                      //formatter:  '{b}--  {c} --{{d}%}',
                      //formatter: '{dark|{b}}  {color|{c}} {color|({d}%)}',
                      formatter: function(data){
                        return '{color'+data.dataIndex+'|'+data.value+'%}'
                      },
                      rich: {
                        color0: {
                          color: '#ff7824',
                        },
                        color1: {
                          color: '#ffde32',
                        },
                        color3: {
                          color: '#00eaff',
                        },
                        color2: {
                          color: '#3bffb7',
                        },
                        color4: {
                          color: '#0084ff',
                        },
                        color5: {
                          color: 'rgb(86,58,210)',
                        },
                        color6: {
                          color: 'rgb(217,62,117)',
                        },
                      }
                  },
                  color: ['#ff7824', '#ffde32', '#3bffb7', '#00eaff', '#0084ff','rgb(86,58,210)','rgb(217,62,117)'],
                  data: [
                    { value: 30, name: '阜宁运维站' },
                    { value: 20, name: '大丰运维站' },
                    { value: 15, name: '射阳运维站' },
                    { value: 20, name: '建湖运维站' },
                    { value: 15, name: '滨海运维站' },
                     { value: 15, name: '配电运检室' },
                     { value: 15, name: '东台运维站' },
                  ]
                }
              ]
          };
        myChart.setOption(option)
     },
     echartsSmallMap(){
        this.$echarts.registerMap('yancheng', geoJson);
          var myChart = this.$echarts.init(this.$refs.mapBars);
            // 使用数据 geoJson 注册名为 'china' 的地图
             var option ={
                 tooltip: {
                    // 鼠标是否可以进入悬浮框
                    enterable: true,
                    // 触发方式 mousemove, click, none, mousemove|click
                    triggerOn: `click`, 
                    trigger: 'item',
                     // 浮层隐藏的延迟
                    // hideDelay: 800,
                     // 背景色
                    backgroundColor: `rgba(0,0,0,0)`,
                    formatter: function (params) {
                        if (params.componentSubType == 'scatter') {
                             return `<div class=chartLabel>
                            <div class=title>${params.name}</div>
                            <button id="btn-tooltip" onclick="handle('${params.name}')">查看更多</button>
                            </div>`
                        }
                   
                    }
                },
	            	// 一系列的配置参数
                    visualMap: {
                             type: 'piecewise',
                              min: 0,
                              max: 10,
                              left: '50',
                              bottom:'90',
                              showLabel: !0,
                              color: '#fff',
                              // align: 'left',
                              inRange: {
                                  color: ['rgb(190,248,221)', 'rgb(86,202,149)', 'rgb(88,182,229)','rgb(255,186,85)','rgb(241,136,112)'],
                                  symbol: 'rect'
                              },
                              textStyle: {
                                  color: '#fff',
                                  fontSize: '12',
                              }
                        },
	                series: [
                        {
	                    type: 'map',
	                    map: 'yancheng',
                          roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
                        // zoom: 1.23, // 当前视角的缩放比例
                        // scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
                        //     min: 1,  // 最小的缩放值
                        //     max: 10,  // 最大的缩放值
                        // },

                         // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                        label: { 
                            show: true, // 是否显示标签。
                            fontSize: '11',
                            color: 'rgba(0,0,0,0.7)',
                            
                        },
                        
                        itemStyle: {
                            normal: {
                                areaColor: '#dfdfdf',
                                borderColor: '#ffffff',
                                borderWidth: 0.5,
                            },
                            emphasis: {
                                areaColor: '#9ebd2a'
                            }
                        },
                        data:[
                            { name: '滨海县', value: 1 },
                            { name: '大丰市', value: 3 },
                            { name: '东台市', value: 5 },
                            { name: '阜宁县', value: 7 },
                            { name: '建湖县', value: 8 },
                            { name: '射阳县', value: 9 },
                            { name: '亭湖区', value: 10},
                            { name: '响水县', value: 2},
                            { name: '盐都区', value: 4},
                        ],
                         
	                },
               
                    ]
	              };
                myChart.on('click', function(params){
                      if (params.componentSubType == 'scatter') {
                        console.log(params,'params');//此处可以写一些某个市被点击后的操作
                      }
                });
                myChart.setOption(option);
     },
     handlePop(val){
       this.popTableShow = 0;
       if (val == 1) {
         this.modelOthers = true
         this.componentShow = 'pop';
         this.popName = '污染企业监测';
         this.popTableShow = val
       }else if (val == 2) {
         this.modelOthers = true
         this.componentShow = 'pop';
         this.popName = '非统调光伏电站座数分布';
         this.popTableShow = val
       }else if (val == 3) {
         this.modelOthers = true
         this.componentShow = 'pop';
         this.popName = '非统调电厂';
         this.popTableShow = val
       }else if (val == 4) {
         getData({
           action:'one',
           key:'非统调光伏电站装机容量'
         }).then((res)=>{
            this.modelOthers = true
            this.componentShow = 'pop';
            this.popName = '非统调光伏电站装机容量分布';
            this.popTableShow = val
           this.popTableData4 = res.data.data
         })
       }
     }
  },
  components:{
    pop
  }
}

</script>

<style lang="less" scoped>
.main{
  width: 100%;
  height: 100%;
  padding: 0.1% 0.4% 0.1% 0.4%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .energyPlanning{
    width: 9.84%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .energyTop{
      width: 100%;
      height: 48.5%;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      .title{
        width:100%;
        height: 9%;
        color: #ffffff;
        font-size: 25px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url("../assets/images/titleTop.png") no-repeat;
       background-size: 100% 100%;
      }
      .title:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(11,243,194);
        -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
    }
      .content{
        width: 100%;
        height: calc(100% - 10%);
        background: url("../assets/images/kuang.png") no-repeat;
       background-size: 100% 100%;
       color: #ffffff;
       text-indent : 32px;
       letter-spacing:1px;
       text-align:left;
       line-height:25px;
       overflow: auto;
       padding:2%;
       box-sizing: border-box;
        &::-webkit-scrollbar{
        width: 0;
      }
      }
    }
    .energyBottom{
      width: 100%;
      height: 48.5%;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
     .title{
        width:100%;
        height: 9%;
        color: #ffffff;
        font-size: 25px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url("../assets/images/titleTop.png") no-repeat;
       background-size: 100% 100%;
      }
      .title:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(11,243,194);
        -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
    }
      .content{
        width: 100%;
        height: calc(100% - 10%);
        background: url("../assets/images/kuang.png") no-repeat;
       background-size: 100% 100%;
       .details{
         height: 10%;
         width: 100%;
        padding-right: 2%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
       }
       #echartsOne{
         height: calc(100% - 10%);
         width: 100%;
       }
      }
    }
  }
  .powerProduction{
    width: 30.2%;
    height: 100%;
     display: flex;
      flex-wrap: wrap;
      align-content: space-around;
    .title{
        width:100%;
        height: 4.6%;
        color: #ffffff;
        font-size: 25px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url("../assets/images/dianliTop.png") no-repeat;
       background-size: 100% 100%;
      }
      .title:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(11,243,194);
        -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
    }
      .content{
        width: 100%;
        height: calc(100% - 4.6%);
        display: flex;
        flex-wrap: wrap;
       align-content: space-between;
        .powerProductionTop{
          height: 48.5%;
          width: 100%;
          display: flex;
          justify-content: space-between;
          .one{
            width: 32.5%;
            height: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
            background-size: 100% 100%;
            .oneContent{
                 width: 100%;
                  height:calc(100% - 8%);
                  padding: 3%;
                  box-sizing: border-box;
                  display: flex;
                  flex-wrap: wrap;
                  align-content: space-between;
                  .powerCount{
                      width: 100%;
                      height: 32.7%;
                        background: url("../assets/images/powerKuang.png") no-repeat;
                        background-size: 100% 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        .powerImg{
                          width: 35%;
                          height: 100%;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        }
                        .powerNumber{
                          width: calc(100% - 40%);
                          height: 100%;
                           display: flex;
                          flex-wrap: wrap;
                          justify-content: center;
                          align-items: center;
                          align-content: center;
                          flex-direction: column;
                        }
                      
                }
                .echartsCount{
                  width: 100%;
                  height:calc(100% - 35%);
                  display: flex;
                  justify-content: space-between;
                  #echartsTwo{
                    width: 78%;
                    height: 100%;
                  }
                  .btnCity{
                    width: calc(100% - 80%);
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;
                    flex-wrap: wrap;
                    .btnCityList{
                      width: 94%;
                      height: 11.7%;
                      color: #ffffff;
                      background: url("../assets/images/mapKuang.png") no-repeat;
                      background-size: 100% 100%;
                    }
                    .btnCityList:before{
                      content: attr(text);
                      position: absolute;
                      z-index: 10;
                      color:rgb(11,243,194);
                      -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
                  }
                    .cityActive{
                      width: 94%;
                      height: 11.7%;
                      color: #ffffff;
                      background: url("../assets/images/mapAction.png") no-repeat;
                      background-size: 100% 100%;
                    }
                    .cityActive:before{
                      content: attr(text);
                      position: absolute;
                      z-index: 10;
                      color:#ffffff;
                  }
                  }
                }
            }
            
          }
          .two{
            width: 32.5%;
            height: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
            background-size: 100% 100%;
           .twoCount{
             width: 100%;
            height: calc(100% - 8%);
             .details{
                  height: 10%;
                  width: 100%;
                  padding-right: 2%;
                  box-sizing: border-box;
                  display: flex;
                  justify-content: flex-end;
                }
                #echartsThree{
                  height: calc(100% - 10%);
                  width: 100%;
                }
           }
          }
          .three{
            width: 32.5%;
            height: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
            background-size: 100% 100%;
            .threeCount{
             width: 100%;
            height: calc(100% - 8%);
             .details{
                  height: 10%;
                  width: 100%;
                  padding-right: 2%;
                  box-sizing: border-box;
                  display: flex;
                  justify-content: flex-end;
                }
                #echartsFour{
                  height: calc(100% - 10%);
                  width: 100%;
                }
           }
          }
        }
        .powerProductionDown{
          height: 48.5%;
          width: 100%;
          display: flex;
          justify-content: space-between;
          .one{
            width: 32.5%;
            height: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
            background-size: 100% 100%;
            .OneContent{
              width: 100%;
            height: calc(100% - 8%);
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
              #echartsFive{
                width: 100%;
                height: 63%;
              }
              .type{
                width: 100%;
                height: calc(100% - 65%);
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-around;
                .typeChange{
                  width: 40%;
                  height: 30%;
                  color: #ffffff;
                  background: url("../assets/images/mapKuang.png") no-repeat;
                  background-size: 100% 100%;
                  align-items: center;
                  display: flex;
                  justify-content: space-around;

                }
                .typeChange:before{
                      content: attr(text);
                      position: absolute;
                      z-index: 10;
                      color:rgb(11,243,194);
                      -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
                  }
                  .powerTypeAction{
                    width: 40%;
                    height: 30%;
                    color: #ffffff;
                    background: url("../assets/images/mapAction.png") no-repeat;
                    background-size: 100% 100%;
                    align-items: center;
                    display: flex;
                    justify-content: space-around;
                  }
                  .powerTypeAction:before{
                      content: attr(text);
                      position: absolute;
                      z-index: 10;
                      color:#ffffff;
                  }
              }
            }
          }
          .two{
            width: 32.5%;
            height: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
            background-size: 100% 100%;
            .twoCount{
             width: 100%;
            height: calc(100% - 8%);
             .details{
                  height: 10%;
                  width: 100%;
                  padding-right: 2%;
                  box-sizing: border-box;
                  display: flex;
                  justify-content: flex-end;
                }
                #echartsSix{
                  height: calc(100% - 10%);
                  width: 100%;
                }
           }
          }
          .three{
            width: 32.5%;
            height: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
            background-size: 100% 100%;
            .threeContent{
             width: 100%;
            height: calc(100% - 8%);
            padding:3%;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
                .seaCount{
                  width: 100%;
                  height: 33%;
                  display: flex;
                  justify-content: space-between;
                  .seaNumber{
                    height: 100%;
                    width: 24%;
                    color: #ffffff;
                  background: url("../assets/images/seaKuang.png") no-repeat;
                  background-size: 100% 100%;
                  display: flex;
                  align-items: center;
                  -webkit-box-align: center;
                  align-items: center;
                  flex-wrap: wrap;
                  align-content: center;
                  justify-content: space-around;
                  }
                }
                #echartsSeven{
                  width: 100%;
                  height: calc(100% - 38%);
                }
            }
          }
        }
      }
  }
  .newEnergy{
    width: 15.5%;
    height: 100%;
     display: flex;
      flex-wrap: wrap;
      align-content: space-around;
    .title{
        width:100%;
        height: 4.6%;
        color: #ffffff;
        font-size: 25px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url("../assets/images/xinnengyuanTop.png") no-repeat;
       background-size: 100% 100%;
      }
      .title:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(11,243,194);
        -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
    }
      .content{
        width: 100%;
        height: calc(100% - 4.6%);
         background: url("../assets/images/bigKuang.png") no-repeat;
       background-size: 100% 100%;
       position: relative;
       #echartsMap{
          height: 100%;
          width: 100%;
          // z-index: 200;
        };
       .mapCity{
         height: 35%;
         width: 11%;
         position: absolute;
         bottom: 2%;
         right: 2%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        z-index: 100;
         .cityBtn{
           width: 100%;
           height: 9%;
           color: #ffffff;
           background: url("../assets/images/mapKuang.png") no-repeat;
           background-size: 100% 100%;
           display: flex;
           align-items: center;
           justify-content: center
         }
         .cityBtn:before{
              content: attr(text);
              position: absolute;
              z-index: 10;
              color:rgb(11,243,194);
              -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
          }
          .mapCityAction{
                width: 100%;
              height: 9%;
              color: #ffffff;
              background: url("../assets/images/mapAction.png") no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center
          }
          .mapCityAction:before{
              content: attr(text);
              position: absolute;
              z-index: 10;
              color:#ffffff;
          }
       }
      }
  }
  .car{
    width: 9.84%;
    height: 100%;
     display: flex;
      flex-wrap: wrap;
      align-content: space-around;
    .title{
        width:100%;
        height: 4.6%;
        display: flex;
        font-size: 25px;
        color: #ffffff;
        justify-content: space-around;
        align-items: center;
        background: url("../assets/images/titleTop.png") no-repeat;
       background-size: 100% 100%;
      }
      .title:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(11,243,194);
        -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
    }
      .content{
        width: 100%;
        height: calc(100% - 4.6%);
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        .one{
          height: 48.5%;
          width: 100%;
          background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
          .oneContent{
            width: 100%;
            height: calc(100% - 8%);
            #echartsEight{
              width: 100%;
            height: 100%;
            }
          }
        }
        .two{
          height: 48.5%;
          width: 100%;
          background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
          .twoContent{
            width: 100%;
            height: calc(100% - 8%);
            #echartsNine{
              width: 100%;
            height: 100%;
            }
          }
        }
      }
  }
  .Bicarbon{
    width: 9.84%;
    height: 100%;
     display: flex;
      flex-wrap: wrap;
      align-content: space-around;
    .title{
        width:100%;
        height: 4.6%;
        display: flex;
        font-size: 25px;
        color: #ffffff;
        justify-content: space-around;
        align-items: center;
        background: url("../assets/images/titleTop.png") no-repeat;
       background-size: 100% 100%;
      }
      .title:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(11,243,194);
        -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
    }
      .content{
        width: 100%;
        height: calc(100% - 4.6%);
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        .one{
          height: 31.6%;
          width: 100%;
          background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
        }
        .two{
          height: 32%;
          width: 100%;
          
          .title{
             width:100%;
              height: 15.8%;
              display: flex;
              font-size: 25px;
              color: #ffffff;
              justify-content: space-around;
              align-items: center;
              background: url("../assets/images/titleTop.png") no-repeat;
              background-size: 100% 100%;
          }
          .twoContent{
            width: 100%;
            height: calc(100% - 15.8%);
            background: url("../assets/images/kuang.png") no-repeat;
            background-size: 100% 100%;
            .twoTitle{
              height: 15%;
            }
            .cleanEnergy{
              width: 100%;
              height: calc(100% - 15%);
              display: flex;
              justify-content: space-between;
              padding: 1%;
              box-sizing: border-box;
                  .left{
                      width:49%;
                      height: 100%;
                      padding: 1%;
                      box-sizing: border-box;
                      .cleanEnergyTop{
                        height: 12%;
                        width: 100%;
                        background: url("../assets/images/energyKuang.png") no-repeat;
                        background-size: 100% 100%;
                        box-sizing: border-box;
                        padding-left: 5%;
                        .cleanEnergyText{
                          color: #ffffff;
                          display: flex;
                          align-items: center;
                        }
                        .cleanEnergyText:before{
                            content: attr(text);
                            position: absolute;
                            z-index: 10;
                            color:rgb(11,243,194);
                            -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
                        }
                      }
                      #echartsTen{
                        height: calc(100% - 12%);
                        width: 100%;
                        // border: 1px solid red;
                      }
                    }
                .right{
                      width:49%;
                      height: 100%;
                      padding: 1%;
                      box-sizing: border-box;
                      .cleanEnergyTop{
                        height: 12%;
                        width: 100%;
                        background: url("../assets/images/energyKuang.png") no-repeat;
                        background-size: 100% 100%;
                        box-sizing: border-box;
                        padding-left: 5%;
                        .cleanEnergyText{
                          color: #ffffff;
                          display: flex;
                          align-items: center;
                        }
                        .cleanEnergyText:before{
                            content: attr(text);
                            position: absolute;
                            z-index: 10;
                            color:rgb(11,243,194);
                            -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
                        }
                      }
                      #echartsEleven{
                        height: calc(100% - 12%);
                        width: 100%;
                        // border: 1px solid red;
                      }
                    }
            }
            
          }
        }
        .three{
          height: 31.5%;
          width: 100%;
          display: flex;
          justify-content: space-between;
          .first{
            height: 100%;
            width: 48.5%;
            background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
            .twoTitle{
              height: 11%;
              background: url("../assets/images/twoTitle1.png") no-repeat;
              background-size: 100% 100%;
            }
            .threeContent{
              width: 100%;
              height: calc(100% - 11%);
              #echartsTwelve{
                width: 100%;
                height: 100%;
              }
            }
          }
          .second{
            height: 100%;
            width: 48.5%;
            background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
          .twoTitle{
              height: 11%;
              background: url("../assets/images/twoTitle1.png") no-repeat;
              background-size: 100% 100%;
            }
            .secondContent{
              width: 100%;
              height: calc(100% - 11%);
              #echartsThirteen{
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
  }
  .meteorological{
    width: 22.5%;
    height: 100%;
     display: flex;
      flex-wrap: wrap;
      align-content: space-around;
    .title{
        width:100%;
        height: 4.6%;
        color: #ffffff;
        font-size: 25px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url("../assets/images/qixiangTop.png") no-repeat;
       background-size: 100% 100%;
      }
      .title:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(11,243,194);
        -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
    }
      .content{
        width: 100%;
        height: calc(100% - 4.6%);
        display: flex;
        justify-content: space-between;
        .one{
          width: 58.5%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;
          .first{
            height: 31.5%;
            width: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
          .twoTitle{
            height: 12.3%;
          }
          .oneContent{
            height: calc(100% - 12.3%);
            width: 100%;
            #echartsFourteen{
              height: 100%;
              width: 100%;
            }
          }
          }
          .second{
            height: 31.5%;
            width: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
          .twoTitle{
            height: 12.3%;
          }
          .secondContent{
            height: calc(100% - 12.3%);
            width: 100%;
            #echartsFifteen{
               height: 100%;
              width: 100%;
            }
          }
          }
          .third{
            height: 31.5%;
            width: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
          .twoTitle{
            height: 12.3%;
          }
          .thirdContent{
            height: calc(100% - 12.3%);
            width: 100%;
            display: flex;
            #echartsSixteen{
              height: 100%;
              width: 60%;
            }
            #echartsSeventeen{
              height: 100%;
              width: 40%;
            }
          }
          }
        }
        .two{
          width: 39.5%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;
           .first{
            height: 48.5%;
            width: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
          .twoTitle{
            height: 8%;
          }
          .twoContent{
            width: 100%;
            height: calc(100% - 8%);
            position: relative;
            .count{
              width: 25.5%;
              height: 26.8%;
              background: url("../assets/images/seaKuang.png") no-repeat;
              background-size: 100% 100%;
              position: absolute;
              top: 4%;
              left: 4%;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-content: center;
            }
            .iconYisun{
              position: absolute;
              width: 25%;
              height: 50%;
              background: url("../assets/images/yisun.png") no-repeat;
              background-size: 100% 100%;
              bottom: 14%;
              left: 4%;
              display: flex;
              justify-content: center;
              color: #ffffff;
              padding-top: 3%;
              box-sizing: border-box;
            }
            .select{
              position: absolute;
              width: 29%;
              height: 10%;
              right: 4%;
              top: 4%;
              z-index: 100;
              .el-select{
                ::v-deep .el-input--suffix .el-input__inner{
                background: url("../assets/images/selectKuang.png") no-repeat;
                background-size: 100% 100%;
              }
              ::v-deep .el-input__inner{
                border: none;
                color:#ffffff;
              }
               ::v-deep.el-select .el-input .el-select__caret{
                 color: rgb(3,196,142);
              }
              
              }
              
            };
            #echartsSmallMap{
              width: 100%;
              height: 100%;
            }
            
          }
          }
          .second{
            height: 48.5%;
            width: 100%;
            background: url("../assets/images/kuang.png") no-repeat;
          background-size: 100% 100%;
          .twoTitle{
            height: 8%;
          }
          .secondContent{
            width: 100%;
            height: calc(100% - 8%);
            padding-top: 3%;
            box-sizing: border-box;
             /deep/ .el-table {
                  background-color: transparent !important;
                  height: 100%;
                  overflow-y: auto;
                }
                /deep/ .el-table th {
                        background-color: transparent;
                      }
                      /deep/ .el-table__header {
                        height: 48px;
                        background: url("../assets/images/table.png") no-repeat ;
                        background-size: 100% 100%;
                      }
                      /deep/ .el-table__header th {
                        border: none;
                        padding: 0;
                        height: 48px;
                        .cell {
                          height: 100%;
                          display: flex;
                          align-items: center;
                        }
                        &.el-table__cell.is-leaf {
                          border: none !important;
                        }
                      }
                      /deep/ .el-table tr {
                        background-color: transparent;
                      }
                      /deep/ .el-table--enable-row-transition .el-table__body td,
                      .el-table .cell {
                        // background-color: transparent !important;
                        border: none;
                        color: rgb(4,237,174);
                      }
                      /deep/ .el-table__body td .cell {
                        white-space: nowrap !important;
                        // word-break: break-all;
                      }
                      /deep/ .el-table th.el-table__cell>.cell{
                        color: #FFFFFF;
                      }
                      /deep/.el-table::before{
                      background-color: transparent;
                    }
                    /deep/.el-table ::-webkit-scrollbar{
                      display:none;
                    }
                    // 表格斑马自定义颜色
                  
                  /deep/ .el-table tbody tr:hover > td {
                  background: rgb(6,168,127) !important;
                }
                /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
                    background: rgb(5, 70, 59);
                  }
             }
          }
        }
      }
  }
}

.twoTitle{
        height: 8%;
        width: 100%;
        color: #ffffff;
        background: url("../assets/images/twoTitle.png") no-repeat;
        background-size: 100% 100%;
        font-size: 18px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .twoTitle:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:rgb(11,243,194);
        -webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
    }
    //弹窗样式
  .componentShow{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    // left: 0;
    right: 100;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
  }
</style>
<style lang="less" >
.el-select-dropdown{
    background-color: rgb(8,52,41) !important;
    border: 1px solid rgb(3,196,142);
    .el-select-dropdown__item{
      color: #ffffff !important;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
      background-color: rgb(8,52,41) !important;
    }
}  
</style>


