echarts 缩放屏幕 resize 多图表功能

 1     drawLine(data){  7           that.myChartA = echarts.init(document.getElementById(obj))
 8           that.myChartA.setOption(option,true)                      //画图
 9           that.addLoadEvent(that.myChartA.resize);                   //添加 监听屏幕缩放
10           setTimeout(function(){
11             that.myChartA.resize();
12           },1)
13     },
14     addLoadEvent(fn){
15       let that = this;
16       var old = window.onresize;
17       if(typeof window.onresize != ‘function‘){                     //防止多个window.onresize   冲突  解决
18         window.onresize = fn;
19       }else{
20         window.onresize = function(){
21           old();
22             setTimeout(function(){                                     //个别时候无法刷新echarts 延迟1MS  解决
23               fn();
24             },1)
25           }
26       }
27   },

原文地址:https://www.cnblogs.com/zlq92/p/10214548.html

时间: 2024-11-07 22:53:08

echarts 缩放屏幕 resize 多图表功能的相关文章

图表控件与FineReport图表功能深度对比

现代社会早已进入读图微时代,而谷歌识图应用和百度识图应用的推出预示着全民读图时代的来临.在读图时代,因为图表直观展示信息.对比和趋势的优势,图表表现数据也就成为一种必然.图表功能成了各大数据处理软件必须做好的功能之一,同时图表控件也能实现数据的图表化,那么两者的图表功能区别在哪里呢?今天就来介绍一下数据处理软件--FineReport报表软件和一般图表控件的功能. TeeChart for TeeChart for原版为英文,为适应中国市场,对其做了部分汉化处理,于是有了TeeChart for

报表应用系统中怎样正确使用图表功能

相信对于报表应用系统研发人员而言.都不会对图表功能感到陌生.由于报表数据通常以图表和表格的形式显示.可是.你真的了解为什么须要使用图表功能吗.不同图表类型的最佳应用场景?本文将为你解开这些谜团. (一) 为什么须要使用图表功能 图表是一种将数据以图形方式显示的可视化手段,多用于实现下面需求: 1. 让数据更易于阅读和理解 2. 展示数据数据对照 3. 发挥数据的影响力 4. 将原始数据转换为实用的管理决策信息 当数据变得易于阅读和理解时.我们就easy记住它,并在以后使用到这些数据,充分发挥数据

缩放屏幕的时候banner被压缩变形!

大家在做项目的时候有没有遇到一个问题呢    就是一张图片宽度100%    在缩放屏幕的时候图片会被压缩变形!!!那么怎么才能实现图片始终居中而不被压缩变形呢?  接下来让我带领大家解决这个问题   请看代码↓↓↓↓↓↓↓ <div class='bannerbox'> <div class='banner'> <img src="../assets/01.jpeg"> </div> </div> 下面是css: .bann

Echarts同一页面多个图表自适应浏览器窗口大小——window.onresize

当前做的一个项目中,频繁使用到百度团队的Echarts,发在一个页面同时出现多个图表时,只有最后一个图表触发了window.onresize事件,查询官方文档后得到解决. 方法如下: hwChart.setOption(option_hw); swChart.setOption(option_sw); setTimeout(function (){ window.onresize = function () { hwChart.resize(); swChart.resize(); } },20

Echarts自定义折线图例,增加选中功能

用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应的折线opacity会降低,(柱状图,饼图等等也类似于此),这是一个小例子(如果满足不了您的视觉要求,您可以自己定义css样式,达到自己想要的视觉效果): <!doctype html> <html> <head> <meta charset="utf-8&

安卓屏幕助手下载及功能介绍

软件目的 随着安卓应用开发的普及,手机项目演示时很不方便.安卓屏幕助手旨在解决此问题 软件简介 通过安卓屏幕助手,手机USB连接上电脑后,在电脑屏幕上同步显示手机的屏幕画面. 功能列表 实时同步显示手机屏幕,支持横屏竖屏切换. 实时记录屏幕影像保存为视频. 截取当前屏幕保存为图片. 软件截图 注意事项 软件正常使用前提:电脑安装了豌豆荚等助手软件,并开启.通过USB连接手机 其他说明:由于ADB接口的限制,传输效果达不到实时. 文件下载 安卓屏幕助手.zip

ECharts+PHP+MySQ+ Ajax 实现图表绘制

1.下载echarts插件,下载地址:http://echarts.baidu.com/ 2.具体入门案例就不啰嗦了,参考官方教程:http://echarts.baidu.com/tutorial.html 3.前台引入echarts和jquery,ajax请求相应的json数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</t

spring 文件上传 + 图片缩放 + 图片截取(头像功能)

实现图片上传 用户必须能够上传图片,因此需要文件上传的功能.比较常见的文件上传组件有Commons FileUpload,这里我们选择Commons FileUpload. 首先是页面的form表单设置,记住要配method和enctype属性哦!! <form action="upload.do" method="post"            enctype="multipart/form-data">           &l

EEPlat的图表功能

EEPlat最新版继承了百度的eChart组件,方便建立各种统计图表.如下图所示: 在这里,我们将简单介绍EEPlat的图表配置功能. 首先我们建立一张Demo数据表.如用户访问来源,Demo表包含三个字段:关键字.来源.来源数量.然后输入Demo数据,展示来源分布率图表. 创建表如下,并初始化. 点击完成初始化后的业务对象,选择菜单"ChartConfig" 输入相关信息,并选择饼图,如下图: 选择的服务是图表的数据来源,我们这里使用默认的list即可,实际使用可以根据自己的需求配置