echarts横向柱状图让Y轴的名字和数量在柱状图上方展示

news2024/9/26 14:54:16

效果图

 

let vm = this
      vm.chart2 = echarts.init(this.$refs.chart2)
      let xDatas = this.registerProjectType.map((item) => {
        let found = data.find((countItem) => countItem.projectType === item.label)
        return found ? found.count : 0
      })
      // 翻转数据让其他项目在最下面
      let xData = xDatas.reverse()
      let yDatas = this.registerProjectType.map((item) => item.label)
      let yData = yDatas.reverse()
      let option = {
        color: ['#28d2d0', '#0090ff'],
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true // 确保标签不会溢出容器
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: [
          {
            type: 'category',
            data: yData,
            axisLine: { // 控制坐标轴线
              show: false // 隐藏轴线
            },
            axisTick: { // 控制刻度线
              show: false // 隐藏刻度线
            },
            splitLine: { // 控制网格线
              show: false // 隐藏网格线
            },
            axisLabel: { // 控制坐标轴标签
              show: true,
              inside: true,
              interval: 0, //横轴信息全部显
              splitNumber: 50,
              textStyle: {
                color: '#585858',
                verticalAlign: 'bottom',
                fontSize: 12,
                align: 'left',
                padding: [0, 0, 15, -5]
              }
            }
          },
          {
            inverse: false,
            data: xData,
            axisLabel: {
              inside: true,
              textStyle: {
                // color: '#8db0ff',
                fontSize: 12,
                align: 'right',
              },
              formatter: '{value}\n{a|占位}\n{a|占位}',
              rich: {
                a: {
                  color: 'transparent',
                  lineHeight: 20,
                  fontFamily: 'digital'
                }
              }
            },
            offset: 0,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          }
        ],
        xAxis: {
          type: 'value',
          // boundaryGap: [0, 0.01] ,
          axisLine: { // 控制坐标轴线
            show: false // 隐藏轴线
          },
          axisTick: { // 控制刻度线
            show: false // 隐藏刻度线
          },
          splitLine: { // 控制网格线
            show: false // 隐藏网格线
          },
          axisLabel: { // 控制坐标轴标签
            show: false
          }
        },
        series: [
          {
            barWidth: 15, // 条形的宽度
            // label: {
            //   show: true,
            //   position: 'right'
            // },
            data: xData,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          },
          // {
          //   type: 'bar',
          //   data: [120, 100, 90, 60, 30],
          //   barWidth: 15,
          //   label: {
          //     position: [10, 10],
          //     normal: {
          //       position: [800, -24],
          //       show: true,
          //       textStyle: {
          //         color: '#8db0ff',
          //         fontSize: 16,
          //       },
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          //         '#007AFF', '#00FFFF'
          //       ].map((color, offset) => ({
          //         color,
          //         offset
          //       })))
          //     }
          //   }
          // }
        ]

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

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

相关文章

现场扫码实时投票打分显示最新现场大屏微信现场投票实时显示

现场投票“神器”超级好玩儿||现场参与者通过手机扫码进入投票系统,大屏幕实时显示投票排名,增加紧张和刺激感。可以随时截止投票,方便便捷,可设置 单票,多票,自由票,结合现场互动,增…

SEO全自动发布外链工具增加权重的网站工具源码系统 带源代码包以及搭建部署教程

系统概述 传统的手动发布外链方式不仅费时费力,而且效率低下。因此,开发一款能够全自动发布外链的工具成为了迫切的需求。SEO 全自动发布外链工具增加权重的网站工具源码系统正是在这样的背景下诞生的。它旨在为网站管理员提供一种便捷、高效的方式来增…

图论系列(dfs)9.25

一、主题空间 场地由若干主题空间与走廊组成,场地的地图记作由一维字符串型数组 grid,字符串中仅包含 "0"~"5" 这 6 个字符。地图上每一个字符代表面积为 1 的区域,其中 "0" 表示走廊&#xff0…

B站批量删除动态—Python

B站协议批量删除动态实现 b站登录协议请看点方蓝色字体 b站扫码登录协议 文章结尾附Python代码 一、抓包 1.1删除动态包 POST请求 https://api.bilibili.com/x/dynamic/feed/operate/remove?platformweb&csrf3bdb2bda73e3d6f75ea991167fb39389 请求表单数据{&quo…

基于python+django+vue的电影数据分析及可视化系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏:Java精选实战项目…

exebios提取工具通用exebios分离工具exe转编程器bios文件软件bios文件解密提取工具exe原厂bios提取烧录器bios芯片文件工具

好多电脑官网下载的BIOS文件是exe格式的特别是笔记本电脑,自己把电脑bios刷坏了黑屏不开机,需要用编程器刷BIOS,自然需要编程器版本的BIOS文件 需要把exe格式的BIOS文件转换成bin格式的编程器版本BIOS文件,转换需要用到一个小工具…

RAG技术全面解析:Langchain4j如何实现智能问答的跨越式进化?

LLM 的知识仅限于其训练数据。如希望使 LLM 了解特定领域的知识或专有数据,可: 使用本节介绍的 RAG 使用你的数据对 LLM 进行微调 结合使用 RAG 和微调 1 啥是 RAG? RAG 是一种在将提示词发送给 LLM 之前,从你的数据中找到并…

企业图纸文档管理系统推荐 三大企业图纸文档管理软件详细介绍

在现代企业的设计和生产过程中,图纸文档的管理是至关重要的一环。 无论是建筑、制造业,还是技术研发领域,图纸文档的正确存储、分享与管理能够极大提升工作效率,避免误操作或信息丢失。 接下来,小编将为大家推荐三款优…

8606 二叉树的构建及遍历操作

### 伪代码 1. **CreateBiTree**: - 读取一个字符 ch。 - 如果 ch 是 #,则当前节点为空。 - 否则,创建一个新节点 T,将 ch 赋值给 T 的数据域。 - 递归创建 T 的左子树。 - 递归创建 T 的右子树。 2. **PreOrderTraverse**: …

15 Midjourney从零到商用·实战篇:建筑设计与室内设计

以前设计师生成一张效果图需要先画草稿,导入三维软件搭建场景后,再用渲染器渲染,而现在只需要有客户的意向图或者自己想法,在MidJourney中就能一键生成惊艳的效果图。 “给我一个prompt我能撬动整个设计界”。设计师在AI绘画面前似…

安卓系统常见问题如native crash,卡顿卡死定位工具命令技巧-android framework实战开发

背景: 有学员朋友近来有问到一些安卓系统开发过程中的一些核心小技能小技巧等,比如native crash在企业里面该如何准确定位具体代码函数,程序卡住,或者长时间没反应,想要看看卡在代码的哪里。针对以上的一些问题&#…

中电金信:源启智能视觉分析系统~助力各行业破局升级,释放新质生产力

作为人工智能与计算机视觉的交叉范畴,智能视觉模仿人类视觉机能,来对各种形式的视觉输入予以处理、理解以及决策。当下,智能视觉已然发展为应用广泛、市场覆盖面大且形式多元的产业方向,获得了国家政策的强力支持。数字化时代搭台…

开源模型应用落地-qwen2.5-7b-instruct-LoRA微调-LLaMA-Factory-单机单卡-V100(十八)

一、前言 本篇文章将使用LLaMA-Factory去高效微调(命令和界面方式)QWen2.5系列模型,通过阅读本文,您将能够更好地掌握这些关键技术,理解其中的关键技术要点,并应用于自己的项目中。 QWen2系列模型微调: 开源模型应用落地-qwen2-7b-instruct-LoRA微调-LLaMA-Factory-单机单…

MySQL Mail服务器集成:如何配置发送邮件?

MySQL Mail插件使用指南?怎么优化 MySQL发邮件性能? MySQL Mail服务器的集成,使得数据库可以直接触发邮件发送,极大地简化了应用架构。AokSend将详细介绍如何配置MySQL Mail服务器,以实现邮件发送功能。 MySQL Mail&…

IDEA相关设置总结

目录 1.设置JDK 2.设置忽略大小写检查 3.设置字体大小 4.设置类的信息 5.包名分级 1.设置JDK 2.设置忽略大小写检查 3.设置字体大小 4.设置类的信息 5.包名分级 取消勾选

利用低代码快速搭建电商小程序之商品列表页

目标: 搭建商城的一个商品列表页面(先做静态页) 开发环境: 访问白码低代码平台:https://www.bnocode.com/ 白码的新自定义页功能(使用vue框架) 前期准备: 需要先准备商品数据表…

数据结构:Heap堆应用(堆排序,TOP-K问题)手把手带你入门数据结构~

文章目录 前言一、堆排序1. 数据入堆2. 堆排序3. 时间复杂度(1)冒泡排序时间复杂度(2)向上调整建堆的时间复杂度(3)向下调整建堆的时间复杂度 4. 堆排序总结 二、TOP-K问题1. TOP-K问题背景2. TOP-K问题解决…

【日记】感觉自己已经魔怔了(817 字)

正文 下午装档案的时候,无意间朝外看了一眼,发现自己视力衰退了好多。感觉两只眼睛都有散光了,看东西有重影。有些担心。 兄长血检报告出来了,血红蛋白高,肌酐低。尿酸倒是正常了,但总体还是偏高。我觉得好…

408解题小助手—文心智能体

体验链接:408解题小助手 问题: 个字符有如下 种编码方案,不是前缀编码的是 A. 01 0000 0001 001 1 B. 011, 000, 001, 010, 1 C. 000, 001, 010, 011, 100 D. 0, 100, 110, 1110, 1100 回答: 不是前缀编码的是选项 D:0…

Java项目: 基于SpringBoot+mybatis+maven实现的智能推荐卫生健康系统分前后台(含源码+数据库+开题报告+任务书+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven实现的智能推荐卫生健康系统 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功能完善、界面美…