You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2018/08/09 10:12:58 UTC

[GitHub] deluo opened a new issue #8846: vue2.x echarts..getModel().getComponent('bmap')报错

deluo opened a new issue #8846: vue2.x echarts..getModel().getComponent('bmap')报错
URL: https://github.com/apache/incubator-echarts/issues/8846
 
 
   <!--
   为了方便我们能够复现和修复 bug,请遵从下面的规范描述您的问题。
   -->
   
   
   ### One-line summary [问题简述]
   使用vue2.5.2 在map组件中代码如下
    mounted() {
       var myMap = echarts.init(document.getElementById("main"));
       myMap.setOption({
         bmap: {
           center: [120.13066322374, 30.240018034923],
           zoom: 14,
           roam: true,
           mapStyle: {
             styleJson: [
               {
                 featureType: "land", //调整土地颜色
                 elementType: "geometry",
                 stylers: {
                   color: "#081734"
                 }
               },
               {
                 featureType: "building", //调整建筑物颜色
                 elementType: "geometry",
                 stylers: {
                   color: "#04406F"
                 }
               },
               {
                 featureType: "building", //调整建筑物标签是否可视
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "highway", //调整高速道路颜色
                 elementType: "geometry",
                 stylers: {
                   color: "#015B99"
                 }
               },
               {
                 featureType: "highway", //调整高速名字是否可视
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "arterial", //调整一些干道颜色
                 elementType: "geometry",
                 stylers: {
                   color: "#003051"
                 }
               },
               {
                 featureType: "arterial",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "green",
                 elementType: "geometry",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "water",
                 elementType: "geometry",
                 stylers: {
                   color: "#044161"
                 }
               },
               {
                 featureType: "subway", //调整地铁颜色
                 elementType: "geometry.stroke",
                 stylers: {
                   color: "#003051"
                 }
               },
               {
                 featureType: "subway",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "railway",
                 elementType: "geometry",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "railway",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "all", //调整所有的标签的边缘颜色
                 elementType: "labels.text.stroke",
                 stylers: {
                   color: "#313131"
                 }
               },
               {
                 featureType: "all", //调整所有标签的填充颜色
                 elementType: "labels.text.fill",
                 stylers: {
                   color: "#FFFFFF"
                 }
               },
               {
                 featureType: "manmade",
                 elementType: "geometry",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "manmade",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "local",
                 elementType: "geometry",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "local",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "subway",
                 elementType: "geometry",
                 stylers: {
                   lightness: -65
                 }
               },
               {
                 featureType: "railway",
                 elementType: "all",
                 stylers: {
                   lightness: -40
                 }
               },
               {
                 featureType: "boundary",
                 elementType: "geometry",
                 stylers: {
                   color: "#8b8787",
                   weight: "1",
                   lightness: -29
                 }
               }
             ]
           }
         },
         series: [
           {
             type: "scatter",
             coordinateSystem: "bmap",
             data: [[120, 30, 1]]
           }
         ]
       });
       console.log(myMap.getModel());
       var bmap = myMap
         .getModel()
         .getComponent('bmap')
         .getBMap();
   
       bmap.addControl(new BMap.MapTypeControl());
     } 
   
   报错:Error in mounted hook: "TypeError: Cannot read property 'getBMap' of undefined";
   Cannot read property 'getBMap' of undefined;
   
   不使用vue.仅仅在html中使用相同的代码,不会报错,并且显示效果正常
   
   
   ### Version & Environment [版本及环境]
   + ECharts version [ECharts 版本]:3.8.5
   + Browser version [浏览器类型和版本]:68.0  64位
   + OS Version [操作系统类型和版本]:win10 64位
   
   
   
   
   
   ### Expected behaviour [期望结果]
   
   
   
   
   
   ### ECharts option [ECharts配置项]
   <!-- Copy and paste your 'echarts option' here. -->
   <!-- [下方贴你的option,注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
   ```javascript
   option ={
         bmap: {
           center: [120.13066322374, 30.240018034923],
           zoom: 14,
           roam: true,
           mapStyle: {
             styleJson: [
               {
                 featureType: "land", //调整土地颜色
                 elementType: "geometry",
                 stylers: {
                   color: "#081734"
                 }
               },
               {
                 featureType: "building", //调整建筑物颜色
                 elementType: "geometry",
                 stylers: {
                   color: "#04406F"
                 }
               },
               {
                 featureType: "building", //调整建筑物标签是否可视
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "highway", //调整高速道路颜色
                 elementType: "geometry",
                 stylers: {
                   color: "#015B99"
                 }
               },
               {
                 featureType: "highway", //调整高速名字是否可视
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "arterial", //调整一些干道颜色
                 elementType: "geometry",
                 stylers: {
                   color: "#003051"
                 }
               },
               {
                 featureType: "arterial",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "green",
                 elementType: "geometry",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "water",
                 elementType: "geometry",
                 stylers: {
                   color: "#044161"
                 }
               },
               {
                 featureType: "subway", //调整地铁颜色
                 elementType: "geometry.stroke",
                 stylers: {
                   color: "#003051"
                 }
               },
               {
                 featureType: "subway",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "railway",
                 elementType: "geometry",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "railway",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "all", //调整所有的标签的边缘颜色
                 elementType: "labels.text.stroke",
                 stylers: {
                   color: "#313131"
                 }
               },
               {
                 featureType: "all", //调整所有标签的填充颜色
                 elementType: "labels.text.fill",
                 stylers: {
                   color: "#FFFFFF"
                 }
               },
               {
                 featureType: "manmade",
                 elementType: "geometry",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "manmade",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "local",
                 elementType: "geometry",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "local",
                 elementType: "labels",
                 stylers: {
                   visibility: "off"
                 }
               },
               {
                 featureType: "subway",
                 elementType: "geometry",
                 stylers: {
                   lightness: -65
                 }
               },
               {
                 featureType: "railway",
                 elementType: "all",
                 stylers: {
                   lightness: -40
                 }
               },
               {
                 featureType: "boundary",
                 elementType: "geometry",
                 stylers: {
                   color: "#8b8787",
                   weight: "1",
                   lightness: -29
                 }
               }
             ]
           }
         },
         series: [
           {
             type: "scatter",
             coordinateSystem: "bmap",
             data: [[120, 30, 1]]
           }
         ]
       }
   
   ```
   
   
   
   
   ### Other comments [其他信息]
   <!-- For example: Screenshot or Online demo -->
   <!-- [例如,截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org