react项目中会遇到点击echarts工具栏中的全屏按钮,让图表全屏显示的问题,这里涉及到自定义工具栏按钮问题。
话不多说,直接上代码:在echart的工具栏中添加全屏按钮并设置点击事件。即toolbox添加自定义图标全屏按钮事件。
示例图:
// html中存放图表id
$(document).ready(function () {
var option = {
color: '#C23531',
toolbox: {
show: true,
itemGap: 5,
top: -5,
feature: {
dataView: {
show: false,
},
dataZoom: {
show: true,
iconStyle: {
opacity: 0,
},
},
restore: { show: false },
saveAsImage: { show: false },
// 全屏具体实现
myFull: {
show: true,
title: '全屏查看',
icon: `image://${screenUrl}`,
onclick: (e) => {
const element = document.getElementById(e.option.value);
if (element.requestFullScreen) { // HTML W3C 提议
element.requestFullScreen();
} else if (element.msRequestFullscreen) { // IE11
element.msRequestFullScreen();
} else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
element.mozRequestFullScreen();
}
// 退出全屏
if (element.requestFullScreen) {
document.exitFullscreen();
} else if (element.msRequestFullScreen) {
document.msExitFullscreen();
} else if (element.webkitRequestFullScreen) {
document.webkitCancelFullScreen();
} else if (element.mozRequestFullScreen) {
document.mozCancelFullScreen();
}
},
},
},
},
tooltip: {},
grid: {
left: '4%',
right: '5%',
bottom: '2%',
top: '15%',
containLabel: true,
},
// grid: { containLabel: true, x: 10, y: 25, x2: 10, y2: 3 },
xAxis: { name: '' },
yAxis: {
type: 'category',
data: [四川, 北京, 上海, 广东, 深圳, 广西, 浙江],
},
series: [
{
type: 'bar',
data: [123, 3123, 12312, 432, 242, 234, 24423],
},
],
}
// setoption
var echartsItem = echarts.init(document.getElementById('userTime'));
echartsItem.setOption(option);
}
小伙伴们感觉有帮助的话希望点个赞哟,如果有问题或疑问欢迎大家评论区留言,看到后第一时间回复。