本文介绍如何在ECharts中实现全屏显示并自定义全屏按钮，同时讲解图表间的交互逻辑，如通过点击一个图表来更新另一个图表的数据，以及内外环饼图的联动效果。
echarts使用心得和增加全屏自定义按钮
echats使用（我这里使用的单文件引入的方式）
1.首先导入echart和jq
<script src="js/echarts.js"></script>
<script src=js/jquery.js></script>
2.先准备好一个全屏的div块，平时隐藏当点击全屏显示按钮之后出现
<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>
</body>PS:#mask就是用来全屏展示的，#studyEff和#act是用来画echart的。
3.然后开始在准备好的div里面写开始用echarts画图
<script>
//这是设置全屏的宽高随屏幕的不同宽度而变化
$("#mask-body").width($(document.body).width()-100);
$("#mask-header").width($(document.body).width()-100);
$("#mask-header>button").click(function(){
$("#mask").css('display',"none");
});
//调用mychart_eight将图显示在#studyEff上
mychart_eight("studyEff",['海滨中学','深圳实验中学','深圳市文龙学校','深圳中学','深圳市兴泰实验学校','深圳市坪西学校','深圳市华城学校','深圳中学初中部','深圳市旱塘学校','深圳高级中学初中部'],[85, 88, 75, 71, 88, 90, 72,81,82,73],'学习效率统计',"学习效率");
//调用mychart_five将图显示在#act上
mychart_five("act");
function mychart_eight(id,data1,data2,title,barName){
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_eight("mask-body",data1,data2,title,barName);
}
}
}
},
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);
first.on("click",function(params){
console.log(params)
})
};
function mychart_five(id,maskBody){
var five = echarts.init(document.getElementById(id));
var option_five = {
title: {
text: "活动分类",
x: 'left',
y: 'top'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: '10',
y:"50",
data:['优酷','爱奇艺','视频','休闲','学习','游戏','购物','阅读','WPS','有道词典','百度搜索','其他']
},
toolbox: {
//显示策略，可选为：true（显示） | false（隐藏），默认值为false
show: true,
//启用功能，目前支持feature，工具箱自定义功能回调处理
feature: {
//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能
dataView: {show: true, readOnly: true},
//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'
saveAsImage: {show: true},
myTool2: {
show: true,
title: '全屏显示',
icon: 'image://img/fullscreen.png',
onclick: function (){
$("#mask").css("display","block");
$("body").css("overflow-y","hidden");
mychart_five("mask-body");
}
}
}
},
series: [
{
name:'大分类',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'视频', selected:true},
{value:679, name:'休闲'},
{value:1548, name:'学习'}
]
},
{
name:'小分类',
type:'pie',
radius: ['40%', '55%'],
data:[
{value:165, name:'优酷'},
{value:170, name:'爱奇艺'},
{value:310, name:'游戏'},
{value:234, name:'购物'},
{value:135, name:'阅读'},
{value:1048, name:'WPS'},
{value:251, name:'有道词典'},
{value:147, name:'百度搜索'},
{value:102, name:'其他'}
]
}
]
};
five.setOption(option_five);
five.on("click",function(params){
console.log(params);
});
five.on('legendselectchanged', function (params) {
console.log(params);
if(params.name=="视频"){
console.log(five.getOption());
var _fiveOption=five.getOption();
_fiveOption.legend[0].selected.优酷=_fiveOption.legend[0].selected.视频;
_fiveOption.legend[0].selected.爱奇艺=_fiveOption.legend[0].selected.视频;
console.log(_fiveOption);
five.setOption(_fiveOption);
}
});
if(maskBody){
mask=five;
}
};4.增加全屏按钮
我这里将使用echarts封装成function mychart_eight（）函数是为了在点击全屏显示的时候，直接调用这个函数就可以在#mask里面将这个图形快速的画出来，简化代码，减少量；
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_eight("mask-body",data1,data2,title,barName);
}
}
}
}这里的myTool2就是我的自定义按钮我只需在点击这个按钮的时候，触发调用
mychart_eight(“mask-body”,data1,data2,title,barName)就能将图在mask-body里面画出来。
当点击了右上角的全屏显示的按钮之后就变成
5.点击图形另外一个图根据这个图的点击的做相应的生成
这里我做的例子是以通过学习效率统计来控制活动分类的demo
首先我们需要给学习效率统计绑定一个点击事件
first.on("click",function(params){
console.log(params);
if(params.componentType=="markLine"){
mychart_five("act","所有");
}else if(params.componentType=="series"){
mychart_five("act",params.name);
}
});当点击平均线的时候，我打印出来的params是这样的
当我点击海滨中学的柱体的时候，我打印出来的params是这样的
这是我们对比可以发现可以通过判断params里面的componentType判断是点击的平均线还是柱体，当点击平均线的时候执行mychart_five(“act”,”所有”)，当点击单独的柱体的时候执行mychart_five(“act”,params.name)，就能实现点不同柱体变成对应的标题，点平均线就标题变成所有的效果了。这是如果自己有接口，把params.name不同的名字传到后台，拿到对应的数据，将里面数据改变就能实现点效率分析，活动分类随着点击的不同而变化不同的数据了。
6.内外环关联
这里的内外环关联，就是像活动分类那种双环的图，我将它内环写大类，外环写细分的小类，当我点击内环的某一项，外环其相对应地方也会消失，当点击外环某一项消失的时候，内环的大分类会相应减少一定得数值，就像内外环关联了一样。
//给这个绑定一个点击旁边的lengend改变就会触发的事件
five.on('legendselectchanged', function (params) {
console.log(params);
console.log(five.getOption());
//获取当前的option
var _fiveOption=five.getOption();
//遍历actArr，看能不能是不是大分类里面的
for(var i=0;i<actArr.length;i++){
var _item=actArr[i].name;
//如果是大分类就把小分类设置成大分类一样
if(params.name==_item){
actArr[i].data.forEach(function(name){
_fiveOption.legend[0].selected[name.name]=_fiveOption.legend[0].selected[_item];
});
//如果不是大分类，就遍历小分类
}else{
actArr[i].data.forEach(function(name){
if(params.name==name.name){
//console.log(name.Value);
//console.log(_fiveOption.series[0].data[i].value);
//如果option里面的_fiveOption.legend[0].selected[name.name]这个存在，就是如果小分类是从暗变亮
if(_fiveOption.legend[0].selected[name.name]){
_fiveOption.legend[0].selected[_item]=true;
_fiveOption.series[0].data[i].value+=name.value;
//这里的处理是小分类大分类全是暗的时候，点下小分类，大分类由暗变亮的时候会有个初始值，会加上后面点亮的小分类的值，这时候值就不对了，所以我加了一个判断，当满足这个判断的时候就把大分类的初始值改成小分类的值
if(_fiveOption.series[0].data[i].value>actArr[i].value){
_fiveOption.series[0].data[i].value-=actArr[i].value;
}
}else{
//如果不存在，就是小分类从亮变暗
_fiveOption.series[0].data[i].value-=name.value;
if(_fiveOption.series[0].data[i].value==0){
_fiveOption.legend[0].selected[_item]=false;
}
}
}
})
}
}
five.setOption(_fiveOption);
});实现的效果就是这样的：
初始状态：
点击了视频之后
这里就可以看出，当我点击了视频之后，外面的圈的优酷和爱奇艺也随着消失了。相当于实现了一个关联效果。
7.全屏下左右切换
在全屏下像幻灯片一样切换，会出现一个问题，就是我无法知道这是当前的图片是哪一张？为了解决这个问题，我在mychart_five()和mychart_first(）的后面都加了一个参数，然后声明了一个全局变量mask。当我在点击全屏的时候，我用mask 把echarts.init(document.getElementById(id))这个变量的值存起来，这时候我就可以用mask.getOption()方法，来得到此时的标题，来看下我执行
$("#right").click(function(){
console.log(mask.getOption());
});这个代码之后打印出的结果：
这里面有个text就是当面的图片的标题，这是我们就可以通过写if判断写，如果是这个标题，将在mask-body里面画哪张图。
$("#right").click(function(){
console.log(mask.getOption());
if(mask.getOption().title[0].text.indexOf("活动分类")!=-1){
mychart_first("mask-body",['海滨中学','深圳实验中学','深圳市文龙学校','深圳中学','深圳市兴泰实验学校','深圳市坪西学校','深圳市华城学校','深圳中学初中部','深圳市旱塘学校','深圳高级中学初中部'],[85, 88, 75, 71, 88, 90, 72,81,82,73],'学习效率统计',"学习效率","mask");
}else if(mask.getOption().title[0].text.indexOf("学习效率统计")!=-1){
mychart_five("mask-body","所有",allArr,bigArr,smallArr,"mask");
}
});这是向右划的代码，当点向右划的时候，会判断当前的标题名字，然后执行里面的函数在mask-body里面将其画出来。向左滑也是如此。
实现的效果如下：
初始状态
点击了向右切之后
这个Echarts的Demo我已经上传在github上面了，地址是https://453627768.github.io/echart.html，有需要的朋友可以去看看！
需要代码的朋友可以去https://github.com/453627768/453627768echart.github.io下载代码，如果觉得好的可以点赞，有什么问题的可以留言告诉我谢谢！
扫一扫
4451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
