echarts +iview tabs 散点图不显示、缩成一团

首先遇到问题：echarts 地图滚轮缩放错误。
https://www.cnblogs.com/hao-1234-1234/p/13140070.html
关闭tabs动画，缩放问题解决了。
但引发新的问题：百度底图正常显示，但echarts散点图缩成一团或不显示。
原因是：如果不是动画，那么 tabs切换前，这个tab是没有高度和宽度的。
解决：给tabs 加点击事件，点击事件里该echarts对象调用resize方法重置高度和宽度。
但又出现了问题：百度地图数据加载总是有部分失败！！
解决： tabs点击事件中重新请求！！！每次请求结束后就调用resize。
问题一个接一个，iview tabs 这东西，真是日了狗！
源代码：
   1 @{
   2     ViewBag.Title = "自然植物名录";
   3     Layout = "~/Views/Shared/_LayoutNotFooter.cshtml";
   4 }
   5 @Html.Partial("ViewPhotoWithAttr")
   6 @*<link href="~/Scripts/viewer/viewer.min.css?v=20190612" rel="stylesheet" />
   7     <script src="~/Scripts/viewer/viewer.min.js?v=20190612"></script>*@
   8 <script src="~/Scripts/common/common.map.js?v=202005281610"></script>
   9 <script src="~/Scripts/common/construct.plants2.js?v=202008111600"></script>
  10 <script src="//api.map.baidu.com/api?v=2.0&ak=购买百度ak"></script>
  11 <script src="~/Scripts/bmap.min.js"></script>
  12 
  13 @Html.Partial("MapPartial")
  14 @Html.Partial("MapPartial")
  15 <style>
  16     .full-card {
  17         position: absolute;
  18         height: 100%;
  19         width: 100%;
  20     }
  21       .full-card .nav-tree {
  22             position: absolute;
  23             top: 10px;
  24             left: 0px;
  25             right: 0px;
  26             bottom: 0px;
  27             overflow: auto;
  28             padding: 5px 10px;
  29         }
  30 
  31     .vertical-center-modal {
  32         display: flex;
  33         align-items: center;
  34         justify-content: center;
  35     }
  36 
  37     .vertical-center-modal .ivu-modal {
  38         top: 0;
  39     }
  40 
  41     .demo-carousel {
  42         height: 400px;
  43         line-height: 200px;
  44         text-align: center;
  45         font-size: 20px;
  46     }
  47 
  48     .ivu-tree li ul {
  49         margin: 0;
  50         padding: 0 0 0 10px;
  51     }
  52 
  53     .div2 {
  54         margin: 0;
  55         padding: 0 10px 0 10px;
  56     }
  57 
  58     .div3 {
  59         margin: 0;
  60         padding: 20px 0px 10px 0px;
  61     }
  62 
  63     /*.carousel-text {
  64         position: absolute;
  65         bottom: 25px;
  66         height: 30px;
  67         width: 100%;
  68         text-align: center;
  69         color: white;
  70         background-color: rgba(0,0,0,0.3);
  71     }*/
  72            .carousel-text{
  73         position: relative;
  74         bottom: 35px;
  75         width: 100%;
  76         font-size:13px;
  77          /*width: auto;*/ /*也可以*/ 
  78         text-align: center;
  79         color: white;
  80         background-color: rgba(0,0,0,0.3);
  81     }
  82     .mydiv {
  83         padding: 20px 0px 0 10px;
  84         line-height: 30px;
  85         font-size: 14px;
  86     }
  87 
  88     .mydiv1 {
  89         padding:5px 10px 0 30px;
  90         line-height: 40px;
  91         color: #000;
  92         font-size: 16px;
  93     }
  94 
  95     .mydiv span {
  96         color: #000;
  97     }
  98     .mydiv2{
  99      font-style:italic
 100     }
 101 </style>
 102 
 103 <style type="text/css">
 104     .attr-form .ivu-form-item {
 105         margin-bottom: 0px;
 106     }
 107     .map-left-card .ivu-card-body{    
 108         overflow: auto;
 109         position: absolute;
 110         top: 50px;
 111         bottom: 0px;
 112     }
 113 
 114      .full-content{
 115         position: relative;
 116         height: 100%;
 117         width:100%;
 118     }
 119     .full-content .ivu-tabs{
 120         position: relative;
 121         height: 100%;
 122         width:100%;
 123     }
 124     .full-content .ivu-tabs .ivu-tabs-content{
 125         height: calc(100% - 52px);
 126         width:100%;
 127     }
 128     .full-content .ivu-tabs .ivu-tabs-content .ivu-tabs-tabpane{
 129         height: 100%;
 130         width:100%;
 131     }
 132 </style>
 133 
 134 <script type="text/x-template" id="viewTemplate">
 135     <div  style="width:100%;height:100%">
 136         <div id="contentFirst" v-show="!showSecond" style="width:100%;height:100%">
 137             <Layout style="width:100%;height:100%">
 138 
 139                 <Sider v-bind:width="270" style="background: #eee;margin:0px 0px 0px 0px;">
 140                     <Card style="width:100%;height:100%"  class="full-card">
 141                         <div class="nav-tree" >
 142                             <Row >
 143                                 <Col span="18">
 144                           
 145                                     <i-input type="text" v-model="formFilter.DValue" placeholder="请输入关键字" style="width:100%"></i-input>
 146                                 
 147                                 </Col>
 148                                 <Col span="6">
 149                                 <div style="margin:0px 10px 0px 5px">
 150                                     <i-button type="primary" size="default"  v-on:click="filterClick">查询</i-button>
 151                                 </div>
 152                                 </Col>
 153                             </Row>
 154                             <row style="margin:10px 5px 0px 0px">
 155                                 <Col span="24">
 156                                 <Select v-model="coastalZone" style="width:100%" multiple placeholder="所有海拔高度">
 157 
 158                                     <Option v-for="item in coastalZoneList" v-bind:value="item.value" v-bind:key="item.value">{{ item.label }}</Option>
 159                                 </Select>
 160                                 </Col>
 161                             </row>
 162                             <row>
 163                                 <Col span="24">
 164                                 <Tree v-bind:data="data1" v-on:on-select-change="treeClick"></Tree>
 165                                 </Col>
 166                             </row>
 167                  
 168                            
 169                         </div>
 170                     </Card>
 171                 </Sider>
 172                 <Layout >
 173                     <Content  class="full-content">
 174                         <Tabs v-bind:value="activeKey" v-on:on-click="tabsClick" ref="tabs" v-bind:animated="false">
 175                             <Tab-pane label="植物列表" name="key1" v-bind:index="1">
 176 
 177                                 <datagrid border ref="gv" v-bind:height="tableHeight" v-bind:columns="columns1" v-bind:url="url" size="small" v-bind:page-small="false"></datagrid>
 178                             </Tab-pane>
 179                             @*<Tab-pane v-show="showEchartsMap" :lazy="true" label="物种分布" name="key2" v-bind:index="2">
 180                            
 181                                       <div ref="plantsMapEchartsID" style="height:100%;width:100%"> </div>
 182                          
 183                             </Tab-pane>*@
 184                             <Tab-pane  label="物种分布" name="key2" v-bind:index="2">
 185 
 186                                 <div ref="plantsMapEchartsID" style="height:100%;width:100%"> </div>
 187 
 188                             </Tab-pane>
 189 
 190                         </Tabs>
 191                     </Content>
 192                 </Layout>
 193             </Layout>
 194         </div>
 195 
 196 
 197         <div id="contentSecond" v-show='showSecond'  style="width:100%;height:100%">
 198             <Layout style="width:100%;height:100%">
 199                 <Content>
 200 
 201                     <div style="position:absolute;top: 144px;right: 30px;">
 202                         <div style="position: relative;z-index:99999">
 203                             <a id="btn" href="javascript:;">
 204                                 <tooltip content="返回列表" placement="top-end">
 205                                     <img src="/Ecology/Images/icons8-return-30.png" />
 206                                 </tooltip>
 207                             </a>
 208                         </div>
 209                     </div>
 210 
 211                     <div v-if='showSecond'  style="width:100%;height:100%">
 212                         <Tabs v-bind:value="activeKeySecond" v-on:on-click="tabsClickSecond">
 213                             <Tab-pane label="植物详情" name="key3" v-bind:index="1">
 214                                 <div v-bind:style="bindStyle_yd">
 215                                     <div class="container">
 216                                         <row>
 217                                             <i-col span="5">
 218                                                 &nbsp;
 219                                             </i-col>
 220                                             <i-col span="14">
 221                                                 <div class="mydiv1" style="text-align:center">
 222                                                     <span> {{formModel.Species}}  </span>
 223                                                     <span style="font-style:italic"> {{formModel.LatinSpecies}}  </span>
 224                                                 </div>
 225                                             </i-col>
 226                                             <i-col span="5">
 227                                             </i-col>
 228                                         </row>
 229                                         <div id="dowebok">
 230                                             <Carousel v-bind:height="imgHeight+'px'" v-model="carouselValue" style="text-align:center;" dots="outside">
 231                                                 <div v-for="item in imgData" v-on:click="handleView(item)">
 232                                                     <Carousel-Item>
 233                                                         <img v-bind:src="item.src" style="height:inherit;width:auto;cursor:pointer;" />
 234                                                         <div><span class="carousel-text"> {{item.picName}}</span></div>
 235                                                     </Carousel-Item>
 236                                                 </div>
 237                                             </Carousel>
 238                                         </div>
 239 
 240                                         <ViewPhotoWithAttr ref="viewerYd" v-bind:image-list="imgData" />
 241                                         <row>
 242 
 243                                             <i-col span="24">
 244                                                 <div class="mydiv">
 245                                                     <row>
 246                                                         <i-col span="9">
 247                                                             科： <span> {{formModel.Family}}  </span><span> {{formModel.LatinFamily}} </span>
 248                                                         </i-col>
 249                                                         <i-col span="9">
 250                                                             属： <span> {{formModel.Genus}}  </span><span> {{formModel.LatinGenus}} </span>
 251                                                         </i-col>
 252                                                         <i-col span="6">
 253                                                             国家保护等级： <span> {{formModel.NationalConservationLevel}} </span>
 254                                                         </i-col>
 255                                                     </row>
 256                                                     <row>
 257                                                         <i-col span="9">
 258                                                             中国生物多样性红色名录： <span> {{translateChineseSpeciesRedList(formModel.ChinaBiodiversityRedList)}} </span>
 259                                                         </i-col>
 260                                                         <i-col span="9">
 261                                                             别名： <span> {{formModel.AnotherName}} </span>
 262                                                         </i-col>
 263                                                         <i-col span="6">
 264                                                             CITES附录： <span> {{formModel.CITESAppendix}} </span>
 265                                                         </i-col>
 266 
 267                                                     </row>
 268                                                     <row>
 269                                                         <i-col span="9">
 270                                                             海拔： <span> {{formModel.Altitude}}(米) </span>
 271                                                         </i-col>
 272                                                         <i-col span="9">
 273                                                             外来与入侵种： <span> {{formModel.ExoticOrInvasiveSpeciesName}} </span>
 274                                                         </i-col>
 275                                                         <i-col span="6">
 276                                                             IUCN濒危等级： <span> {{translateChineseSpeciesRedList(formModel.IUCNEndangeredGrade)}} </span>
 277                                                         </i-col>
 278                                                     </row>
 279                                                     <row>
 280                                                         <i-col span="24">
 281                                                             分布： <span> {{formModel.Locations}} </span>
 282                                                         </i-col>
 283 
 284                                                     </row>
 285                                                 </div>
 286                                             </i-col>
 287                                         </row>
 288                                     </div>
 289                                 </div>
 290                             </Tab-pane>
 291 
 292                             <Tab-pane label="调查结果" name="key4" v-if="showMap" v-bind:index="2">
 293 
 294                                 <Layout style="height:100%">
 295                                     <i-Content style="height:100%">
 296                                         <Cesium-Map ref="cesiumMap" style="position: relative;height:100%;width: 100%;" @@data-click="handleMapDataClick"></Cesium-Map>
 297                                     </i-Content>
 298                                     <Sider style="background-color: rgb(245, 247, 249);" v-bind:width="250" v-show="selectPoint">
 299                                         <card style="height:100%" class="map-left-card">
 300                                             <p slot="title">植物详情</p>
 301                                             <i-form v-bind:label-width="80" class="attr-form">
 302                                                 <Form-Item label="物种名称">
 303                                                     <span> {{selectInfo.Species}} </span>
 304                                                 </Form-Item>
 305                                                 <Form-Item label="物种数量">
 306                                                     <span> {{selectInfo.Quantity }} </span>
 307                                                 </Form-Item>
 308                                                 <Form-Item label="样地编号">
 309                                                     <span> {{selectInfo.PlotID }}  </span>
 310                                                 </Form-Item>
 311                                                 <Form-Item label="样地地点">
 312                                                     <span>  {{selectInfo.SamplePlotAddress}} </span>
 313                                                 </Form-Item>
 314 
 315                                                 <Form-Item label="经纬度">
 316                                                     <span> {{selectInfo.LonAndLat}} </span>
 317                                                 </Form-Item>
 318                                                 <Form-Item label="样地面积">
 319                                                     <span v-if="selectInfo.SamplePlotArea"> {{selectInfo.SamplePlotArea}}  (㎡)</span>
 320                                                 </Form-Item>
 321                                                 <Form-Item label="海拔">
 322                                                     <span v-if="selectInfo.Altitude"> {{selectInfo.Altitude}} (米)</span>
 323                                                 </Form-Item>
 324                                                 <Form-Item label="坡度">
 325                                                     <span v-if="selectInfo.Slope"> {{selectInfo.Slope}} (度)</span>
 326                                                 </Form-Item>
 327                                                 <Form-Item label="调查时间">
 328                                                     <span> {{selectInfo.InvestigationTime}} </span>
 329                                                 </Form-Item>
 330                                                 <Form-Item label="调查人">
 331                                                     <span> {{selectInfo.Investigator}} </span>
 332                                                 </Form-Item>
 333 
 334                                                 <div v-if="weatherData!=null&& weatherData.RecordDate">
 335                                                     <div style="margin:10px 0px 0px 15px "><label>现场气象</label></div>
 336                                                     <Form-Item label="数据时间">
 337                                                         <span v-if="weatherData.RecordDate">{{ weatherData.RecordDateString }}</span>
 338                                                         <span v-if="weatherData.RecordDate">{{ weatherData.DataHour +'时' }}</span>
 339                                                     </Form-Item>
 340 
 341                                                     <Form-Item label="温度">
 342                                                         <span>{{ weatherData.Temperature }} (℃)</span>
 343                                                     </Form-Item>
 344 
 345                                                     <Form-Item label="降雨量">
 346                                                         <span>{{ weatherData.Rainfall }} (mm/h)</span>
 347                                                     </Form-Item>
 348 
 349                                                     <Form-Item label="相对湿度">
 350                                                         <span>{{ weatherData.RelativeHumidity }} (%)</span>
 351                                                     </Form-Item>
 352 
 353                                                     <Form-Item label="风速">
 354                                                         <span>{{ weatherData.AvgWind }} (m/s)</span>
 355                                                     </Form-Item>
 356 
 357                                                     <Form-Item label="风向">
 358                                                         <span>{{ weatherData.WindDir }}</span>
 359                                                     </Form-Item>
 360 
 361                                                     <Form-Item label="能见度">
 362                                                         <span>{{ weatherData.Visibility }} (km)</span>
 363                                                     </Form-Item>
 364 
 365                                                 </div>
 366                                             </i-form>
 367 
 368 
 369                                         </card>
 370                                     </Sider>
 371                                 </Layout>
 372                             </Tab-pane>
 373 
 374                         </Tabs>
 375 
 376                     </div>
 377 
 378                 </Content>
 379             </Layout>
 380         </div>
 381 
 382     </div>
 383 </script>
 384     <div id="app">
 385     </div>
 386 
 387     <script>
 388         var locationType = 1;
 389         var coastalZone = [];
 390         //是否珍惜植物
 391         var isRare = true;
 392         var coastalZoneList= [
 393              //{ value: 0, label: "全部" },
 394              { value: 1, label: "海岸带0-30m" },
 395              { value: 2, label: "0-200m" },
 396              { value: 3, label: "200-400m" },
 397              { value: 4, label: "400-600m" },
 398              { value: 5, label: "600-900m" }
 399             ]
 400         var vm = new Vue({
 401             template: "#viewTemplate",
 402             el: '#app',
 403             data: {
 404                 plantsMapEcharts:null,
 405                 query:'',
 406                 showEchartsMap:true,
 407                 tabsHeight_yd: 600,
 408                 activeKeySecond: 'key3',
 409                 showSecond: false,
 410                 coastalZone: coastalZone,
 411                 coastalZoneList: coastalZoneList,
 412                 data1: [],
 413                 //查询默认值
 414                 formFilter: {
 415                     DValue: '',
 416                 },
 417                 tableHeight: 700,
 418                 imgHeight: 350,
 419                 showMap: false,
 420                 locationList: null,
 421                 selectedItem: null,
 422                 selectPoint: null,
 423                 selectInfo: {},
 424                 weatherData: {},
 425                 speciesIfreamHeight: 600,
 426                 show2: false,
 427                 activeKey: 'key1',
 428                 formModel: {
 429                 },
 430                 imgData:[],
 431                 carouselValue: 0,
 432                 url: '@Url.Action("Plants2List", "Construct")' + '?locationType=' + locationType + '&coastalZone=' + coastalZone,
 433                 modal1: false,
 434                 detailIfreamSrc: '',
 435                 mapIfreamSrc: "",
 436                 tabname: "",
 437                 tableData1: [],
 438                 columns1: [
 439                            {
 440                                title: '种',
 441                                key: 'Species',
 442                                sortable: 'custom',
 443                                minWidth: 80,
 444                                render: function (h, params) {
 445                                    return h('div', [
 446                                        h('a', {
 447                                            props: {
 448                                                type: 'primary',
 449                                                size: 'small'
 450                                            },
 451                                            style: {
 452                                            },
 453                                            on: {
 454                                                click: function () {
 455                                                    vm.showDetails(params);
 456                                                }
 457                                            }
 458                                        }, params.row.Species)
 459                                    ]);
 460                                }
 461                            },
 462                            {
 463                                title: '别名',
 464                                key: 'AnotherName',
 465                                sortable: 'custom',
 466                                //sortable: true,
 467                                minWidth: 80,
 468 
 469                            },
 470                            {
 471                                title: '拉丁名',
 472                                key: 'LatinSpecies',
 473                                sortable: 'custom',
 474                                //sortable: true,
 475                                minWidth: 120,
 476                                render: function (h, params) {
 477                                    return h('div', [
 478                                        h('span', {
 479                                            props: {
 480                                                type: 'primary',
 481                                                size: 'small'
 482                                            },
 483                                            style: {
 484                                                fontStyle: 'italic'
 485                                            }
 486                                        }, params.row.LatinSpecies)
 487                                    ]);
 488                                }
 489                            },
 490                            {
 491                                title: '国家保护等级',
 492                                key: 'NationalConservationLevel',
 493                                minWidth: 80,
 494                                maxWidth: 135,
 495                                filters: filtersNationalConservationLevel,
 496                                filterRemote: filterRemote
 497                            },
 498                            {
 499                                title: 'IUCN濒危等级',
 500                                key: 'IUCNEndangeredGrade',
 501                                minWidth: 100,
 502                                maxWidth: 150,
 503                                filters: filtersChineseSpeciesRedList,
 504                                filterRemote: filterRemote,
 505                                render: renderChineseSpeciesRedList
 506                            },
 507                            {
 508                                title: '多样性名录',
 509                                key: 'ChinaBiodiversityRedList',
 510                                minWidth: 70,
 511                                maxWidth: 125,
 512                                filters: filtersChineseSpeciesRedList,
 513                                filterRemote: filterRemote,
 514                                render: renderChineseSpeciesRedList
 515                            },
 516 
 517                            {
 518                                title: 'CITES附录',
 519                                key: 'CITESAppendix',
 520                                minWidth: 100,
 521                                maxWidth: 150,
 522                                filters: filtersCITESAppendix,
 523                                filterRemote: filterRemote,
 524 
 525                            }, {
 526                                title: '海拔',
 527                                key: 'Altitude',
 528                                minWidth: 50,
 529                                maxWidth: 90,
 530 
 531 
 532                            }, {
 533                                title: '分布',
 534                                key: 'Locations',
 535                                minWidth: 200,
 536                                //maxWidth: 300,
 537                            },
 538 
 539 
 540                 ]
 541 
 542             },
 543             created: function () {
 544                 //this.getPlants2AltitudeList(locationType);
 545                 this.initTree();
 546 
 547             },
 548             watch: {
 549                 selectInfo: function (info) {
 550                     if (info) {
 551                         this.getWeatherData()
 552                     }
 553                 },
 554                 'coastalZone': function (newValue) {
 555                     coastalZone = newValue;
 556                   
 557                     this.initTree()
 558 
 559                     this.$refs.gv.filters = [];
 560                     //this.$refs.gv.queryinfo = null;
 561                     this.columns1 = arrayDeepCopy(this.columns1);//去掉界面选中状态，深拷贝而不是引用。
 562                     this.$refs.gv.currentPage = 1;
 563                     this.url = '@Url.Action("Plants2List", "Construct")' + '?locationType=' + locationType + '&coastalZone=' + coastalZone + '&query=' + this.query;
 564 
 565                     //this.showEchartsMap = false;
 566                     if (this.showEchartsMap == true) {
 567                         var that = this;
 568                      
 569                         setTimeout(() => {
 570                             that.plantsMap();
 571                         }, 300)
 572                     }
 573                 }
 574             },
 575             computed: {
 576                 bindStyle_yd: function () {
 577                     return {
 578                         'height': '' + this.tabsHeight_yd + 'px',
 579                         'overflowY': 'auto',
 580                         'loverflowX': 'hidden'
 581                     }
 582                 },
 583 
 584             },
 585             methods: {
 586                 tabsClickSecond: function (typeSelect) {
 587 
 588                 },
 589 
 590                 handleView: function (info) {
 591                     //console.log('handleViewYd', info.id);
 592                     var index = 0
 593                     for (var i = 0; i < this.imgData.length; i++) {
 594                         if (this.imgData[i].id === info.id) {
 595                             index = i
 596                             break
 597                         }
 598                     }
 599                     //console.log('index', index);
 600                     this.$refs.viewerYd.view(index)
 601                 },
 602                 getImageListByPlotID: function (dataID) {
 603                     let that = this;
 604                     that.imgData = [];
 605 
 606                     try {
 607 
 608                         let url = '@Url.Action("GetImageList", "Construct")';
 609                         $.ajax({
 610                             url: url,
 611                             type: 'POST',
 612                             data: { dataID: dataID.toString(), dataType: 'T_Plants2.Pic' },
 613                             success: function (result) {
 614                                //console.log('getImageListByPlotID', result);
 615                                 if (result.success && result.rows != null && result.rows.length > 0) {
 616                                     let imageList = result.rows;
 617 
 618                                     if (imageList.length > 0) {
 619                                         var srcPart = '@Url.Action("Image", "Image")' + '/'
 620                                         var part = "/640";
 621                                         for (var i = 0, len = imageList.length; i < len; i++) {
 622                                             var fileName = imageList[i].FileName;
 623                                             if (fileName != undefined && fileName != null) {
 624                                                 var fileNameArr = fileName.split("_");
 625                                                 var pic = fileNameArr[fileNameArr.length - 1];
 626                                                 var picName = pic.substring(0, pic.length - 4);
 627 
 628                                                 that.imgData.push({ id: imageList[i].ImageID, src: srcPart + imageList[i].ImageID + part, name: imageList[i].FileName, picName: picName, imageUrlSmall: srcPart + imageList[i].ImageID + part, imageUrl: srcPart + imageList[i].ImageID });//imageList[i].textName
 629 
 630                                             }
 631 
 632 
 633                                         }
 634                                        //console.log('that.imgData', that.imgData);
 635 
 636                                     }
 637                                 }
 638 
 639                             }
 640                         });
 641                     } catch (err) {
 642                         //console.log('GetImageIDListErr', err)
 643                     }
 644 
 645                 },
 646                 initTree: function () {
 647                     var that = this;
 648                     that.data1 = [];
 649                     var coastalZoneTemp = coastalZone.toString();
 650                     console.log("coastalZoneTemp", coastalZoneTemp);
 651                     var url = '@Url.Action("Plants2Tree", "Construct")';
 652                     var data = { locationType: locationType, coastalZone: coastalZoneTemp, query: that.query };
 653                     $.ajax({
 654                         url:url,
 655                         data:data,
 656                         type:"get",
 657                         dataType:"json",
 658                         traditional: true,
 659                        success: function (result) {
 660                         //console.log('Plants2Tree', result)
 661                         if (result != null && result.length > 0) {
 662                             if (result[0] != null) {
 663                                 result[0].expand = true;
 664                                 result[0].selected = true;
 665                                 
 666                                 that.data1 = result;
 667                                //console.log('that.$refs.gv.filters', that.$refs.gv.filters)
 668                                
 669                             }
 670                         }
 671                       }
 672                     })
 673 
 674                 },
 675                 getWeatherData() {
 676                     var url = '@Url.Action("WeatherData", "Construct")';
 677                     var that = this;
 678                     var info = this.selectInfo;
 679                     if (info.InvestigationTime && info.Latitude && info.Longitude) {
 680 
 681                         var data = {
 682                             datetime: info.InvestigationTime,
 683                             lat: info.Latitude,
 684                             lon: info.Longitude
 685                         }
 686                         $.ajax({
 687                             url: url,
 688                             data: data,
 689                             success: function (result) {
 690                                 console.log('WeatherData', result)
 691                                 if (result.success) {
 692                                     that.weatherData = result.data
 693                                 }
 694                             }
 695                         });
 696                     }
 697                     else {
 698                         that.weatherData = {}
 699                     }
 700 
 701                 },
 702                 selectTreeById(id) {
 703                     var tree = this.data1;
 704                     for (var i in tree) {
 705                         var treeItem = findNode(tree[i], id);
 706                         if (treeItem) {
 707                             if (this.selectedItem) {
 708                                 Vue.set(this.selectedItem, 'selected', false);
 709                             }
 710                             this.selectedItem = treeItem;
 711 
 712                             //item.selected = true;
 713                             if (treeItem != null) {
 714                                 Vue.set(treeItem, 'selected', true);
 715                             }
 716 
 717                             var filterModel = {
 718                                 Family: null,
 719                                 Genus: null,
 720                                 Species: null,
 721                             }
 722 
 723                             filterModel.Family = [treeItem.subjectName];
 724                             filterModel.Genus = [treeItem.genus];
 725                             filterModel.Species = [treeItem.title];
 726                             this.getLocationList(filterModel)
 727 
 728                             break;
 729                         }
 730 
 731                     }
 732                 },
 733 
 734                 tabsClick: function (key) {
 735                     //  //console.log('tabsClick', key);
 736                     this.activeKey = key;
 737                     
 738                     //this.resizePlantsMapEcharts();
 739                     if (this.showEchartsMap == true) {
 740                         var that = this;
 741 
 742                         setTimeout(() => {
 743                             that.plantsMap();
 744                         }, 300)
 745                     }
 746 
 747                 },
 748                 getAnimalInfo: function (id) {
 749                     var url = '@Url.Action("Plants2Details", "Construct")';
 750                     $.ajax({
 751                         url: url,
 752                         data: { id: id },
 753                         success: function (result) {
 754                            // //console.log('getInfo', result.rows);
 755                             if (result.success) {
 756                                 vm.setAinmalInfo(result.rows);
 757                             }
 758                         }
 759                     });
 760                 },
 761                 setAinmalInfo(info) {
 762                     this.formModel = info;
 763                 },
 764                 showDetails: function (params) {
 765                     // //console.log('showDetails', params.row);
 766                     this.showSecond = true;
 767                     //this.activeKey = 'key2';
 768           
 769                     this.getAnimalInfo(params.row.PlantID);
 770                     this.selectTreeById(params.row.PlantID)
 771                     //vm.show2 = true;
 772                     this.getImageListByPlotID(params.row.PlantID);
 773             
 774                 },
 775                 handleMapDataClick: function (data) {
 776 
 777                     //this.$emit('data-click', data.id.getValue())
 778                     if (data) {
 779                         this.selectPoint = data.id.getValue()
 780                         this.getPlantQuadratsInfo()
 781                     }
 782                     else {
 783                         this.selectPoint = null
 784                     }
 785                 },
 786 
 787                 treeClick: function (dataArray) {
 788                     console.log('dataArray', dataArray)
 789                     this.selectedItem = dataArray[0]
 790                     //console.log('dataArray', dataArray);
 791                     var filters = [];
 792                     //将datagrid中this.filters 对应字段设置为null,url就不会包含该项
 793                     var filterModel = {
 794                         //Class: null,
 795                         ChineseOrder: null,
 796                         Family: null,
 797                         Genus: null,
 798                         Species: null,
 799                     }
 800                     //this.showEchartsMap = true;
 801                     //vm.show2 = false;
 802                     //this.activeKey = 'key1';
 803                     if (dataArray != null && dataArray.length > 0) {
 804                         if (dataArray[0].title != null && dataArray[0].title.length > 0) {
 805                             var title = (dataArray[0].title.split("("))[0];
 806                             // //console.log('title', title);
 807                             if (title != null && title != "") {
 808                                 //单项过滤
 809                                 switch (dataArray[0].key) {
 810                                     case '全部':
 811                                      
 812                                         break;
 813                                     //case '纲':
 814                                     //    filterModel.Class = [title];
 815                                     //    break;
 816                                     case '目':
 817                                         //filterModel.Class = [dataArray[0].typeName];
 818                                         filterModel.ChineseOrder = [title];
 819                                     
 820                                         break;
 821                                     case '科':
 822                                         //filterModel.Class = [dataArray[0].typeName];
 823                                         filterModel.ChineseOrder = [dataArray[0].catalogueName];
 824                                         filterModel.Family = [title];
 825                                       
 826                                         break;
 827                                     case '属':
 828                                         //filterModel.Class = [dataArray[0].typeName];
 829                                         filterModel.ChineseOrder = [dataArray[0].catalogueName];
 830                                         filterModel.Family = [dataArray[0].subjectName];
 831                                         filterModel.Genus = [title];
 832                                      
 833                                         break;
 834                                     case '种':
 835                                         //filterModel.Class = [dataArray[0].typeName];
 836                                        
 837                                         filterModel.ChineseOrder = [dataArray[0].catalogueName];
 838                                         filterModel.Family = [dataArray[0].subjectName];
 839                                         filterModel.Genus = [dataArray[0].genus];
 840                                         filterModel.Species = [title];
 841                                         //vm.show2 = true;
 842                                         //console.log('treeClick-showMap', this.showMap, this.activeKey)
 843                                         //if (this.showMap == false && this.activeKey == 'key4') {
 844                                         //    this.activeKey == 'key1'
 845                                         //}
 846                                         var id = dataArray[0].id;
 847                                         if (id != null && id > 0) {
 848                                             this.getAnimalInfo(id);
 849                                             this.getImageListByPlotID(id);
 850                                             //this.$nextTick(function () {
 851                                             //    viewer = new Viewer(document.getElementById('dowebok'));
 852                                             //})
 853                                         }
 854 
 855                                         break;
 856                                     default:
 857                                 }
 858 
 859                             }
 860                         }
 861 
 862                     }
 863 
 864                     //filters.push({ 'row': 'Class', 'op': 'equal', 'value': filterModel.Class });
 865                     filters.push({ 'row': 'ChineseOrder', 'op': 'equal', 'value': filterModel.ChineseOrder });
 866                     filters.push({ 'row': 'Family', 'op': 'equal', 'value': filterModel.Family });
 867                     filters.push({ 'row': 'Genus', 'op': 'equal', 'value': filterModel.Genus });
 868                     filters.push({ 'row': 'Species', 'op': 'equal', 'value': filterModel.Species });
 869                     ////console.log('filters', filters);
 870 
 871                     this.$refs.gv.queryinfo = trim(this.formFilter.DValue);
 872                     this.$refs.gv.setFilter(filters);
 873 
 874                     //this.getLocationList(filterModel)
 875 
 876                     if (this.showEchartsMap == true) {
 877                         var that = this;
 878                      
 879                         setTimeout(() => {
 880                             that.plantsMap();
 881                         }, 300)
 882                     }
 883 
 884                 },
 885 
 886                 getLocationList: function (filterModel) {
 887                     var that = this
 888                     var filter = null
 889                     if (filterModel) {
 890                         filter = {}
 891                         if (filterModel.Class) {
 892                             filter.ClassName = filterModel.Class[0]
 893                         }
 894                         if (filterModel.OrderName) {
 895                             filter.OrderName = filterModel.OrderName[0]
 896                         }
 897                         if (filterModel.Family) {
 898                             filter.FamilyName = filterModel.Family[0]
 899                         }
 900                         if (filterModel.Genus) {
 901                             filter.GenusName = filterModel.Genus[0]
 902                         }
 903                         if (filterModel.Species) {
 904                             filter.SpeciesName = filterModel.Species[0]
 905                         }
 906                         filter.locationType = locationType;
 907                         //filter.coastalZone = coastalZone;
 908                     }
 909                    
 910 
 911                     if (filter && filter.SpeciesName) {
 912                         var url = '@Url.Action("PlantQuadratsLocationList", "Construct")';
 913                         $.ajax({
 914                             url: url,
 915                             data: filter,
 916                             success: function (result) {
 917 
 918                                //console.log('PlantQuadratsLocationList', result);
 919                                 if (result.success && result.rows != null && result.rows.length>0) {
 920                                     var list = result.rows;
 921                                     var pointList = [];
 922                                     for(var item of list) {
 923                                         var num = getNumByQuantity(locationType, item.Quantity)
 924                                         var p = {
 925                                             id: item.PlantQuadratID,
 926                                             name: item.Species,
 927                                             label: item.SamplePlotAddress,
 928                                             lon: item.Longitude,
 929                                             lat: item.Latitude,
 930                                             num: num,
 931 
 932                                         }
 933                                         pointList.push(p)
 934                                     }
 935                                     that.showMap = true;
 936                                     that.locationList = pointList;
 937                                     that.selectInfo = {};
 938                                     that.selectPoint = null
 939                                     that.$nextTick(function () {
 940                                         if (that.$refs.cesiumMap) {
 941                                             that.$refs.cesiumMap.initData(pointList);
 942                                         }
 943                                     })
 944                                 } else {
 945                                     that.showMap = false;
 946                                
 947                                     if (that.showMap == false && that.activeKeySecond == 'key4') {
 948                                         that.activeKeySecond = 'key3'
 949                                     }
 950                               
 951                                     that.locationList = [];
 952                                     that.selectInfo = {};
 953                                     that.selectPoint = null
 954                                     that.$nextTick(function () {
 955                                         if (that.$refs.cesiumMap) {
 956                                             that.$refs.cesiumMap.initData([]);
 957                                         }
 958                                     })
 959                                 }
 960                             }
 961                         });
 962                     }
 963                     else {
 964                         that.showMap = false;
 965                         that.locationList = [];
 966                         that.selectInfo = {};
 967                         that.selectPoint = null
 968                         that.$nextTick(function () {
 969                             if (that.$refs.cesiumMap) {
 970                                 that.$refs.cesiumMap.initData([]);
 971                             }
 972                         })
 973                     }
 974                 },
 975                 getPlantQuadratsInfo: function () {
 976 
 977                     var that = this
 978                     var url = '@Url.Action("PlantQuadratsInfo", "Construct")';
 979                     $.ajax({
 980                         url: url,
 981                         data: { id: that.selectPoint },
 982                         success: function (result) {
 983                             //console.log('PlantQuadratsInfo', result);
 984                             if (result.success) {
 985                                 var data = result.data;
 986                                 that.selectInfo = data;
 987                                 var strLonAndLat = getLonAndLat(data.Longitude, data.Latitude);
 988                                 that.selectInfo.LonAndLat = strLonAndLat
 989 
 990                             }
 991                         }
 992                     });
 993 
 994                 },
 995                 //查询点击事件
 996                 filterClick: function (dataf) {
 997                     var queryData = '';
 998                     if (this.formFilter.DValue != null && this.formFilter.DValue.length > 0) {
 999                         queryData = trim(this.formFilter.DValue);
1000                     }
1001                     this.query = queryData;
1002                     //this.initTree();
1003                     // //console.log('queryData', queryData);
1004                     //this.$refs.gv.setQuery(queryData);
1005                     this.initTree();
1006                     this.$refs.gv.filters = [];
1007                     //this.$refs.gv.queryinfo = null;
1008                     this.columns1 = arrayDeepCopy(this.columns1);//去掉界面选中状态，深拷贝而不是引用。
1009 
1010                     this.$refs.gv.currentPage = 1;
1011                     this.url = '@Url.Action("Plants2List", "Construct")' + '?locationType=' + locationType + '&coastalZone=' + coastalZone + '&query=' + this.query;
1012                     this.showSecond = false;
1013                     if ( this.showEchartsMap == true) {
1014                         var that = this;
1015                         setTimeout(() => {
1016                             that.plantsMap();
1017                         }, 300)
1018                     }
1019                     //this.showEchartsMap = false;
1020                     //this.activeKey = 'key1';
1021                    
1022 
1023                 },
1024                 resizePlantsMapEcharts() {
1025 
1026                     var that = this;
1027                     setTimeout(() => {
1028                         var plantsMapEcharts = that.plantsMapEcharts;
1029                         if (plantsMapEcharts) {
1030                             plantsMapEcharts.resize()
1031                         }
1032                     }, 300)
1033                 },
1034                 plantsMap: function () {
1035                     var that = this;
1036                     var filtersPms = that.$refs.gv.filters;
1037                     var filters = [];
1038                     var key = "";
1039                     if (filtersPms != null) {
1040                         for (var i in filtersPms) {
1041                             if (filtersPms[i].value && filtersPms[i].value.length > 0) {
1042                                 filters.push({ 'field': filtersPms[i].row, 'op': filtersPms[i].op, 'value': filtersPms[i].value })
1043                                 if (filtersPms[i].row == "Species") {
1044                                     key = "种";
1045                                 }
1046                             }
1047                         }
1048                         if (filters.length > 0) {
1049                             filters = JSON.stringify(filters);
1050                         }
1051                     } else {
1052                         filters = null;
1053                     }
1054 
1055                     //console.log('filters', filters)
1056                     var query = vm.query;
1057                     console.log('query', query);
1058                     console.log('coastalZone1', coastalZone);
1059                     var coastalZoneTemp = coastalZone.toString();
1060                     console.log("coastalZoneTemp", coastalZoneTemp);
1061                   
1062                         var url = '@Url.Action("PlantsMap", "Construct")';
1063                         $.get(url, { locationType: locationType, coastalZone: coastalZoneTemp, filters: filters, query: query }, function (result) {
1064                             console.log('PlantsMap', result);
1065                             if (result.mapList != null && result.mapList != undefined) {
1066                                 var id = "plantsMapEchartsID";
1067                                 that.plantsMapEchart(result.mapList,id)
1068                             }   
1069                         });
1070                     
1071                 },
1072                 plantsMapEchart: function (list,id) {
1073                     //  console.log('filtersPms', filtersPms)
1074                     if (list != undefined && list != null) {
1075                         var convertDataTest = list;
1076                         console.log('plantsMapEcharts', this.plantsMapEcharts)
1077                         //if (this.plantsMapEcharts) {
1078                         //    this.plantsMapEcharts.dispose()
1079                         //} else {
1080                         //    this.plantsMapEcharts = null;
1081                         //}
1082                         var element = this.$refs[id];
1083                         console.log('element', element)
1084                         var chart = echarts.init(element);
1085                         this.plantsMapEcharts = chart;
1086 
1087 
1088                         var myseriesName = "物种数量";
1089                         var mytitle = "物种分布";
1090                         if (key == "种") {
1091                             mytitle = "种群数量分布";
1092                             myseriesName = "种群量";
1093                         }
1094 
1095                         var option = {
1096                             title: {
1097                                 text: mytitle,
1098                                 left: 'center',
1099                                 top: 15,
1100                             },
1101 
1102                             tooltip: {
1103                                 trigger: 'item',
1104                                 formatter: function (dataTemp) {
1105                                     //种群量 
1106                                     //console.log(dataTemp);
1107                                     //console.log(dataTemp.seriesName);
1108                                     var numAdd = "";
1109                                     if (dataTemp.seriesName == "种群量") {
1110                                         if (dataTemp != null && dataTemp.value[2] != null && dataTemp.value[2] != 0) {
1111                                             for (var j = 0; j < dataTemp.value[2]; j++) {
1112                                                 numAdd += "+";
1113                                             }
1114                                         }
1115 
1116                                     } else {
1117                                         numAdd = dataTemp.value[2];
1118                                     }
1119 
1120 
1121                                     var formateStrings = [];
1122                                     formateStrings.push(dataTemp.value[3] + dataTemp.seriesName + "<br/>" + dataTemp.marker + dataTemp.name + "：" + numAdd + "<br/>");
1123 
1124                                     return formateStrings;
1125                                 }
1126                             },
1127                             bmap: {
1128                                 center: [114.214336, 22.628779],//地图中心点经纬度
1129                                 zoom: 11,  //地图缩放程度
1130                                 roam: true,
1131                                 mapStyle: {
1132                                     styleJson: [{
1133                                         'featureType': 'water',
1134                                         'elementType': 'all',
1135                                         'stylers': {
1136                                             'color': '#d1d1d1'
1137                                         }
1138                                     },
1139                                     {
1140                                         'featureType': 'land',
1141                                         'elementType': 'all',
1142                                         'stylers': {
1143                                             'color': '#f3f3f3'
1144                                         }
1145                                     }, {
1146                                         'featureType': 'railway',
1147                                         'elementType': 'all',
1148                                         'stylers': {
1149                                             'visibility': 'off'
1150                                         }
1151                                     }, {
1152                                         'featureType': 'highway',
1153                                         'elementType': 'all',
1154                                         'stylers': {
1155                                             'color': '#fdfdfd'
1156                                         }
1157                                     }, {
1158                                         'featureType': 'highway',
1159                                         'elementType': 'labels',
1160                                         'stylers': {
1161                                             'visibility': 'off'
1162                                         }
1163                                     },
1164                                     {
1165                                         'featureType': 'arterial',
1166                                         'elementType': 'geometry',
1167                                         'stylers': {
1168                                             'color': '#fefefe'
1169                                         }
1170                                     }, {
1171                                         'featureType': 'arterial',
1172                                         'elementType': 'geometry.fill',
1173                                         'stylers': {
1174                                             'color': '#fefefe'
1175                                         }
1176                                     }, {
1177                                         'featureType': 'poi',
1178                                         'elementType': 'all',
1179                                         'stylers': {
1180                                             'visibility': 'off'
1181                                         }
1182                                     }, {
1183                                         'featureType': 'green',
1184                                         'elementType': 'all',
1185                                         'stylers': {
1186                                             'visibility': 'off'
1187                                         }
1188                                     }, {
1189                                         'featureType': 'subway',
1190                                         'elementType': 'all',
1191                                         'stylers': {
1192                                             'visibility': 'off'
1193                                         }
1194                                     },
1195                                     {
1196                                         'featureType': 'manmade',
1197                                         'elementType': 'all',
1198                                         'stylers': {
1199                                             'color': '#d1d1d1'
1200                                         }
1201                                     },
1202                                     {
1203                                         'featureType': 'local',
1204                                         'elementType': 'all',
1205                                         'stylers': {
1206                                             'color': '#d1d1d1'
1207                                         }
1208                                     },
1209                                     {
1210                                         'featureType': 'arterial',
1211                                         'elementType': 'labels',
1212                                         'stylers': {
1213                                             'visibility': 'off'
1214                                         }
1215                                     }, {
1216                                         'featureType': 'boundary',
1217                                         'elementType': 'all',
1218                                         'stylers': {
1219                                             'color': '#fefefe'
1220                                         }
1221                                     },
1222                                     {
1223                                         'featureType': 'building',
1224                                         'elementType': 'all',
1225                                         'stylers': {
1226                                             'color': '#d1d1d1'
1227                                         }
1228                                     },
1229                                     {
1230                                         'featureType': 'label',
1231                                         'elementType': 'labels.text.fill',
1232                                         'stylers': {
1233                                             'color': '#d1d1d1'//'#D8BFD8'// '#999999'
1234                                         }
1235                                     }
1236                                     ]
1237                                 }
1238 
1239                             },
1240                             series: [
1241                                 {
1242                                     name: myseriesName,
1243                                     type: 'scatter', //散点图
1244                                     coordinateSystem: 'bmap', //坐标系
1245                                     data: convertDataTest,
1246                                     symbolSize: function (val, params) {
1247                                         var value = val[2] * 2 + 7;
1248                                         if (value > 40) {
1249                                             value = 40;
1250                                         }
1251                                         return value;
1252                                     },
1253                                     label: {
1254                                         normal: {
1255                                             formatter: function (params) {
1256 
1257                                                 return params.value[3];
1258                                             },
1259                                             position: 'right',
1260                                             show: true
1261                                         },
1262                                         emphasis: {
1263                                             show: false
1264                                         }
1265                                     },
1266                                     itemStyle: {
1267                                         normal: {
1268                                             color: 'green'
1269                                         }
1270                                     }
1271                                 },
1272 
1273                             ]
1274                         }
1275                         chart.setOption(option);
1276                         console.log('chart',chart);
1277                         element.style.width = 100 + '%';
1278                         element.style.height = 100 + '%';
1279                         this.resizePlantsMapEcharts();
1280                      
1281 
1282                     } else {
1283                         //var element = this.$refs[id];
1284                         ////console.log('element', element)
1285                         //var myChart = echarts.init(element);
1286                         //myChart.clear();
1287                     }
1288 
1289                 },
1290 
1291 
1292 
1293 
1294             },
1295             mounted: function () {
1296                 var that = this;
1297                 // 设置表格高度
1298                 that.tableHeight = window.innerHeight - 60 - 40 - 39 - 37 - 10 - 10;//- 168 - 37;
1299                 that.tabsHeight_yd = window.innerHeight  -207;//- 168 - 37;
1300                 that.imgHeight = window.innerHeight - 450;
1301                 window.onresize = function temp() {
1302                     that.tableHeight = window.innerHeight - 60 - 40 - 39 - 37 - 10-10;
1303                     that.imgHeight = window.innerHeight - 450;//
1304                     that.tabsHeight_yd = window.innerHeight - 207;//- 168 - 37;
1305 
1306                     that.resizePlantsMapEcharts();
1307                 }
1308 
1309 
1310                 that.$nextTick(() => {
1311                     if (this.showEchartsMap == true) {
1312                         var that = this;
1313 
1314                         setTimeout(() => {
1315                             that.plantsMap();
1316                         }, 300)
1317                     }
1318                     var btn = document.getElementById('btn');
1319                     btn.addEventListener('click', function () {
1320                         that.showSecond = false;
1321 
1322                     }, false);
1323 
1324                 });
1325 
1326 
1327              
1328 
1329 
1330             },
1331 
1332         });
1333 
1334 
1335 
1336 
1337  
1338        
1339 
1340 
1341     </script>
View Code
posted @ 2020-08-26 16:34 hao_1234_1234 阅读(1011) 评论(0) 编辑收藏举报
刷新页面返回顶部
hao_1234_1234

echarts +iview tabs 散点图 不显示、缩成一团

公告

echarts +iview tabs 散点图不显示、缩成一团
