当前位置: 首页 > news >正文

echarts柱状图实现左右横向对比

实现效果如上图

 其实是两组数据,其中一组数据改为负数,然后 在展示的时候,在将负数取反

第一处修改坐标轴

   xAxis: [{type: 'value',axisLabel: {formatter: function (value) {if (value < 0) {return -value;}else{return value;}}}}],

第二处修改数据,转负为正

 {name: '左',type: 'bar',color: '#21B8FF',stack: '总量',label: {show: true,position: 'left',formatter: function (value) {if (value.data < 0) {return -value.data;}},},emphasis: {focus: 'series'},data: [-12, -12, -10, -13, -19, -23, -21, -34, -22, -12]}

这里数据如果初始为正,先便利一遍加负号

我的全部代码

<template><div id="echarts11"></div>
</template><script setup>
import * as echarts from "echarts";
const emit = defineEmits();const props = defineProps({echartList: {default: [],},dolDate: {defalut: false}
});
const initChart = () => {let xdata = [];let ydata1 = [];let ydata2 = [];let xdataid = [];props.echartList.forEach((item) => {xdata.push(item.cityName);// xdataid.push(item.cityId);ydata1.push(item.parkArea);ydata2 = [-15, -25, -35, -45, -55]// ydata2.push(item.water);});const machart = echarts.init(document.getElementById("echarts11"));var option = {tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器,坐标轴触发有效type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'}},legend: {data: ['左', '右']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'value',axisLabel: {formatter: function (value) {if (value < 0) {return -value;}else{return value;}}}}],yAxis: [{type: 'category',axisTick: {show: false},data:xdata}],series: [{name: '右',type: 'bar',color: '#74D9A9',stack: '总量',label: {show: true,position: 'right'},emphasis: {focus: 'series'},data: [2, 3, 9, 7, 139, 66, 42, 16, 9, 10]},{name: '左',type: 'bar',color: '#21B8FF',stack: '总量',label: {show: true,position: 'left',formatter: function (value) {if (value.data < 0) {return -value.data;}},},emphasis: {focus: 'series'},data: [-12, -12, -10, -13, -19, -23, -21, -34, -22, -12]}]};machart.setOption(option);setTimeout(() => {window.addEventListener("resize", resizeFn);}, 100);const resizeFn = () => {return machart.resize();};machart.on("click", (params) => {if (params.componentType === "series") {const dataIndex = params.dataIndex;const yValue = xdata[dataIndex]; // 获取对应柱子的y值// const cidtyid = xdataid[dataIndex]; // 获取对应柱子的y值emit("changedi", yValue);// 在这里你可以对获取到的y值进行其他操作,比如弹窗显示等}});
};
setTimeout(() => {initChart();
}, 800);
defineExpose({initChart,
});
onBeforeUnmount(() => {// 离开页面必须进行移除,否则会造成内存泄漏,导致卡顿window.removeEventListener("resize", initChart);
});
watch(() => props.echartList,(newVal, oldVal) => {if (newVal !== oldVal) {initChart();}}
);
</script><style scoped>
#echarts11 {width: 100%;height: 90%;/* height:    calc(30vh- 10px); */
}
</style>

相关文章:

echarts柱状图实现左右横向对比

实现效果如上图 其实是两组数据&#xff0c;其中一组数据改为负数&#xff0c;然后 在展示的时候&#xff0c;在将负数取反 第一处修改坐标轴 xAxis: [{type: value,axisLabel: {formatter: function (value) {if (value < 0) {return -value;}else{return value;}}}}], 第…...

脸爱云一脸通智慧管理平台 SystemMng 管理用户信息泄露漏洞(XVE-2024-9382)

0x01 产品简介 脸爱云一脸通智慧管理平台是一套功能强大,运行稳定,操作简单方便,用户界面美观,轻松统计数据的一脸通系统。无需安装,只需在后台配置即可在浏览器登录。 功能包括:系统管理中心、人员信息管理中心、设备管理中心、消费管理子系统、订餐管理子系统、水控管…...

spring笔记2

一、基于xml的AOP实现 基于注解管理Bean&#xff0c;注解扫描 <context:component-scan base-package"com.zhou.spring.aop.xml"></context:component-scan><aop:config> <!-- 设置一个公共的切入点表达式--><aop:pointcut id&q…...

【挑战30天首通《谷粒商城》】-【第一天】02、简介-项目整体效果展示

文章目录 课程介绍 ( 本章了解即可&#xff0c;可以略过)一、 分布式基础 (全栈开发篇) (初中级)二、 分布式高级 (微服务架构篇) ( 高级)三、高可用集群 (架构师提升篇)( 架构 ) one more thing 课程介绍 ( 本章了解即可&#xff0c;可以略过) 1.分布式基础(全栈开发篇)2.分布…...

Kafka 生产者应用解析

目录 1、生产者消息发送流程 1.1、发送原理 2、异步发送 API 2.1、普通异步发送 2.2、带回调函数的异步发送 3、同步发送 API 4、生产者分区 4.1、分区的优势 4.2、生产者发送消息的分区策略 示例1&#xff1a;将数据发往指定 partition 示例2&#xff1a;有 key 的…...

GEE错误——image.reduceRegion is not a function

简介 image.reduceRegion is not a function 这里的主要问题是我们进行地统计分析的时候&#xff0c;我们的作用对象必须是单景影像&#xff0c;而不是影像集合 错误"image.reduceRegion is not a function" 表示你正在尝试使用reduceRegion()函数来处理图像数据&…...

rk356x 关于yocto编译linux及bitbake实用方法

Yocto 完整编译 source oe-init-build-envbitbake core-image-minimalYocto 查询包名 bitbake -s | grep XXX // 获取rockchip相关包 :~/rk3568/yocto$ bitbake -s | grep rockchip android-tools-conf-rockchip :1.0-r0 gstreamer1.0-rockchip …...

Chrome您的连接不是私密连接 |输入“thisisunsafe”命令绕过警告or添加启动参数

一、输入 thisisunsafe 在当前页面用键盘输入 thisisunsafe &#xff0c;不是在地址栏输入(切记)&#xff0c;就直接敲键盘就行了 因为Chrome不信任这些自签名ssl证书&#xff0c;为了安全起见&#xff0c;直接禁止访问了&#xff0c;thisisunsafe 这个命令&#xff0c;说明你…...

牛客面试前端1

HTML语义化 是什么 前端语义化是指在构建网页时多使用html语义化标签布局&#xff0c;多使用带有语义的标签如header&#xff0c;aside&#xff0c;footer等标签为什么 结构清晰利于开发者开发与维护 有利于seo搜索引擎优化 有利于在网络卡顿时&#xff0c;正常显示页面结构&a…...

Linux的软件包管理器-yum

文章目录 软件包的概念yum源的配置的原因yum的使用查看软件包安装软件卸载软件 软件包的概念 软件包(SoftWare Package)是指具有特定的功能&#xff0c;用来完成特定任务的一个程序或一组程序。可分为应用软件包和系统软件包两大类 在Linux系统中&#xff0c;下载安装软件的方式…...

选择排序(Selection Sort)

选择排序(Selection Sort)是一种简单直观的排序算法。它的工作原理如下: 遍历数组:从待排序的数列中,找到当前未排序部分(即整个数组或已排序部分之后的部分)中的最小(或最大,取决于排序方式)元素。 交换位置:将找到的最小元素与未排序部分的第一个元素交换位置,这…...

网络面试题目

1、BGP报文有哪些? 有5种报文,Open、 Update、 Notification、 Keepalive和 Route-refresh等5种报文类型。 2、Vxlan了解多少? VLAN作为传统的网络隔离技术,VXLAN完美地弥补了VLAN的上述不足。 VXLAN(Virtual eXtensible Local Area Network,虚拟扩展局域网),(VXL…...

Web,Sip,Rtsp,Rtmp,WebRtc,专业MCU融屏视频混流会议直播方案分析

随着万物互联&#xff0c;视频会议直播互动深入业务各方面&#xff0c;主流SFU并不适合管理&#xff0c;很多业务需要各种监控终端&#xff0c;互动SIP硬件设备&#xff0c;Web在线业务平台能相互融合&#xff0c;互联互通&#xff0c; 视频混流直播&#xff0c;录存直播推广&a…...

Unreal 编辑器工具 批量重命名资源

右键 - Editor Utilities - Editor Utility Blueprint&#xff0c;基类选择 Asset Action Utility 在类默认值内&#xff0c;可以添加筛选器&#xff0c;筛选指定的类型 然后新建一个函数&#xff0c;加上4个输入&#xff1a;ReplaceFrom&#xff0c;ReplaceTo&#xff0c;Add…...

Voice Conversion、DreamScene、X-SLAM、Panoptic-SLAM、DiffMap、TinySeg

本文首发于公众号&#xff1a;机器感知 Voice Conversion、DreamScene、X-SLAM、Panoptic-SLAM、DiffMap、TinySeg Converting Anyones Voice: End-to-End Expressive Voice Conversion with a Conditional Diffusion Model Expressive voice conversion (VC) conducts speak…...

短信群发平台分析短信群发的未来发展趋势

短信群发平台在当前的移动互联网时代已经展现出了其独特的价值和广泛的应用场景。随着技术的不断进步和市场的不断变化&#xff0c;短信群发的未来发展趋势也将呈现出一些新的特点。 首先&#xff0c;随着5G网络的推广和普及&#xff0c;短信群发的速度和稳定性将得到进一步提…...

supervisord 使用指南

supervisord 使用指南 supervisord的安装 supervisor是一系列python脚本文件&#xff0c;以python package的形式管理&#xff0c;可以用于UNIX类系统的进程管理。 安装supervisor也相当简单&#xff0c;只需要用pip安装即可。 sudo pip install supervisor但是有可能将其安…...

AngularJS 的生命周期和基础语法

AngularJS 的生命周期和基础语法 文章目录 AngularJS 的生命周期和基础语法1. 使用步骤2. 生命周期钩子函数3. 点击事件4. if 语句1. if 形式2. if else 形式 5. for 语句6. switch 语句7. 双向数据绑定 1. 使用步骤 // 1. 要使用哪个钩子函数&#xff0c;就先引入 import { O…...

docker-compose 网络

自定义网络 - HOST 与宿主机共享网络 version: "3" services:web:image: nginx:1.21.6restart: alwaysports:- 80:80network_mode: host自定义网络 - 固定ip version: "3" services:web:image: nginx:1.21.6restart: alwaysports:- 80:80networks:app&am…...

农药生产厂污废水如何处理达标

农药生产厂的污废水处理是确保该行业对环境的负面影响最小化的重要环节。下面是一些常见的处理方法和步骤&#xff0c;可以帮助农药生产厂的污废水达到排放标准&#xff1a; 预处理&#xff1a;将废水进行初步处理&#xff0c;去除大颗粒悬浮物和固体残渣。这可以通过筛网、沉淀…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...