VUE使用Echarts图表自适应（单个Echarts图表）

最新推荐文章于 2023-06-01 17:15:32 发布
最新推荐文章于 2023-06-01 17:15:32 发布
阅读量665 收藏 1
点赞数
文章标签： 数据可视化 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ryan55/article/details/104985065
版权
单个echarts图表自适应

在使用echarts时，当窗口改变是，图标并不会变化，这就引起了图标错位，很不美观。
这时候需要用到echarts自带的 resize来解决这个问题。

代码如下

 // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      const res = this.option
      myChart.setOption(res)
      window.onresize = myChart.resize;

在 myChart.setOption(res)后面加上这句代码即可
window.onresize = myChart.resize

现在就可自适应了

如果一个页面有多个图表的话，这个方法不起作用，可以参考他的方法
link

小呦子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 图表使用（一）
uj
04-16 1687
折线图和柱状图对比通过点击Echart 图表右上角的 色块 可以控制对应图表的显隐。但在多条柱状图中，对应的图形复杂（可以调整柱状图之间的距离解决），不符合图表直观清晰的特征，所以通过改写成折线图的方式更有利。在只有两支柱状图时，使用柱状图较好。2. 多图表展示一般一个option 对应一张图表，但是也可以将多张图表通过一个option 展示
echarts图表的内边距_ECharts 图表插件使用整理（图表配置实现）
weixin_39764603的博客
12-22 2823
ECharts 图表插件使用整理说明ECharts 是一个 JavaScript 实现的开源可视化库，兼容当前绝大部分浏览器 IE 8 以上，是一个可高度个性化定制的数据可视化图表ECharts 版本 –> 4.0.2这篇文章只是对 ECharts 的 API 学习了一遍后，做的简单记录，结合 react 和 vue 的案例模板会在代码库中陆续实现。vue + echarts 使用说明rea...
节流函数（闭包第二种形式传参），用来限制函数执行
weixin_45838680的博客
07-01 380
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> // 窗口大小变化 window.onresize = throttle(function () { console.log('大家好!!!'); }
使用echarts.resize()实现窗口缩放时图表自适应(vue)
xiubinxu的博客
10-10 3131
使用echarts.resize()实现缩放时图表自适应(vue) 不知道大家使用echarts时是否遇到过当我们的窗口改变时,我们页面上的图表就缺失了一块,那一块被白色什么的所覆盖,图表没有实现实时的刷新,咋办呢? 技术要点: echarts里面的resize() + 节流 mounted() { // this.initEcharts 初始化图表 this.initEcharts(this.type) // debounce 节流函数 下面送上 this.__resizeHandler
vue+element项目中对echarts图表随着浏览器窗口resize的处理
duansamve的博客
05-24 1632
知识点： mixins、ref、$refs、$nextTick() 准备工作： 1、项目中安装echarts： cnpm i echarts -S 2、在main.js中引入echarts： import echarts from 'echarts' Vue.prototype.$echarts = echarts 实现方式： 1、普通方式： 实现该功能的单文件组件为：chart.vue <template> <el-row> <el-co
解决vue+ Echarts的 resize()方法，在多个echarts图标下window.onresize，只有一个图表自适应生效
weixin_43138882的博客
11-18 2048
1 问题： 在页面上使用echarts有多个图标 resize 缩放只有最后一个有效。 2 解决 改变原来官方写法 1） html里 <div id="container" style="height: 400px;"></div> // 2) methods里 drawLine(){ // 记得在 return里定义好 myChart 字段。 this.myChart = echarts.init(document.getElement
Vue项目中Echarts自适应整理（图表自适应resize失效等及文字大小适配）
Yusian_的博客
06-01 2800
Echarts自适应相关整理（图表大小及文字大小）
vue中echarts3.0自适应的方法
08-27
然而，在使用 ECharts 时，如何使图表自适应浏览器窗口的尺寸变化是一个常见的问题。下面将介绍两种常见的 ECharts 自适应方法，以便于 Vue 开发者更好地使用 ECharts。 第一种方法：浏览器自适应 在使用 ECharts ...
【JavaScript源代码】vue使用echarts图表自适应的几种解决方案.docx
12-29
以下是针对Vue中ECharts图表自适应的几种常见解决方案： 1. **使用`window.onresize`事件** 这是最基础的实现方式，通过监听窗口的resize事件，调用ECharts的`resize()`方法来更新图表的大小。代码示例如下： ```...
完美解决vue 中多个echarts图表自适应的问题
10-15
总结来说，解决Vue中多个ECharts图表自适应的问题，关键在于正确地监听窗口的`resize`事件，并为每个图表实例调用`resize`方法。同时，通过封装ECharts组件，可以更好地管理和复用图表，提高开发效率，实现动态数据...
vue使用echarts图表自适应的几种解决方案
01-18
多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样写法不是很灵活）； let myChart1 = echarts.init(document.getElementById(dom1)) let myChart2 = echarts.init(document.getElementByI
Vue-图表resize事件
Moon Star
04-02 2114
有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写： 这样子图表组件如果跟父容器组件不在一个页面，子组件的状态就被放到父组件进行管理，为了维护方便，我们自然希望子组件的事件和状态由自己来维护，这样在添加删除组件的时候就不需要去父组件挨个修改 优化 这里使用了lodash的节流throttle函数，也可以...
vue+echart图表自适应屏幕大小、点击侧边栏展开收缩图表自适应大小resize
幼儿园园长
07-03 6666
开发中用到了echart图表，需要图表自适应大小resize,一开始使用的方法是： window.onresize = function () { this.myChart.resize(); }; 但是又遇到一个问题，点击侧边栏的展开收起的时候，图表的大小没有自适应（因为窗口的大小没有变化） 这里参考vue+element+admin的框架写的自适应 一、index.vue的文件 引入chart图表`` 这里是数据 chartData: { title: {
vue中使用echarts图表自适应的几种基本解决方案
nz618的博客
04-01 4043
1.使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点：可以根据窗口大小实现自适应 缺点： 多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样写法不是很灵活）； l...
vue项目中echarts自适应问题高级解决方案
chenwei1113的博客
05-12 2229
vue项目中echarts自适应问题高级解决方案：画布大小和容器大小不一致
基于VUE的echart图表自适应窗口大小变化插件开发
weixin_33697898的博客
03-10 607
需求 在PC端开发含图表展示的页面时，需要考虑用户调整浏览器窗口大小后图表能够根据窗口大小自适应变化。 常规做法 在含有图表组件mounted的钩子中增加监听window的resize事件，具体如下代码所示： <template> <div> <div id="chart-container"></div> &...
Echarts在vue中的基本使用以及常用配置
qq_45747117的博客
05-07 1423
1、安装Echarts npm install echarts --save 2、在main.js中引入 //全局引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts=echarts 3、在组件中使用 准备一个盒子，确定盒子宽高 <div> <!-- 基本的折线图 --> <div id="line" style="width: 400px; height:..
vue中设置echarts宽度自适应效果
qq_38210427的博客
04-13 2982
我们使用vue做项目的时候，常常需要做到echarts图表的自适应，一般是根据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。我们先看一下没有做echarts自适应的效果。echart图表本身提供了一个resize的函数，我们只需要监听页面的resize变化以后，去执行echarts的resize方法即可重绘canvas，从而实现对应自适应效果。请看代码中的注释步骤。
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
最新发布
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
在vue中使用echarts实现动态数据展示,以及echarts图表自适应
05-19
使用ECharts实现动态数据展示可以通过以下步骤： 1. 引入ECharts库和Vue-ECharts组件库。 ```javascript import echarts from 'echarts' import 'echarts-gl' import 'vue-echarts/components/ECharts.vue' ``` 2. 在Vue组件中注册ECharts组件。 ```javascript export default { name: 'EChartsDemo', components: { 'v-chart': ECharts }, data() { return { option: {...} // ECharts配置项 } } } ``` 3. 在Vue组件中定义一个定时器，用于动态更新ECharts数据。 ```javascript mounted() { setInterval(() => { // 更新ECharts数据 this.option.series[0].data = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100] }, 1000) } ``` 至于ECharts图表自适应，可以通过以下方法实现： 1. 在ECharts配置项中使用`grid`属性设置图表布局。 ```javascript option: { grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, ... } ``` 2. 在Vue组件中通过CSS样式设置ECharts图表容器的宽度和高度。 ```css .echarts-container { width: 100%; height: 100%; } ``` 3. 在Vue组件的`mounted`钩子函数中监听窗口大小变化事件，并重新渲染ECharts图表。 ```javascript mounted() { window.addEventListener('resize', this.handleResize) }, methods: { handleResize() { this.$refs.chart.resize() } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值