Echarts横向柱形图

项目原型图如下:

实际上就是设置两个y轴,第一个显示底色柱子,另一个只显示真实数据的柱子,在这里只显示y轴,x轴不显示..

this.middleLeftOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {}
        },
        legend: {
          data: ['回退次数'],
          y: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '2%',
          containLabel: true //可容纳
        },
        xAxis: {
          show: false   //设置不显示x轴
        },
        yAxis: [
          {
            type: 'category',
            data: ydata,   //我这里的数据是请求回来的一个数组  
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // 设置左边y轴上的文字颜色
            axisLabel: {
              color: 'black'
            }
          },
          {
            type: 'category',
            data: xdata,   //请求回来的数据
            inverse: true,  // 将数据显示方式倒转
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // 设置右边y轴上文字的颜色与字号
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: 'black'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            yAxisIndex: 1,
            data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20], //下面的柱子数据
            barWidth: 15, //柱子的宽度
            barCategoryGap: 50,
            // 设置柱子的位置,可以在柱子上显示的内容,我这里是不需要显示的
            //label:{
              // show:true,
               //position:"inside",
               // {c} 表示数值,{a}表示serie名,{b}表示系列名
              // formatter:"{c}%"
            },
            itemStyle: {
              // 设置第二个y轴柱子的颜色
              color: '#f2f2f2',
              // 设置第二个y轴柱子有无边框 可设置颜色
               border: 'none',
              // borderColor: '#00c1de',
              // 设置第二个y轴柱子边框为圆角
              barBorderRadius: 15
            }
          },
          {
            name: '回退次数',
            type: 'bar',
            color: '#facd91',
            data: xdata,
            barWidth: 15,   //竹子的宽度
            itemStyle: {
              // 设置第二个y轴柱子无颜色
              color: '#facd91',
              // 设置第二个y轴柱子无边框
              border: 'none',
              // 设置第二个y轴柱子边框为圆角
              barBorderRadius: 15
            }
          }
        ]
      }

 我的最终效果如下:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

你清楚微信加好友的规则吗?

微信加人的规则是: 1、通过附近人功能加人上限15人/天,频率3次/天,间隔时间1-2小时; 2、通过摇一摇功能加人上限15人/天,频率3次/天,间隔时间1-2小时; 3、通过通讯录搜索功能加人上限6人/单次…

【大模型】直接在VS Code(Visual Studio Code)上安装CodeGeeX插件的过程

文章目录 一、什么是CodeGeeX(一)我理解的CodeGeeX(二)优缺点 二、CodeGeex下载、安装、注册(一)安装VS Code(Visual Studio Code)(二)下载安装CodeGeeX(三)注…

泰迪智能科技携手华北电力大学理学院共建“校外实践基地”

3月15日,华北电力大学数理学院教学副主任史会峰、科研副主任王涛、概率教研室副主任解西阳莅临泰迪智能科技产教融合实训基地开展“华北电力大学校外实践教学基地”签约揭牌仪式。泰迪智能科技董事长张良均、支持中心负责人王宏刚、外联部吴桂锋进行接待。 活动伊始…

动手学深度学习9 多层感知机+代码实现

多层感知机代码实现 1. 感知机2. 多层感知机单隐藏层三个激活函数多隐藏层 3. 代码实现从零开始实现简洁实现注意 4. QA 1. 感知机 视频:https://www.bilibili.com/video/BV1hh411U7gn/?spm_id_fromautoNext&vd_sourceeb04c9a33e87ceba9c9a2e5f09752ef8 书&am…

如何修改Notes Domino中的默认通讯端口

大家好,才是真的好。 不知道有多少人知道,Notes客户机和Domino服务器之间默认的通讯协议叫做NRPC,很多人就直接称之为Notes协议,Notes和Domino服务器之间的数据通信,都是采用安全的NRPC协议,采用的端口默认…

EMQX 4.0和EMQX 5.0集群架构实现1亿MQTT连接哪些改进

EMQX 5.0水平扩展能力得到了指数级提升,能够更可靠地承载更大规模的物联网设备连接量。 在EMQX5.0正式发布前的性能测试中,我们通过一个23节点的EMQX集群,全球首个达成了1亿MQTT连接每秒100万消息吞吐,这也使得EMQX 5.0成为目前为…

echarts实践总结(常用一):柱状图(特点:渐变色、点击缩放、左右滑动、悬浮展示样式)

目录 第一章 echarts基本使用 第二章 echarts实践——柱状图 效果展示 第一章 echarts基本使用 Echarts常用配置项(详细入门)_echarts配置项手册-CSDN博客 第二章 echarts实践——柱状图 最近接到这么一个需求,需要画页面,然后有这么几个echarts的图需…

25双体系Java学习之StringBuffer和StringBuilder

StringBuffer和StringBuilder ★小贴士 String str new String("welcome to "); str "here"; 字符串的拼接过程实际上是通过建立一个StringBuffer,然后调用StringBuffer的append方法,最后再将StringBuffer转为字符串&#xff0c…

【网络安全】0xhacked CTF 大赛题解出炉啦!

此次 0xhacked CTF 比赛,ChainSecLabs 取得了第四名的成绩。让我们来看看比赛题目的题解吧。(题目代码仓库在文末哦~) BabyOtter 这是应该说是一个算法题,很明显需要溢出,因为精度问题,uint256(-1)/0x1…

代码随想录算法训练营第二十四天|● 理论基础 ● 77. 组合(JS写法)

回溯理论基础 回溯法解决的问题都可以抽象为树形结构,因为回溯法解决的都是在集合中递归查找子集,集合的大小就构成了树的宽度,递归的深度,都构成的树的深度。递归就要有终止条件,所以必然是一棵高度有限的树&#xff…

仰卧起坐计数,YOLOV8POSE

仰卧起坐计数,YOLOV8POSE 通过计算膝盖、腰部、肩部的夹角,计算仰卧起坐的次数

springboot278基于JavaWeb的鲜牛奶订购系统的设计与实现

鲜牛奶订购系统的设计与实现 摘 要 如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统鲜牛奶订购信息管理难度大&…

Python使用 k 均值对遥感图像进行语义分割

本篇文章介绍K-means语义分割来估计 2000 年至 2023 年咸海水面的变化 让我们先看一下本教程中将使用的数据。这是同一地区的两张 RGB 图像,间隔 23 年,但很明显地表特性和大气条件(云、气溶胶等)不同。这就是为什么我决定训练两个独立的 k-Means 模型,每个图像一个。 首…

水下蓝牙耳机哪个牌子好?推荐四款高人气力作游泳耳机

在这个充满活力的时代,人们对于生活的追求早已不仅仅局限于日常的琐碎,更多的是对健康、对自我挑战的向往。运动,成为了现代人生活中不可或缺的一部分。而游泳,作为一项既能锻炼全身,又能享受水中美妙的运动&#xff0…

广州地铁线路规划

使用python实现后端功能,由于地铁图需要进行展示,svg图需要花费比较多的时间,这里使用了 MetroFlow 库构建的地铁地图编辑器,可以在画布上构建矢量图,实现站点路线的创建。 用法: 打包好后完整目录&#x…

CornerStone之读取txt文件点数据

1. 页面标签 页面中目前只提供一个按钮来进行输入文件 <input click"importZeroOne" type"file" />2. 函数定义 在输入文件之后&#xff0c;执行importZeroOne函数&#xff0c;获得输入的文件&#xff0c;进行以下处理 const importZeroOne((eve…

windows 11访问Debian10上的共享目录

步骤 要在Windows 11上访问Debian 10.0.0的共享目录&#xff0c;可以通过以下步骤来实现&#xff1a; 1. 设置Samba服务&#xff1a;在Debian系统上&#xff0c;需要安装并配置Samba服务&#xff0c;以便能够实现文件夹共享。Samba是一个允许Linux/Unix服务器与Windows操作系…

【数据结构与算法】(15):归并排序的递归和非递归方式

&#x1f921;博客主页&#xff1a;Code_文晓 &#x1f970;本文专栏&#xff1a;数据结构与算法 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多数据结构与算法点击专栏链接查看&…

二、C#选择排序算法

简介 选择排序算法的基本思想是每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&#xff08;大&#xff09;元素&#xff0c;然后放到已排序序列…

【ArcGISProSDK】获取扩展模块许可到期时间

结果 以下是获取的3D分析模块的许可到期时间 代码 var licenseExpirationDate ArcGIS.Core.Licensing.LicenseInformation.GetExpirationDate(LicenseCodes.Analyst3D); 扩展模块 MemberDescriptionAnalyst3D3D AnalystAviationAirportsAviation and AirportsBusinessAnal…