手风琴+ECharts

来源：互联网发布：cet6网络课程编辑：程序博客网时间：2024/06/06 02:30

需求是做一个手风琴效果，点开每一列都会有一个图表的详细信息，我就简单的实现了下，效果很low，仅供参考

首先是做一个手风琴的效果的样式，在样式里提前预留一个.container的div（在这个div里画图），类似于这样的：

<!DOCTYPE html><head><meta charset="UTF-8"><title></title><style>*{padding:0;margin:0;}.img{width:600px;height:320px;background:#000;}.img1{background:red;}.img2{background:green;}.img3{background:blue;}.img4{background:orange;}.img5{background:orangered;}#box{width:805px;height:320px;margin:100px auto;overflow:hidden;box-shadow:0 0 10px 1px rgba(0,0,0,0.35);}#box ul li{float:left;list-style:none;width:160px;position:relative;-webkit-transition:all .7s;-moz-transition:all .7s;-ms-transition:all .7s;-o-transition:all .7s;border-left:1px solid #ccc;}.title{color:#fff;font-size:20px;width:600px;background:rgba(0,0,0,0.5);position:absolute;bottom:0;left:0;height:320px;line-height:50px;}.container{width:600px;height:270px;position:absolute;top:50px;left:0;}#box:hover li{width:50px;}#box li:hover{width:600px;}</style></head><body><div id="box"> <ul>  <li>   <a href=""><div class="img1 img"></div></a>   <div class="title"><p>title1</p><div class="container"></div>   </div>  </li>  <li>   <a href=""><div class="img2 img"></div></a>   <div class="title">    <p>title2</p><div class="container"></div>   </div>  </li>  <li>   <a href=""><div class="img3 img"></div></a>   <div class="title"><p>title3</p><div class="container"></div>   </div>  </li>  <li>   <a href=""><div class="img4 img"></div></a>   <div class="title"><p>title4</p><div class="container"></div>   </div>  </li>  <li>   <a href=""><div class="img5 img"></div></a>   <div class="title"><p>title5</p><div class="container"></div>   </div>  </li> </ul></div></body></html>

然后把上一篇文章的代码考进去就OK了，完整代码如下:

<!DOCTYPE html><head><meta charset="UTF-8"><title></title><script src="echarts.js"></script><style>*{padding:0;margin:0;}.img{width:600px;height:320px;background:#000;}.img1{background:red;}.img2{background:green;}.img3{background:blue;}.img4{background:orange;}.img5{background:orangered;}#box{width:805px;height:320px;margin:100px auto;overflow:hidden;box-shadow:0 0 10px 1px rgba(0,0,0,0.35);}#box ul li{float:left;list-style:none;width:160px;position:relative;-webkit-transition:all .7s;-moz-transition:all .7s;-ms-transition:all .7s;-o-transition:all .7s;border-left:1px solid #ccc;}.title{color:#fff;font-size:20px;width:600px;background:rgba(0,0,0,0.5);position:absolute;bottom:0;left:0;height:320px;line-height:50px;}.container{width:600px;height:270px;position:absolute;top:50px;left:0;}#box:hover li{width:50px;}#box li:hover{width:600px;}</style></head><body><div id="box"> <ul>  <li>   <a href=""><div class="img1 img"></div></a>   <div class="title"><p>title1</p><div class="container"></div>   </div>  </li>  <li>   <a href=""><div class="img2 img"></div></a>   <div class="title">    <p>title2</p><div class="container"></div>   </div>  </li>  <li>   <a href=""><div class="img3 img"></div></a>   <div class="title"><p>title3</p><div class="container"></div>   </div>  </li>  <li>   <a href=""><div class="img4 img"></div></a>   <div class="title"><p>title4</p><div class="container"></div>   </div>  </li>  <li>   <a href=""><div class="img5 img"></div></a>   <div class="title"><p>title5</p><div class="container"></div>   </div>  </li> </ul></div><script type="text/javascript">var divs = document.querySelectorAll(".container");for (var i=0;i<divs.length;i++){myCharts = echarts.init(divs[i]);//基于准备好的DOM,初始化echarts实例//var myCharts = echarts.init(document.getElementById("container"));//console.log(myCharts);var option = {//pietitle:{text:"ECharts 数据统计"},series:[{name:"访问量",type:"pie",radius:"60%",data:[{value:'500',name:'Android'},{value:'200',name:'IOS'},{value:'360',name:'PC'},{value:'100',name:'Others'}]}]};//使用定制的配置项和数据显示图表myCharts.setOption(option);}</script></body></html>

阅读全文

0 0