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/05/02 08:24:10 UTC

[GitHub] surui0419 opened a new issue #8261: 3d地球上的3d飞线尾迹特效在长时间运行后会静止不动,但2d飞线上的尾迹特效却一直在运动

surui0419 opened a new issue #8261: 3d地球上的3d飞线尾迹特效在长时间运行后会静止不动,但2d飞线上的尾迹特效却一直在运动
URL: https://github.com/apache/incubator-echarts/issues/8261
 
 
   <!--
   为了方便我们能够复现和修复 bug,请遵从下面的规范描述您的问题。
   -->
   
   
   ### One-line summary [问题简述]
   
   使用echartsGL画一个3d地球,在地球上包裹一个2d的世界地图实例,并让地球自转。
   给3d地球实例配置setOption时,在series中使用了type为“lines3D”的3d飞线,并且飞线上添加了尾迹动态特效。
   在地球上包裹的2d世界地图实例上添加type为“lines”的2d飞线,飞线上也添加尾迹特效。
   页面运行一天一夜后,偶尔会出现如下情况:
       3d地球在正常自传,地球上的3d飞线尾迹特效静止,地球上的世界地图的2d飞线的尾迹特效依然在跑动。有没有大神知道这是什么原因造成的?
   
   
   
   
   
   ### Version & Environment [版本及环境]
   + ECharts version [ECharts 版本]:  ECharts 4.0.4,ECharts GL 1.0.1
   + Browser version [浏览器类型和版本]: chrome 68
   + OS Version [操作系统类型和版本]:  Win10
   
   
   
   
   
   ### Expected behaviour [期望结果]
   
   页面一直挂在那,3d飞线上的尾迹特效能正常运动。
   
   
   
   ### ECharts option [ECharts配置项]
   <!-- Copy and paste your 'echarts option' here. -->
   <!-- [下方贴你的option,注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
   ```javascript
   
    // 在echarts容器上创建地球实例
         this.globalEchart = echarts.init(this.$refs.global);
         // 在实例上绘制3d地球
         this.globalEchart.setOption({
           globe: {
             left: 0,
             right: '8%',
             top: '4.5%',
             bottom: 0,
             globeRadius: 95,
             baseTexture: this.worldEchart, // 地球的纹理,支持图片或canvas对象或echarts实例作为纹理
             shading: "color", // 不受光照影响
             globeRadius: 97,
             viewControl: {// 用于鼠标的旋转缩放控制
               zoomSensitivity: 0, // 缩放灵敏度 0关闭缩放
               rotateSensitivity: [2,0], //控制横、纵旋转灵敏度
               autoRotate: true, // 控制地球是否自转
               autoRotateDirection: "ccw", //控制自转方向
               autoRotateAfterStill: 4,
               targetCoord: [105.9526, 22.3017],
               autoRotateSpeed:10
             }
           },
           series: {
             type: 'lines3D',
             coordinateSystem: 'globe',
             blendMode: 'lighter',
             effect: { // 飞线 特效
               show: true,
               peroid: 2,
               trailColor: 'greenyellow'
             },
             lineStyle: { // 飞线颜色
               width: 2,
               color: '#02fd00',
               opacity: 0.8
             },
             data: this.worldLine
           }
         })
   
    // 在echarts中注册世界地图的数据
         echarts.registerMap("world", world);
         // 绘制世界地图的实例worldEchart作为纹理
         this.worldEchart = echarts.init(document.createElement("canvas"), null, {
           width: 4000,
           height: 2000
         });
         // 配置worldEchart
         this.worldEchart.setOption({
           geo: {
             // 绘制坐标系上的散点图、线集
             map: "world", // 地图类型
             name: "world_map",
             itemStyle: { // 地图图形样式
               areaColor: "rgba(0,0,0,0.2)",
               borderColor: "rgba(255, 253, 250, 0.6)"
             },
             emphasis: { //高亮时区域内的颜色
               label:{
                 show:false,
                 color:'#eee'
               },
               itemStyle: {
                 areaColor: 'rgba(42,51,61,0)'
               }
             },
             selectedMode: 'single',
             // 绘制完整尺寸的 echarts 实例
             top: '2%',
             left: 0,
             right: 0,
             bottom: 0,
             boundingCoords: [// 定义地图的左上角和右下角经纬度
               [-180, 90],
               [180, -90]
             ]
           },
           series: [
             {
               type: 'lines', //上海到苏里南飞线
               coordinateSystem: "geo",
               zlevel: 4,
               effect: { // 飞线 特效
                 show: true,
                 period: 4,
                 color: "#02fd00",
                 symbol: this.lineSymbol,
                 symbolSize:13,
                 trailLength: 0
               },
               lineStyle: {  //飞线的颜色
                 width: 1,  
                 color: '#02fd00',
                 opacity: {
                   cuiveness: 0.2
                 }
               },
               data: this.singleLine
             }
           ]
         });
   ```
   
   
   
   
   ### 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