shanewds opened a new issue #8515: 
如何设置数据视图显示的div区域大小,在toolbox中没有找到,默认的div太大,偏移过大。
URL: https://github.com/apache/incubator-echarts/issues/8515
 
 
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <title>ECharts</title>
       <!-- 引入 echarts.js -->
       <script src="js/echarts.js"></script>
       <style>
       
        element.style {
            position: absolute;
            left: 11px;
            top: 5px;
            bottom: 333px;
            right: 5px;
            background-color: rgb(255, 255, 255);
        }
       </style>
   </head>
   <body>
       <div id="outer">
       <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
       <div id="main" style="width:550px;height:400px;"></div></div>
       <script type="text/javascript">
     
   
           // 基于准备好的dom,初始化echarts实例
           var myChart = echarts.init(document.getElementById('main'));
   
           // 指定图表的配置项和数据
            var option = {
                         legend: {                       //图例
                        show:false,                   //是否显示图例
                        orient: 'vertical',           //布局方向
                        x: 'left',                    //图例相对位置
                       // data:['一班','二班','三班'] //图例内容
                      },
                      toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
      
                                        dataView : {show: true, readOnly: false,
                                        
                                    },
                                    magicType: {show: true, type: [ 'pie']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                               
                           },
                      series: [                       //内容
                        {
                          name:'驻留时间占比',      //内容标题
                          type:'pie',                 //图标样式
                          selectedMode: 'single',     //选中模式:单选
                          radius: ['42%', '22%'],         
//饼图大小,[x,y]:x表示内半径,y表示外半径  
                          itemStyle : {
                                normal : {
                                    label : {
                                          show: true, 
                                          //position: 'inner',
                                          position: 'outer',     
                                         // formatter: '{d}%' 
                                            textStyle:{
                                                        color: '#818181',
                                                        fontSize: 14,
                                                        fontWeight: 'bold'
                                                }
                                    },
                                    labelLine :{
                                        show:true,
                                        length: 100,
                                        lineStyle:{
                                                color: '#818181'
                                                
                                        }
                                        
                                    } 
                                }
                                },
                          
                        
                          
                          
color:['#2D4E7C','#3D67A2','#4A7BC1','#7286AA','#95A0B5'],    //颜色
                         // name:['一班','二班','三班'],                      //内容名称
                          data:[                                              
//数据
                              {value:16.5,name:'<5min'},     //selected:是否被选中
                              {value:22.5,name:'5-10min'},
                              {value:16.7,name:'10-15min'},
                              {value:11.9,name:'15-20min'},
                              {value:32.4,name:'>20min'}
                          ],               
                        },
                        /////////////////
                         {
                          name:'驻留时间占比',      //内容标题
                          type:'pie',                 //图标样式
                          selectedMode: 'single',     //选中模式:单选
                          radius: ['42%', '22%'],         
//饼图大小,[x,y]:x表示内半径,y表示外半径  
                          itemStyle : {
                                normal : {
                                    label : {
                                          show: true, 
                                          position: 'inner',
                                         // position: 'outer',     
                                         // formatter: '{d}%' 
                                          textStyle:{
                                                        //color: '#818181',
                                                        fontSize: 12,
                                                        fontWeight: 'bold'
                                            }
                                    },
                                    labelLine :{
                                        show:true,
                                        length: 100,
                                        lineStyle:{
                                                color: '#818181'
                                        }
                                        
                                    } 
                                }
                                },
                          
                        
                          
                          
color:['#2D4E7C','#3D67A2','#4A7BC1','#7286AA','#95A0B5'],    //颜色
                         // name:['一班','二班','三班'],                      //内容名称
                          data:[                                              
//数据
                              {value:16.5,name:'16.5%'},     //selected:是否被选中
                              {value:22.5,name:'22.5%'},
                              {value:16.7,name:'16.7%'},
                              {value:11.9,name:'11.9%'},
                              {value:32.4,name:'32.4%'}
                          ],               
                        },
                        {
                          name:'大于5分钟观众占比',
                          type:'pie',
                          radius: ['42%', '56%'],
                          itemStyle : {
                                        normal : {
                                            label : {
                                                
                                                  show: true, 
                                                  position: 'outer'             
                        
                                                 // formatter: '{d}%'
                                                
                                            },
                                            labelLine :{
                                                show:false,
                                                length: 40,
                                                lineStyle:{
                                                        color: '#818181'
                                                }
                                                
                                                
                                            } 
                                        }
                                  },
                         
                          color:['#F2F2F2','#AE2318'],  
                          data:[
                              {value:16.5,name:''},  
                              {value:83.5,name:''}
                            
                          ]
                         
                  }],
                      //backgroundColor: "#190c12",     //背景颜色
                        
             };
   
   
           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
       </script>
   </body>
   </html>
   <img width="752" alt="wx20180613-132039 2x" 
src="https://user-images.githubusercontent.com/19984920/41331683-d63cd048-6f0c-11e8-847d-f772c9c81cb6.png";>
   
   <img width="1424" alt="wx20180613-132113 2x" 
src="https://user-images.githubusercontent.com/19984920/41331703-e8906e80-6f0c-11e8-91d1-f4c0a30eae1e.png";>
   
   

----------------------------------------------------------------
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:
us...@infra.apache.org


With regards,
Apache Git Services

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

Reply via email to