echarts 图标效果 能做成响应式吗 要怎么写

echartsjavascript

解决方案 »

  1.   

    引入JS就行了   div要指定宽高  不然不会显示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script>
    <script type="text/javascript" src="echarts-all.js"></script>
    <style>  </style>  
    </head>
    <body>
    <div id="page_local" style="height:900px; border:1px #000 solid;">
        
    </div>
    <script type="text/javascript" charset="utf-8">
        $(function(){
    var myChart = echarts.init(document.getElementById("page_local"));
    myChart.setOption( {
    tooltip : {
    trigger : 'item'
    },
    legend : {
    orient : 'vertical',
    x : 'right',
    data : ['AAAA','bbbb','CCCC']
    },
    calculable : true,
    series : [ {
    type : 'pie',
    radius : '70%',
    center : [ '33%', '50%' ],
    itemStyle : {
                    normal : {
                        label : {
                            show : false
                        },
                        labelLine : {
                            show : false
                        },
                    },
    },
    data:[
          {value:335, name:'AAAA'},
          {value:310, name:'bbbb'},
          {value:234, name:'CCCC'}
          ]
    } ]
    });
    })
    </script>
    </body>
    </html>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://cloud.xing-xing.com/jquery.js"></script>
    <script type="text/javascript" src="echarts-all.js"></script>
    <style>  
     html, body{height: 100%}
    </style>  
    </head>
    <body>
    <div id="page_local" style="height:80%; border:1px #000 solid;">
         
    </div>
    <script type="text/javascript" charset="utf-8">
    var myChart;
        $(function(){
    myChart = echarts.init(document.getElementById("page_local"));
                myChart.setOption( {
                    tooltip : {
                        trigger : 'item'
                    },
                    legend : {
                        orient : 'vertical',
                        x : 'right',
                        data : ['AAAA','bbbb','CCCC']
                    },
                    calculable : true,
                    series : [ {
                        type : 'pie',
                        radius : '70%',
                        center : [ '33%', '50%' ],
                        itemStyle : {
                            normal : {
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : false
                                },
                            },
                        },
                        data:[
                              {value:335, name:'AAAA'},
                              {value:310, name:'bbbb'},
                              {value:234, name:'CCCC'}
                              ]
                    } ]
                });

    $(window).resize(function(){
    myChart.resize();    
     });  
        });
    </script>
    </body>
    </html>
      

  3.   

    window.onresize = myChart.resize;
    我用了这个方法   改变浏览器窗口是可以响应式了    但是   我加了tabs标签页   就出现问题    图表的曲线图不见了   我粘贴下图   你看看这个咋解决：第一张是页面加载时的效果；
    第二张是我选择其他tabs标签页，再选择first标签页的时候，图就变成这样了；
    求解决方案
      

  4.   

    等你的tab页切换完之后, 在去执行echart的setOption方法
      

  5.   


    感谢你的思路，已解决，不过我直接用setOpion方法好像不行，所以我把整个方法重新执行一遍就行了！
      

  6.   


    感谢你的思路，已解决，不过我直接用setOpion方法好像不行，所以我把整个方法重新执行一遍就行了！不行行啊，ie6、7、8不支持整个方法重新执行，会报错