今天主要解决了这些问题：

  1. 利用jquery通过class增加id
  2. 修改easyui已有的属性值
  3. 透明度修改问题css适合的浏览器
  4. easyui的分类面板以及面板功能
  5. echarts的修改如何修改主题

 

利用jquery通过class增加id的方法：

$(".panel-header").attr('id',"panelname");

取出一个clss然后用attr方法来增加

该方法还可以用于修改css样式，在之后使用它来今天显示和隐藏功能的实现：

<div id="win"></div>


#win{
    display: none;
}


 $('#win').attr('display','inline');

如上述方法先把win的样式中的display属性设置为隐藏none然后再运行函数的时候将其修改成inline即可

透明度修改问题css适合的浏览器

这里使用的方法如下：

样式中将透明度属性设置一下opacity:0.5;

注意这里使用的是opacity可以适应多种浏览器，而filter仅仅只能用于ie浏览器

        function makevisible(i,which)
        {if (which==0)$('.chart_img'+i).css({'opacity':'1'});
          else $('.chart_img'+i).css({'opacity':'0.5'});}

easyui的分类面板以及面板功能贴出html的代码和js的部分代码

<!DOCTYPE html>
<html>
  <head>
    <title>echart图+滑块</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="js/esl.js"></script>  
 
      <script type="text/javascript" src="js/testPage.js"></script> 
     <script type="text/javascript" src="js/testPageFormate.js"></script> 
     <script type="text/javascript" src="js/testPagebar.js"></script> 
     <script type="text/javascript" src="js/testPageline.js"></script>      
     <script type="text/javascript" src="js/testPagepie.js"></script>
     <script type="text/javascript" src="js/testPagescatter.js"></script>
     <script type="text/javascript" src="js/testPageradar.js"></script> 
     <script type="text/javascript" src="js/testPagegauge.js"></script>      
     <script type="text/javascript" src="js/testPagefunnel.js"></script> 
     <script type="text/javascript" src="js/testPagek.js"></script> 
     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
     <link rel="stylesheet" type="text/css" href="testPage.css">
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
 
  </head>
  
  <body>
  <input type="button" value="开始" onclick="window_show()">
  <div id="main" style="height:400px"></div>  
  <div id="wrong-message"></div>

<!-- 整个窗口的div -->
  <div id="win">
  <div id="edit">    
  <div id="accord" class="easyui-accordion">
        <div title="折线图" data-options="iconCls:'icon-large-shapes',collapsed:false,selected:true" style="padding:10px;">
              <div name="part3"><img src="img/line.png" class="chart_img3" onclick="showline()"onMouseOver="makevisible(3,0)" onMouseOut="makevisible(3,1)">
              <div id="bartext" class="text_box">类型：折线图<br>
                                                                                                                           范围：写这个图表可以适合几个维度的数据类型</div><br></div>
        </div>
        <div title="条形图" data-options="iconCls:'icon-large-shapes',collapsed:false" style="overflow:auto;padding:10px;">
              <div name="part1"><img src="img/bar.png" class="chart_img1"  onclick="showbar()"onMouseOver="makevisible(1,0)" onMouseOut="makevisible(1,1)">
              <div id="bartext" class="text_box">类型：条形图<br>
                                                                                                                           范围：写这个图表可以适合几个维度的数据类型</div><br></div>
        </div>
        <div title="堆积图" data-options="iconCls:'icon-large-shapes',collapsed:false" style="padding:10px;">
              <div name="part2"> <img src="img/duibar.png" class="chart_img2" onclick="showduibar()"onMouseOver="makevisible(2,0)" onMouseOut="makevisible(2,1)">
              <div id="bartext" class="text_box">类型：堆积图<br>
                                                                                                                           范围：写这个图表可以适合几个维度的数据类型</div><br></div>    
        </div>
        <div title="散点图" data-options="iconCls:'icon-large-shapes',collapsed:false" style="padding:10px;">
              <div name="part4"><img src="img/scatter.png" class="chart_img4" onclick="showscatter()"onMouseOver="makevisible(4,0)" onMouseOut="makevisible(4,1)">          
              <div id="bartext" class="text_box">类型：散点图<br>
                                                                                                                          范围：写这个图表可以适合几个维度的数据类型</div><br></div>
        </div>
</div>
</div><br>
    
    
  </div> 

  
  </body>
</html>

 

  //该函数用于把整个图表编辑器显示出来，并且进行渲染
  function window_show(){
        $('#win').attr('display','inline');
        $('#win').window({    
            width:240,
            title:'图表编辑器',
//             height:470,
           left:900,
           top:40,
           iconCls:'icon-large-chart',
        });
        function makevisible(i,which)
        {if (which==0)$('.chart_img'+i).css({'opacity':'1'});
          else $('.chart_img'+i).css({'opacity':'0.5'});}       
      
       
       $('#accord').accordion({    
  
        });  
       
       
   }
//用做窗口内图片的透明度变化事件，鼠标移上去不透明，鼠标移开变透明
function makevisible(i,which)
{if (which==0)$('.chart_img'+i).css({'opacity':'1'});
  else $('.chart_img'+i).css({'opacity':'0.5'});}