[GitHub] lupe0211 opened a new issue #8209: iPad上绘制折线图时canvas有几率黑屏

[GitBox <gi...@apache.org>]

lupe0211 opened a new issue #8209: iPad上绘制折线图时canvas有几率黑屏
URL: https://github.com/apache/incubator-echarts/issues/8209
 
 
   <!--
   为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。
   -->
   
   
   ### One-line summary [问题简述]
   
   在iPad上用echart绘制折线图时，canvas有比较小的概率黑屏（背景颜色是黑色）
   
   
   
   ### Version & Environment [版本及环境]
   + ECharts version [ECharts 版本]:  3.5.3
   + Browser version [浏览器类型和版本]:  iPad端   uiwebview
   + OS Version [操作系统类型和版本]:  iOS 11.1
   
   
   
   
   
   ### Expected behaviour [期望结果]
   
   
   绘制canvas时，不出现黑屏。https://blog.csdn.net/yuhk231/article/details/54376137这篇文章有提到解决canvas黑屏的办法
   
   
   ### ECharts option [ECharts配置项]
   <!-- Copy and paste your 'echarts option' here. -->
   <!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
   ```javascript
   let lineOptions = {
               backgroundColor: '#fff',
               legend: {
                   itemHeight: 3,
                   itemWidth: 15,
                   itemGap: 20,
                   icon: 'roundRect',
                   left: '20px',
                   top: legendTop,
                   selectedMode: false,
                   textStyle: {
                       color: '#8e95aa',
                       fontFamily: 'sf_ui_displayregular,黑体',
                       fontSize: fontSize
                   },
                   data: []
               },
               grid: {
                   show: true,
                   left: leftSize,
                   right: rightSize,
                   top: topSize,
                   bottom: bottomSize,
                   containLabel: true,
                   borderWidth: 0
               },
               tooltip: {
                   trigger: 'axis',
                   backgroundColor: 'rgba(50,55,69,0.9)',
                   borderRadius: tooltipRadius,
                   padding: [paddingSize],
                   extraCssText: 'box-shadow: 0 .02rem .04rem rgba(0,0,0,0.5);',
                   // 坐标轴指示器配置项
                   axisPointer: {
                       type: 'line',
                       lineStyle: {
                           color: '#fff',
                           type: 'dashed',
                           width: 0
                       }
                   },
                   formatter: {},
                   // 是否将 tooltip 框限制在图表的区域内
                   confine: true
               },
               xAxis: {
                   type: 'category',
                   data: date,
                   // x轴上分割线
                   splitLine: {
                       show: false
                   },
                   // x轴上的线
                   axisLine: {
                       show: true,
                       lineStyle: {
                           color: '#e4e4e4'
                       }
                   },
                   // x轴上的标签
                   axisLabel: {
                       show: true,
                       interval: 0,
                       formatter: function (value, index) {
                           if (dateLength < 15) {
                               return value;
                           } else if (dateLength >= 15) {
                               if ((index - 1) % xSplitNum === 0) {
                                   return value;
                               }
                           }
                       },
                       textStyle: {
                           color: '#c6cad8',
                           // fontFamily: 'sf_ui_displayregular,黑体',
                           fontSize: fontSize
                       }
                   },
                   // x轴上的刻度
                   axisTick: {
                       show: false,
                       interval: 6
                   },
                   boundaryGap: false
               },
               yAxis: {
                   axisLine: {
                       show: false
                   },
                   axisTick: {
                       show: false,
                       interval: 0
                   },
                   axisLabel: {
                       margin: yMargin,
                       textStyle: {
                           color: '#c6cad8',
                           fontSize: fontSize
                       },
                       formatter: function (value) {
                           // Y轴坐标单位
                           if(data.yaxis){
                               if(value==0){
                                   return value;
                               }
                               return value+data.yaxis;
                           }
                           return window.MT.DataManager.formatDataToThousands(value);
                       }
                   },
                   splitLine: {
                       show: true,
                       lineStyle: {
                           color: '#efefef',
                           type: 'dashed'
                       }
                   },
                   // 设置Y轴分两个刻度
                   splitNumber: 2,
                   max: yMax,
                   min: 0,
                   interval: yMiddle
               },
               animationDuration: 300,
               series: []
           };
   
   ```
   
   
   
   
   ### 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