0

Pie1 默认显示。单击 Pie2 或 Pie3 的下拉菜单将 DIV 留空，再次选择 Pie1 将返回 echarts_Pie1。我的 pie2 和 pie3 下拉菜单不起作用。

<script language="javascript">
    ivan = {};
    ivan.showhide = function(val1)
    {
      if(val1 == 1)
      {     
        document.getElementById('echart_pie1').style.display = "";
        document.getElementById('echart_pie2').style.display = "none";
        document.getElementById('echart_pie3').style.display = "none";
      }
      else if (val1 == 2)
      {     
        document.getElementById('echart_pie1').style.display = "none";
        document.getElementById('echart_pie2').style.display = "";
        document.getElementById('echart_pie3').style.display = "none";
      }
      else if (val1 == 3)
      {     
        document.getElementById('echart_pie1').style.display = "none";
        document.getElementById('echart_pie2').style.display = "none";
        document.getElementById('echart_pie3').style.display = "";
      }

    }      
    </script>

Pie1 默认显示。单击 Pie2 或 Pie3 的下拉菜单将 DIV 留空，再次选择 Pie1 将返回 echarts_Pie1。我的 pie2 和 pie3 下拉菜单不起作用。

<div class="col-md-3 col-sm-4 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Storage</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                         <option onclick="ivan.showhide(1)">Pie1</option>
                         <option onclick="ivan.showhide(2)">Pie2</option>
                          <option onclick="ivan.showhide(3)">Pie3</option>
                          </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                        <div id="echart_pie1" style="height:180px;"></div>
                        <div id="echart_pie2" style="height:180px; display:none;"></div>
                        <div id="echart_pie3" style="height:180px; display:none;"></div>                           

                  </div>
4

5 回答 5

0

谢谢大家的帮助。它现在可以工作了——我使用 pie1a、pie1b、pie1c 对其进行了测试。

<script type="text/javascript">
    function doLoadStuff()
    {
        document.getElementById('echart_pie1b').style.display = "none";
        document.getElementById('echart_pie1c').style.display = "none";
    }
</script>

HTML

<body class="nav-md" onload="doLoadStuff()">

...

<ul class="dropdown-menu" role="menu">
    <option onclick="showhidePie1('a')">Pie1a</option>
    <option onclick="showhidePie1('b')">Pie1b</option>
    <option onclick="showhidePie1('c')">Pie1c</option>
</ul>


<div id="echart_pie1a" style="height:200px;"></div>
<div id="echart_pie1b" style="height:200px;"></div>
<div id="echart_pie1c" style="height:200px;"></div>

然后我在底部脚本中初始化了我的 3 个饼图

var echartBar1a = echarts.init(document.getElementById('echart_bar1a'), theme);

    echartBar1a.setOption(
                         {
                           Options...
                         }

然后使用一个函数来设置样式。

function showhidePie1(theChar) {
    document.getElementById('echart_pie1a').style.display = "none";
    document.getElementById('echart_pie1b').style.display = "none";
    document.getElementById('echart_pie1c').style.display = "none";

    document.getElementById('echart_pie1'+theChar).style.display = "";      
}

它现在工作正常。谢谢你。

于 2016-07-07T10:39:23.277 回答
0

<div>使用 ECharts 初始化时是否可见并不重要。重要的是它应该具有作为容器的宽度和高度。

因此，您可以在页面加载时使用所有三个图表设置它们，无论哪一个可见。

document.getElementById('echart_pie1').style.width = '800px';
document.getElementById('echart_pie1').style.height = '600px';

document.getElementById('echart_pie2').style.width = '800px';
document.getElementById('echart_pie2').style.height = '600px';

document.getElementById('echart_pie3').style.width = '800px';
document.getElementById('echart_pie3').style.height = '600px';
于 2016-07-05T05:05:46.157 回答
0

这是您正在寻找的结果吗？

HTML：

<ul role="menu">
                     <option onclick="ivan.showhide(1)">Pie1</option>
                     <option onclick="ivan.showhide(2)">Pie2</option>
                      <option onclick="ivan.showhide(3)">Pie3</option>
                      </ul>
                        <div id="echart_pie1" style="height:180px;">a</div>
                    <div id="echart_pie2" style="height:180px; display:none;">b</div>
                    <div id="echart_pie3" style="height:180px; display:none;">c</div>

JS：

ivan = {};
ivan.showhide = function(val1)
{
  if(val1 == 1)
  {     
    document.getElementById('echart_pie1').style.display = "";
    document.getElementById('echart_pie2').style.display = "none";
    document.getElementById('echart_pie3').style.display = "none";
  }
  else if (val1 == 2)
  {     
    document.getElementById('echart_pie1').style.display = "none";
    document.getElementById('echart_pie2').style.display = "";
    document.getElementById('echart_pie3').style.display = "none";
  }
  else if (val1 == 3)
  {     
    document.getElementById('echart_pie1').style.display = "none";
    document.getElementById('echart_pie2').style.display = "none";
    document.getElementById('echart_pie3').style.display = "";
  }

}

实际上我什至没有改变任何东西，除了你的 DIV 中的内容（我使用了 a、b 和 c）。如果它是您期望的结果，则此方法有效。

于 2016-07-03T13:38:45.657 回答
0

echarts 库可能需要容器在图形生成过程中可见，所以我建议display:none从 HTML 中删除样式：

<ul role="menu">
  <option onclick="ivan.showhide(1)">Pie1</option>
  <option onclick="ivan.showhide(2)">Pie2</option>
  <option onclick="ivan.showhide(3)">Pie3</option>
</ul>
<div id="echart_pie1" style="height:180px;"></div>
<div id="echart_pie2" style="height:180px;"></div>
<div id="echart_pie3" style="height:180px;"></div>

在 JavaScript 代码中，您有初始化图形的代码，调用如下：

var echartPie1 = echarts.init(document.getElementById('echart_pie1'), theme); 
// ... etc

在该代码之后，添加以下行：

ivan.showhide(1);

这当然假设您ivan此时已经定义。如果不是，请先放置该定义，然后在其下方添加上述行。

简化

与问题无关，但请注意，您可以将showhide功能简化为：

ivan = {};
ivan.showhide = function(val1)
{
    document.getElementById('echart_pie1').style.display = val1 !== 1 ? "none" : "";
    document.getElementById('echart_pie2').style.display = val1 !== 2 ? "none" : "";
    document.getElementById('echart_pie3').style.display = val1 !== 3 ? "none" : "";
}

如果所有三个图表在页面加载时都闪烁

当页面加载时，页面可能会在几分之一秒内显示所有三个图表。如果这是一个问题，试试这个，虽然它可能会带回原来的问题：

  • 将样式添加visibility: hidden到ul标签：

    <ul role="menu" style="visibility: hidden">

  • 调用后删除该样式showhide(1)：

     ivan.showhide(1);
 document.querySelector('ul[role=menu]').style.visibility = 'visible';
于 2016-07-04T12:34:52.060 回答
0

onclick 功能在选项元素中不起作用！所以试着稍微改变一下你的选项格式

<select class="dropdown-menu" role="menu" onchange="ivan.showhide(this.value)">
              <option value="1">Pie1</option>
              <option value="2">Pie2</option>
              <option value="3">Pie3</option>
</select>
于 2016-07-05T05:17:45.100 回答