表格的下拉框中包含echarts图表的demo

最新推荐文章于 2022-11-10 15:29:33 发布

码田里的小白菜

最新推荐文章于 2022-11-10 15:29:33 发布

阅读量562

点赞数

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/weixin_45294459/article/details/124885119

版权

右图为左图点击后的效果，下拉框中包含一个echarts图表

echarts.min.js和vue.js是分别从官网下载的文件，下载很方便，在此不做赘述。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="echarts.min.js"></script>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<style>
*{padding:0;margin:0;}

.img{width:600px;height:320px;background:#000;}
.img1{background:red;}
#box{
	width:805px;
	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:100%;
    height: 50px;
	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:100%;
	background:rgba(0,0,0,0.5);
	position:absolute;
	top:0;
	left:0;
	
	line-height:50px;
	}
.container{
	width:600px;
	height:270px;
	position:absolute;
	top:50px;
	left:0;
	}
#box .fill{height:600px;}
.iconclick {
    display: inline-block;
}
</style>
</head>
<body>
<div id="box">
 <ul>
  <li v-for="i in count" class="liget lige">
   <a href=""><div class="img1 img"></div></a>
   <div class="title">
	<p class="iconclick">title{{i}}</p>
    <span  class="iconclick" @click="iconclick(i)">点此展开</span>
	<div class="container"></div>
   </div>
  </li>
 </ul>
</div>
 
<script type="text/javascript">
	// var a=0;
	 var app=new Vue({
            el:"#box",
            data:{
                count:5
            },
			methods:{
				iconclick(i){
					if (document.getElementsByClassName('lige')[i-1].className=='fill lige') {
						document.getElementsByClassName('lige')[i-1].className='liget lige';	
					}else{
					document.getElementsByClassName('lige')[i-1].className='fill lige';	
				}
				}
			}
        });
		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 = {
				title:{
					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>