echarts图表全屏显示设置

前端 同时被 3 个专栏收录
44 篇文章 0 订阅
21 篇文章 0 订阅
8 篇文章 1 订阅

react项目中会遇到点击echarts工具栏中的全屏按钮,让图表全屏显示的问题,这里涉及到自定义工具栏按钮问题。

话不多说,直接上代码:在echart的工具栏中添加全屏按钮并设置点击事件。即toolbox添加自定义图标全屏按钮事件。

示例图:

// html中存放图表id
<div class="container">
      <div id="userTime" />
</div>
$(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) => {
          // 注:yourEchartsId: 你的图表id
          const element = document.getElementById(yourEchartsId);
          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);
}

小伙伴们感觉有帮助的话希望点个赞哟,如果有问题或疑问欢迎大家评论区留言,看到后第一时间回复。

  • 3
    点赞
  • 12
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值