uniapp Echart X轴Y轴文字被遮挡怎么办,或未能铺满整个容器

news2024/11/17 15:45:21
  1. 有时候布局太小,使用echarts,x轴y轴文字容易被遮挡,怎么解决这个问题呢,或者是未能铺满整个容器。

方法1: 直接设置 containLabel 字段

options: {

    grid: {

       containLabel: true,

    },}

 方法2:  间接设置,但是不那么准确,自适应的页面会有问题

options: {

    grid: {

         left: '1%',

         right: '1%',

         bottom: '10%'

    },}

方法3:同时调整4个方向 grid{} 与显示数值label同时配置 containLabel 

<template>
 <view class="seven">
      <view class="chart-title">趋势</view>
      <view class="charts-box" v-if="chart">
        <qiun-data-charts
            type="column"
            :eopts="eopts"
            :chartData="chartData"
            :echartsH5="true"
            padding="0"
            margin="0"/>
      </view>
    </view>
</template>
//...

eopts:{
 grid: {
              top: '8%',
              left: '-10%',
              right: '0%',
              bottom: '5%',
              containLabel: true
            },
}

问题二:当前数据值比较多位时,也会导致图表偏移。

解决:

此问题解法:

方法5:与方法4结合,再动态调整。

grid{}, containLabel ,再加动态判断数值label长度,动态调整。判断是左的数据长度了微调left的位置。增加watch观察api请求回来的数据,然后判断最左右数据值长度是多少?

  todayCount(newValue) {
      console.log(">>|------------- todayCount", this.todayCount.money7)
      if (this.todayCount.money7) {
        let len = this.todayCount.money7[1].toString().length
        console.log(`-[${this.todayCount.money7[1].toString()}]`, len)// 1
        if (len < 2) {
          this.eopts.grid.left = '-10%'
        } else if (len >= 2 && len <= 5) {
          this.eopts.grid.left = '-10%'
        } else {
          this.eopts.grid.left = '-13%'
        }
        console.log(">>|-----------eopts", this.todayCount.money7, this.eopts.grid)
      }
    }
  }

运行效果

数值为0:

数值长度为5位以上

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1025543.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序页面栈超出导致页面卡死

微信小程序页面栈不能超出10个 超出10个之后无法进行点击选择跳转 解决方法&#xff1a; 跳转的时候&#xff0c;判断之前页面栈里是否存在要跳转的页面&#xff0c; 如果存在之前页面&#xff0c;就navigateBack返回之前页面&#xff0c; 如果不存在之前页面&#xff0c;判断…

RocketMQ 核心编程模型以及生产环境最佳实践

文章目录 1、RocketMQ的消息模型2、深入理解RocketMQ的消息模型2.1、RocketMQ客户端基本流程2.2、消息确认机制2.2.1、 发送消息的方式第一种称为单向发送第二种称为同步发送第三种称为异步发送 2.2.2、状态确认机制2.2.3、消费者也可以自行指定起始消费位点 2.3、广播消息2.4、…

nginx 报错[emerg]: unknown directive “锘? in E:\nginx-1.18.0/conf/nginx.conf:3

报错&#xff1a;nginx 报错[emerg] 32408#14080: unknown directive "锘? in E:\nginx-1.18.0/conf/nginx.conf:3 原因&#xff1a;使用nginx服务时&#xff0c;用txt记事本打开编辑了nginx.conf文件&#xff0c;类似WINDOWS自带的记事本等软件&#xff0c;在保存一个以…

mysql触发器triggers

文章目录 1、创建触发器2、 查看触发器3、删除触发器 1、创建触发器 语法&#xff1a; CREATE TRIGGER 触发器名称 BEFORE/AFTER INSERT/UPDATE/DELETE ON 表名 FOR EACH ROW BEGIN SQL逻辑 END;BEFORE 或 AFTER 表示之前 还是 之后触发 INSERT 或 UPDATE 或 DELETE 表示监听…

PostgreSQL 查询某个属性相同内容出现的次数

查询某个数据库表属性 name 相同内容出现出现的次数&#xff0c;并按次数从大到小排序 SELECT name, COUNT(*) AS count FROM your_table GROUP BY name ORDER BY count DESC;示例 select project_id, COUNT(*) AS count from app_ads_positions group by project_id order b…

(WRF/Chem)在大气环境领域实践技术应用

随着我国经济快速发展&#xff0c;我国面临着日益严重的大气污染问题。近年来&#xff0c;严重的大气污染问题已经明显影响国计民生&#xff0c;引起政府、学界和人们越来越多的关注。大气污染是工农业生产、生活、交通、城市化等方面人为活动的综合结果&#xff0c;同时气象因…

智能报修管理系统的作用和功能

智能报修管理系统针对不同的服务对象、不同的服务内容、不同的紧急情况&#xff0c;不同的区域&#xff0c;自定义设定响应指标&#xff0c;承诺客户在多长时间内响应或是解决问题&#xff0c;保障服务质量。随着报修、后勤、运维等规模日趋庞大&#xff0c;许多单位每日需处理…

echarts-根据数据大小实现折线渐变色

先看示例图&#xff1a; 这几年一直在做大数据可视化前端开发&#xff0c;接下来把近几年用到的比较经典案例给大家分享下&#xff0c;主要用到的可视化库为Echarts、Threejs、Element、D3、fabricjs等。 这个案例是Echarts&#xff0c;Echarts算是学习成本比较低的一个很好的…

Java下打印一个等腰三角型

想达到这个结果&#xff0c;通常的做法是通过拼结两个三角型达到&#xff0c;但是实际上还有最右边的第三个三角型没有处理&#xff0c;这个拼结的方法总让人看起来有一点不完美的感觉&#xff0c;于是我自创了一个思路&#xff0c;一气合成&#xff0c;代码如下&#xff08;本…

想要提高客户留资率?一个留资机器人就够了!

随着移动互联网进入“下半场”&#xff0c;用户在线参与率持续上升&#xff0c;导致企业的获客成本不断攀升。特别是近年来新型营销场景如直播销售、内容推广和短视频引流等的不断涌现&#xff0c;企业在多个渠道和平台上的广告支出激增&#xff0c;试图吸引更多潜在客户。然而…

提升开发效率的低代码思路

目录 一、低代码如何快速开发&#xff1f; 1.可视化开发 2.预构建的组件和模板 3.集成的开发和测试工具 4.跨平台兼容性 5.可伸缩性和可扩展性 二、前后端分离的开发框架 技术架构 部署方式 应用入口 三、小结 低代码开发工具正在日益变得强大&#xff0c;它正不断弥合着前后端…

咨询电商平台API的调用方法!

一、引言 随着电子商务的快速发展&#xff0c;电商平台间的竞争愈加激烈。为了提供更加优质的服务&#xff0c;很多电商平台会开放其商品API数据&#xff0c;允许第三方开发者利用这些数据创建各种应用。本文将对商品API数据的概念、获取方式以及在电商中的应用进行探讨&#…

laravel 阿里云短信发送

示例 一、安装 安装&#xff1a;composer require mrgoon/aliyun-sms dev-master 二、打开config/app.php&#xff0c;添加配置代码 1、‘providers’ 配置组下添加 Mrgoon\Aliyunsms\AliyunsmsServiceProvider::class, 2、‘aliases’ 配置组下添加 Aliyunsms>Mrgoon…

【计算机网络 - 自顶向下方法】计算机网络和因特网

目录 1. What is the Internet? 1.1 因特网的具体构成 1.2 因特网的功能 2. Network core 2.1 基本介绍 2.2 分组交换 2.2.1 序列化时延 2.2.2 排队延迟和丢包 2.2.3 分组交换的优缺点 2.3 电路交换 2.3.1 基本概念 2.3.2 电路交换网络中的复用 2.3.3 电路交换文件…

vue3 封装公共弹窗函数

前言&#xff1a; 博主封装了一个公共弹窗函数接收四个参数&#xff0c;&#xff08;title&#xff1a;弹窗标题, ContentComponent&#xff1a;弹窗中显示的组件内容, opt&#xff1a;接收弹窗本身的属性和props, beforeSure&#xff1a;点击确定做的操作&#xff08;请求后端…

《动手学深度学习 Pytorch版》 7.3 网络中的网络(NiN)

LeNet、AlexNet和VGG的设计模式都是先用卷积层与汇聚层提取特征&#xff0c;然后用全连接层对特征进行处理。 AlexNet和VGG对LeNet的改进主要在于扩大和加深这两个模块。网络中的网络&#xff08;NiN&#xff09;则是在每个像素的通道上分别使用多层感知机。 import torch fr…

JumpServer开源堡垒机与爱可生云树数据库完成兼容性认证

近日&#xff0c;中国领先的开源软件提供商FIT2CLOUD飞致云宣布&#xff0c;JumpServer开源堡垒机已经完成与爱可生云树数据库软件的兼容性认证。经过双方联合测试&#xff0c;云树数据库软件&#xff08;简称&#xff1a;ActionDB&#xff09;V1.0与杭州飞致云信息科技有限公司…

前端提高代码质量-提升代码的可维护性

代码质量是一个非常重要的概念&#xff0c;它决定了代码的可读性、可维护性、可扩展性和稳定性。在前端开发中&#xff0c;提升代码质量可以帮助我们减少错误、提高开发效率、降低维护成本&#xff0c;甚至可以提高用户体验。 在必要的地方加注释 良好的注释可以帮助开发人员理…

使用RKDevTool将update.img完整镜像进行解包,得到单独分区的镜像

(1)使用开发工具高级功能的解包 导入xx.img,然后点击解包(2)在Output/Android/Image得到想要的image