echarts图表全屏显示设置

最新推荐文章于 2024-07-23 17:42:36 发布

厚积而薄发1528

最新推荐文章于 2024-07-23 17:42:36 发布

阅读量1.8w

点赞数 4

分类专栏：前端 React 文章标签： echarts全屏查看图表

本文链接：https://blog.csdn.net/qq_38519358/article/details/96166898

版权

前端同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

React

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);
}

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