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下载代码,如果觉得好的可以点赞,有什么问题的可以留言告诉我谢谢!