Vue中使用Echarts可视化图表宽度自适应的完美解决方案

2024-09-28 07:50:11

一、问题阐述：

开发H5项目中应用到Echarts数据可视化，由于H5主要使用在手机，屏幕宽度大大限制了图表的展现，问题如下。

上图中x轴的数据是动态的，从2022年切换到2021年数据变化，此时如果x轴的数据过多就会显得格外拥挤。

二、解决思路：

我的解决方案是，在放置Echarts的容器(div)外层再套一层容器(div)，外层容器宽度固定设置手机屏幕宽，并设置溢出显示滚动条(width: 100%;overflow: auto)，内层Echarts容器宽度初始宽为100%，如果数据大于设定的量时，就加大放置Echarts的容器宽度。

本以为能顺利解决问题时，然而效果并不尽人意，效果如下。

1. 容器宽度改变了

2. 滚动条出现

3. 图表未加宽到容器宽度

其实每次更改筛选条件都会从新创建实例，但Echarts图表并未按照预期加宽，感觉就像缓存了最初设定的容器宽度一样。

仔细看文档才发现，原来Echarts图表本身是提供了一个resize的函数专门处理这类问题。

三、最终效果：

完整代码如下

<!-- 学生统计 折线图 HTML部分 -->
<div class="stuCensus_box">
   <div
    id="student_census"
    class="student_census"
    ref="student_census"
   ></div>
</div>

// js部分 学生统计 折线图
initStudentCensus() {
// 根据x轴内容长短设定echarts的宽度
   if (this.stuCensus_xAxis.length > 9) {
     this.$refs.student_census.style.width = "200%";
   } else if (this.stuCensus_xAxis.length > 5) {
     this.$refs.student_census.style.width = "130%";
   } else {
     this.$refs.student_census.style.width = "100%";
   }

   var myChart = this.$echarts.init(this.$refs.student_census);

   var option = {
     tooltip: {
       trigger: "axis",
       extraCssText: "max-height: 200px; overflow: auto;", // 设置悬浮窗样式
       position: function (pos, params, dom) {
       dom.style.pointerEvents = "auto"; // 修改悬浮窗不可绑定事件的css属性
       },
     },
     legend: {
       type: "scroll",
       data: this.stuCensus_legend,
     },
     grid: {
       top: "14%",
       left: "0",
       right: "1%",
       bottom: "3%",
       containLabel: true,
     },
     xAxis: {
       type: "category",
       data: this.stuCensus_xAxis,
       axisLabel: { rotate: 45 },
     },
     yAxis: {
       type: "value",
       axisLabel: axisLabel,
     },
     series: this.stuCensusSeries,
   };
   myChart.setOption(option, true);
   myChart.resize(); // 调用此API更新echarts的宽高才能生效
},

1. 用$refs设定容器宽度。

2. setOption创建可视化图表实例

3. resize重绘可视化图表

效果如下

到此这篇关于Vue中使用Echarts可视化图表，宽度自适应解决方案的文章就介绍到这了,更多相关Vue Echarts可视化图表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue项目中vue-echarts讲解及常用图表实现方案(推荐)

目录 1.图表主题颜色的修改 2.XY轴体颜色和文本颜色修改 3.横向柱状图的显示 4.过滤xy轴文本内容 5.Y轴文本显示在轴线内 6.在柱状条头部添加标签内容 7.自定义图例修改 8.环比图中间显示内容图表类的项目操作一般常见于管理平台系统,移动端项目中并不是特别常见,不常见不代表没有,在一些商城类应用中,商家需要看到商品的销量分析,盈利分析等,就需要用到图标,比较常用的图标库,像百度的ECHARTS,蚂蚁金服的AntV都是不错的图标库,感兴趣的读者可以直接到他们的官网阅读相关的资料,笔者
Vue echarts画甘特图流程详细讲解

vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 3.具体页面使用: <template> <div class="about"> <h1>This is echart
vue中的echarts实现宽度自适应的解决方案

今天项目中需要使用到 echarts 为了自适应.找到了.以下解决方案. 效果图代码 <template>  <div class="chart"> <div ref="main1" style="width: 600px;height:400px;" ></div> <div ref="main2" style="wi
Vue echarts模拟后端数据流程详解

目录 KOA2的使用安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口模拟服务
Vue echarts实例项目商家销量统计图实现详解

目录组件结构设计发送请求获取对应的数据并进行相应操作当窗口尺寸发生变化时的操作总体效果如图组件结构设计 SellerPage.vue  <template> <div class="comP1"> <Seller></Seller> </div> </template> <script> import Selle
vue中设置echarts宽度自适应的代码步骤

目录问题描述无自适应效果图有自适应效果图代码步骤问题描述我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应.本文记录一下设置echarts图表的自适应的步骤.我们先看一下没有做echarts自适应的效果无自适应效果图我们发现echarts图的宽度并没有随着页面宽度的变化而变化有自适应效果图很显然,这个才是我们想要的效果代码步骤 echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行
Vue echarts实例项目地区销量趋势堆叠折线图实现详解

最终效果如图组件结构设计外部 Trendpage.vue  <template> <div class="comP1"> <Trend></Trend> </div> </template> <script> import Trend from "@/components/Trend"; export
Vue中使用Echarts可视化图表宽度自适应的完美解决方案

目录一.问题阐述: 二.解决思路: 三.最终效果: 一.问题阐述: 开发H5项目中应用到Echarts数据可视化,由于H5主要使用在手机,屏幕宽度大大限制了图表的展现,问题如下. 上图中x轴的数据是动态的,从2022年切换到2021年数据变化,此时如果x轴的数据过多就会显得格外拥挤. 二.解决思路: 我的解决方案是,在放置Echarts的容器(div)外层再套一层容器(div),外层容器宽度固定设置手机屏幕宽,并设置溢出显示滚动条(width: 100%;overflow: auto),内层E
在Vue中使用Echarts可视化库的完整步骤记录

前言由于最近项目需要做可视化数据展示,也就是用图表展示数据,他还有一个很高端的名字:"大数据可视化"(参考图一),首先考虑选择什么图表库来作为基础开发,目前被普遍认可的是Hcharts.Echarts.AntV. 介绍: Hcharts:国外的一款图表库,是图表库的领头羊 Echarts:百度开发的数据可视化库,国内图表库的 "领军人物" AntV:是蚂蚁金服开发的数据可视化库总结出以下几个优略点区别Echarts.Hcharts哪个比较合适: 1.学习容易程度
Vue中的echarts图表如何实现loading效果

目录 echarts图表实现loading效果 Vue使用echarts图表总结安装echarts依赖创建图表在页面中的使用(在这里我用的局部引入) echarts图表实现loading效果 main.js 中配置Vue属性ecahrts // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts data() 初始化数据调用数据 mounted() 周期函数内获取画布节点,并且调用加载loadi
在Vue中使用echarts的实例代码（3种图）

前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图以下数据已做脱敏处理这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换
在vue中实现echarts随窗体变化

<div id="myChart" :style="{width: '100%', height: '345px'}"></div> <script> export default { mounted(){ this.drawLine(); }, methods: { drawLine(){ var myChartContainer = document.getElementById('myChart'); //用于使chart自
在Vue中使用echarts的方法

上篇文章给大家介绍了在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入上面全局引入会将所有的echarts图表打包,导致体积过大,我
vue tab切换,解决echartst图表宽度只有100px的问题

解决思路:直接将图表的宽高写死,根据实际代码进行改写,提供一个思路 1.将图表放进一个div里面 <div class="echarts"> <div id="myChart" :style="{width: '100%', height: '150px'}"></div> </div> 2.定义一个方法,并在mounted视图更新的时候执行 <script> export defaul
在Vue中使用Echarts实例图的方法实例

前言由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件.但是新手猛的上手的话,可能会有点束手无策,所以这篇就是来写一点入门的内容,外加自己一点的小心得. 一.首先要在项目中下载echarts依赖 npm install echarts -S //或者使用淘宝的镜像 cnpm install echarts -S 二.然后就要再main.js文件中来进行全局引入 // 引入echarts import echarts from 'echarts' Vu

Vue中使用Echarts可视化图表宽度自适应的完美解决方案

目录

一、问题阐述：

二、解决思路：

三、最终效果：

相关推荐

随机推荐