Echarts正负条形图将x轴都设置成正数

news2024/11/18 21:27:32

1、先修改x轴上面显示为负数的刻度标签,找到xAxis[i].axisLabel,重写他的formatter

xAxis: [
  {
	type: 'value',
    axisLabel: {
   	  formatter: (value) => {
	    // 负数取反 显示的就是正数了
   	    if (value < 0) return -value
        else return value
   	  }
    }
  }
]

2、在修改柱状图上面显示为负数的文本标签,找到series[i].label,重写他的formatter

series: [
    {
      name: 'Profit',
      type: 'bar',
      stack: 'Total',
      itemStyle:{
        color:"#DD7921", // 设置柱条颜色
      },
      label: {
        show: true,
        textStyle: {
          color: '#fff', // 设置柱条文字颜色
        },
        // formatter 的另一种简便写法
        formatter: '{c} 个'
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 341, 374, 390, 450, 420]
    },
    {
      name: 'Expenses',
      type: 'bar',
      stack: 'Total',
      itemStyle:{
        color:"#398ED3", // 设置柱条颜色
      },
      label: {
        show: true,
        textStyle: {
          color: '#fff', // 设置文字颜色
        },
        formatter: (value) => {
          // 值都是负数的 所以需要取反一下
          return -value.data + "个"
     	  }
      },
      emphasis: {
        focus: 'series'
      },
      data: [-120, -132, -101, -134, -190, -230, -210]
    }
]

3、如果有提示框的话,提示框中为负数的数据也要坐相应的修改

tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow', // 坐标指示器类型
    },
    formatter: (params) => {
      if (!params.length) return ''
      let s = params[0].axisValueLabel + '<br/>'
      for (const item of params) {
   	    // 如果是负数则反转
        let d = item.data < 0 ? -item.data : item.data
        s += item.marker + item.seriesName + ':' + d + '个' + '<br/>'
      }
      return s
    }
},

最后附上option全部代码:

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow', // 坐标指示器类型
    },
    formatter: (params) => {
      if (!params.length) return ''
      let s = params[0].axisValueLabel + '<br/>'
      for (const item of params) {
   	    // 如果是负数则反转
        let d = item.data < 0 ? -item.data : item.data
        s += item.marker + item.seriesName + ':' + d + '个' + '<br/>'
      }
      return s
    }
  },
  legend: {
    data: ['Profit', 'Expenses'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'value',
      axisLabel: {
   	    formatter: (value) => {
  	      // 负数取反 显示的就是正数了
     	  if (value < 0) return -value
          else return value
     	}
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisTick: {
        show: false,
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  series: [
    {
      name: 'Profit',
      type: 'bar',
      stack: 'Total',
      itemStyle:{
        color:"#DD7921", // 设置柱条颜色
      },
      label: {
        show: true,
        textStyle: {
          color: '#fff', // 设置柱条文字颜色
        },
        // formatter 的另一种简便写法
        formatter: '{c} 个'
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 341, 374, 390, 450, 420]
    },
    {
      name: 'Expenses',
      type: 'bar',
      stack: 'Total',
      itemStyle:{
        color:"#398ED3", // 设置柱条颜色
      },
      label: {
        show: true,
        textStyle: {
          color: '#fff', // 设置文字颜色
        },
        formatter: (value) => {
          // 值都是负数的 所以需要取反一下
          return -value.data + "个"
     	}
      },
      emphasis: {
        focus: 'series'
      },
      data: [-120, -132, -101, -134, -190, -230, -210]
    }
  ]
};

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

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

相关文章

vue中计算属性computed和watch的区别是什么?

watch : 监测的是属性值&#xff0c;只要属性值发生变化&#xff0c;其都会触发执行回调函数来执行一系列操作&#xff1b; computed : 监测的是依赖值&#xff0c;依赖值不变的情况下其会直接读取缓存进行复用&#xff0c;变化的情况下才会重新计算&#xff1b; 它们之间最…

zynq/zynqMP启动模式总结:FLASH+emmc启动/petalinux烧写速度最快的启动方式

因客户要求zynq开发板只有FLASH和emmc&#xff0c;然而还得在petalinux进行开发系统&#xff0c;因FLASH大小有限&#xff0c;所以没办法把内核和根文件地址全部存储到FLASH中&#xff0c;于是想配合emmc进行启动&#xff0c;但是在网上搜索的大多都是只把根文件系统放到了emmc…

制造企业如何通过PLM系统实现BOM管理的飞跃

摘要 在当今快速变化的制造行业中&#xff0c;产品生命周期管理&#xff08;PLM&#xff09;系统的应用已成为企业提升效率、降低成本和增强竞争力的关键。本文将探讨PLM系统如何通过其先进的BOM&#xff08;物料清单&#xff09;管理功能&#xff0c;帮助制造企业在整个产品生…

100T微机控制电液伺服卧式拉力试验机

一、产品概述 微机控制卧式拉力试验机适用于额定试验力下的拉伸试验及恒负荷拉伸&#xff0c;可用于钢丝绳、锚链、钩环、电瓷瓶、电缆、光缆、钢铰线、棒材、绳类等制品或材料的拉伸强度测试。 二、性能特点 本机采用计算机控制&#xff0c;具有力、位移自动跟踪测量加荷速…

视频监控业务平台LntonCVS国标GB28181视频平台智慧城市应用方案

随着科技的不断进步&#xff0c;尤其是人工智能技术的飞速发展&#xff0c;视频应用已经超越了传统的视频监控、视频会议、视频通话和视频指挥调度等基本功能。它们正在向更加多元化、灵活化、融合化和智能化的方向发展。因此&#xff0c;建立一个视频AI中台变得至关重要。 通过…

RTPS协议之Messages Module

目录 Messages ModuleType定义RTPS消息结构RTPS消息头子消息结构 RTPS消息接收者SubmessageElementsRTPS HeaderRTPS Submessages Messages Module RTPS Writer和RTPS Reader之间的交换数据的消息。 Type定义 TypePurposeProtocolId_tSubmessageFlagsub msg flagSubmessageK…

【YashanDB知识库】OCI驱动类问题定位方法

【标题】OCI驱动类问题定位方法 【需求分类】故障分析 【关键字】OCI 【需求描述】由于我们的OCI接口目前尚不完善&#xff0c;经常会遇见OCI接口能力不足导致应用功能无法运行的问题&#xff0c;需要定位手段确定底层是哪个接口报错 【需求原因分析】方便一线数据库管理员…

揭秘智慧校园:可视化技术引领教育新篇章

随着科技的飞速发展&#xff0c;我们的生活方式正在经历一场前所未有的变革。而在这场变革中&#xff0c;学校作为培养未来人才的重要基地&#xff0c;也在不断地探索与创新。 一、什么是校园可视化&#xff1f; 校园可视化&#xff0c;就是通过先进的信息技术&#xff0c;将学…

Nocobase快速上手 - 常见block的使用

在上一篇文章 Nocobase快速上手 -第一个collection 中&#xff0c;我们新建了一个collection ,并且通过在页面中配置block实现了数据的展示&#xff0c;本文继续探索block的使用。 Block类型 Block(区块)的整体架构如下图: 我们可以看到&#xff0c;block分为三个大类&#…

【C++】二维前缀和

1.题目 2.算法思路 和一维前缀和的方法类似&#xff0c;我们需要预处理一个求和矩阵&#xff0c;然后再求和。 下面是模板&#xff1a; 上面两张图片总结出来了两个公式&#xff0c;这是解决此类问题的关键。 3.代码 #include <iostream> using namespace std; #incl…

Java Apache Jexl规则引擎初体验

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、模板引擎的选择&#xff1f;二、什么是JEXL规则引擎&#xff1f;优点缺点 三、其他规则引擎四、示例1.引入依赖2.方法示例3、代码解释4、效果![import java…

ssm校园疫情防控管理系统-计算机毕业设计源码30796

目 录 摘要 1 绪论 1.1目的及意义 1.2开发现状 1.3ssm框架介绍 1.3论文结构与章节安排 2 校园疫情防控管理系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分…

Linux终端连接工具

终端连接工具有很多中&#xff0c;这里我只收集了一些常用的或免费的工具 我一般会配套使用&#xff1a; FinalShell -->命令行工具&#xff08;Mac和win&#xff09; WinSCP -->文件上传工具&#xff08;win&#xff09; filezilla -->文件上传工具&#xff08;Mac …

【408真题】2009-25

“接”是针对题目进行必要的分析&#xff0c;比较简略&#xff1b; “化”是对题目中所涉及到的知识点进行详细解释&#xff1b; “发”是对此题型的解题套路总结&#xff0c;并结合历年真题或者典型例题进行运用。 涉及到的知识全部来源于王道各科教材&#xff08;2025版&…

Jetpack架构组件_5.BindingAdapter

1.BindingAdapter介绍 Binding adapters 可以作为一个设置某个值的框架来使用&#xff0c;databinding 库可以允许指定具体的方法来进行相关值的设置&#xff0c;在该方法中可以做一些处理逻辑&#xff0c;Binding adapters 会最终给你想要的结果。Android Databinding框架中已…

企业如何打造通证经济生态闭环详解(下)

一、原始账户&#xff1a;用户注册即生成【原始账户】【托管账户】。 原始账户用于存储用户所获取的通证积分&#xff0c;原始账户的公钥与私钥由用户所有&#xff0c;安全、私密、去中心化。 通过原始账户&#xff0c;用户可进行转账、收款的点对点传输&#xff0c;并可查看…

Activity详解,用最通俗的语言告诉你什么是Activity(一)

大家好&#xff0c;我是小布丁。 今天还是分享Android基础知识&#xff0c;有Android基础的朋友都知道&#xff0c;Activity作为Android四大组件之一&#xff0c;掌管可视化界面。也是大多数人刚接触Android学的第一课。下面我来带大家学习/复习这部分知识&#xff0c;请大家不…

Docker教程——Docker安装

安装 在安装Docker之前&#xff0c;我们需要执行如下代码安装Docker的一些依赖包&#xff0c; sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo依赖包安装好后&#xff0c;执行如下代码安装Dock…

Three.js是基于原生WebGL封装的三维引擎

Three.js: 基于原生WebGL封装的三维引擎 引言 随着互联网技术的发展&#xff0c;Web前端技术不断进步&#xff0c;用户对于网页交互体验的要求也越来越高。艾斯视觉前端开发&#xff1a;三维技术作为提升用户体验的重要手段之一&#xff0c;正在逐渐成为前端开发中的热门技术…

aws 在ecs外部实例上运行gpu负载

参考资料 https://docs.amazonaws.cn/zh_cn/AmazonECS/latest/developerguide/ecs-gpu.htmlhttps://docs.amazonaws.cn/AWSEC2/latest/UserGuide/accelerated-computing-instances.html#gpu-instanceshttps://docs.amazonaws.cn/AWSEC2/latest/UserGuide/install-nvidia-drive…