<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts使用例子</title>
<style>
body,div,p,a{
margin: 0;
padding: 0;
}
body,html,#box{
width: 100%;
height: 100%;
background: #ccc;
}
#studyEff{
width: 90%;
height: 40%;
background: white!important;
position: absolute;
top: 5%;
left: 5%;
}
#act{
width: 90%;
height: 40%;
background: white!important;
position: absolute;
top: 55%;
left: 5%;
}
#left{
width: 80px;
height: 80px;
position: absolute;
top: 45%;
left: 60px;
z-index: 9999999999999;
opacity: 0.1;
}
#right{
width: 80px;
height: 80px;
position: absolute;
top: 45%;
right: 76px;
z-index: 9999999999999;
opacity: 0.1;
}
#left:hover,#right:hover{
opacity: 0.5;
}
#mask{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display: none;
z-index:9999999;
background:#ccc;
}
#mask-body{
position: absolute;
top: 100px;
left: 50px;
height: 800px;
border: 1px solid black;
background: white!important;
opacity: 1;
z-index: 99;
}
#mask-header{
position: absolute;
top: 50px;
left: 50px;
height: 50px;
border: 1px solid black;
background: white!important;
opacity: 1;
z-index: 999;
}
#mask-header>button{
padding: 3px;
border: 1px solid black;
position: absolute;
right: 15px;
top: 10px;
cursor: pointer;
}
#mask-header>button:hover{
background: #ccc;
}
</style>
</head>
<body>
<div id="box">
<div id="studyEff"></div>
<div id="act"></div>
</div>
<div id="mask" style="width: 100%;height:100%;">
<div id="mask-header">
<button>退出</button>
</div>
<div id="mask-body"></div>
<div id="left"><img src="img/left.png"></div>
<div id="right"><img src="img/right.png"></div>
</div>
<script src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.js" ></script>
<script>
$("#mask-body").width($(document.body).width()-100);
$("#mask-header").width($(document.body).width()-100);
$("#mask-header>button").click(function(){
$("#mask").css('display',"none");
});
var mask;
var bigArr=[];//这个数组是为了装大分类的
var smallArr=[];//这个数据是为了装小分类的
var allArr=[];//这个数组是为了装所有分类的
var actArr=[
{value:335, name:'视频',data:[
{value:165, name:'优酷'},
{value:170, name:'爱奇艺'}
]},
{value:679, name:'休闲',data:[
{value:310, name:'游戏'},
{value:234, name:'购物'},
{value:135, name:'阅读'}
]},
{value:1548, name:'学习',data:[
{value:1048, name:'WPS'},
{value:251, name:'有道词典'},
{value:147, name:'百度搜索'},
{value:102, name:'其他'}
]}
];
//对actArr数据进行处理
actArr.forEach(function(item){
bigArr.push({value:item.value,name:item.name});
allArr.push(item.name);
item.data.forEach(function(_item){
smallArr.push({value:_item.value,name:_item.name});
allArr.push(_item.name);
});
});
mychart_first("studyEff",['海滨中学','深圳实验中学','深圳市文龙学校','深圳中学','深圳市兴泰实验学校','深圳市坪西学校','深圳市华城学校','深圳中学初中部','深圳市旱塘学校','深圳高级中学初中部'],[85, 88, 75, 71, 88, 90, 72,81,82,73],'学习效率统计',"学习效率");
mychart_five("act","所有",allArr,bigArr,smallArr);
function mychart_first(id,data1,data2,title,barName,maskBody){
var first = echarts.init(document.getElementById(id));
var option_second = {
title: {
text: title,
x: 'left',
y: 'top'
},
tooltip : {
formatter: "平均学习效率 ：81分"
},
legend: {
show: true,
x: 'center',
y: 'top',
data: [barName]
},
toolbox: {
show: true,
feature: {
dataZoom: {
show: true
},
restore: {show: true},
dataView: {show: true, readOnly: true},
magicType: {show: true, type: ['line', 'bar']},
saveAsImage: {show: true},
myTool2: {
show: true,
title: '全屏显示',
icon: 'image://img/fullscreen.png',
onclick: function (){
$("#mask").css("display","block");
mychart_first("mask-body",data1,data2,title,barName);
if(maskBody){
mask=first;
}
}
}
}
},
calculable: true,
xAxis : [
{
type : 'category',
axisLabel:{
interval:0,
rotate:-10
},
data : data1
}
],
yAxis: [
{
show: true,
type: 'value',
splitArea: {show: true}
}
],
series: [
{
name: barName,
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: data2,
label: {
normal: {
show: true,
position: 'top',
textStyle:{
color:"black"
}
}
},
markLine : {
data : [
{type: 'average', name: "平均线"}
],
label: {
normal: {
show: true,
position: 'top',
textStyle:{
color:"black"
}
}
}
}
}
]
};
first.setOption(option_second);
if(maskBody){
echarts 自定义按钮实现全屏
需积分: 48 190 浏览量
2018-11-05
12:10:25
上传
评论
收藏 488KB ZIP 举报
echarts-fullview.zip （9个子文件） 
453627768echart.github.io-master 
index.html 14KB
index.md 1KB img 
left.png 20KB fullscreen.png 19KB right.png 20KB js jquery.js 91KB echarts.js 2.1MB echart.html 14KB _config.yml 25B资源评论
