Echarts自定义柱状图
目录
效果图
echarts官网找相似图
将柱状图引入html页面中
自定义柱状图
将不需要的属性删除
编辑
修改图形大小 grid
不显示x轴
编辑
不显示y轴线和相关刻度
编辑
y轴文字的颜色设置为自己想要的颜色
修改第一组柱子相关样式(条状)
设置第一组柱子内百分比显示数据
设置第一组柱子不同颜色
修改第二组柱子的相关配置(框状)
给y轴添加第二组数据
设置两组柱子层叠以及更换数据
效果图

echarts官网找相似图
我们从echarts官网找到相似图形

将柱状图引入html页面中
下载echarts
准备容器
<div id="main" style="width: 600px;height: 400px;"></div>
初始化echarts实例对象
const myChart = echarts.init(document.querySelector('#main'))
指定配置项和数据(官网给的option)
option = {title: {text: 'World Population'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']},series: [{name: '2011',type: 'bar',data: [18203, 23489, 29034, 104970, 131744, 630230]},{name: '2012',type: 'bar',data: [19325, 23438, 31000, 121594, 134141, 681807]}]
};
将配置项给echarts
myChart.setOption(option)
成功引入

自定义柱状图
将不需要的属性删除
title: {text: 'World Population'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {},
修改图形大小 grid
// 图标位置grid: {top: "10%",left: "22%",bottom: "10%"},
不显示x轴
xAxis: {show: false},
不显示y轴线和相关刻度
//不显示y轴线条
axisLine: {show: false},
// 不显示刻度
axisTick: {show: false
},
y轴文字的颜色设置为自己想要的颜色
axisLabel: {color: "#fff"},
修改第一组柱子相关样式(条状)
name: "条",
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 柱子设为圆角
itemStyle: {normal: {barBorderRadius: 20, }
},

设置第一组柱子内百分比显示数据
// 图形上的文本标签
label: {normal: {show: true,// 图形内显示position: "inside",// 文字的显示格式formatter: "{c}%"}
},

设置第一组柱子不同颜色
// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 给 itemStyle 里面的color 属性设置一个 返回值函数itemStyle: {normal: {barBorderRadius: 20, color:function(params){const num = myColor.length;return myColor[params.dataIndex % num];}}},

修改第二组柱子的相关配置(框状)
name: "框",type: "bar",barCategoryGap: 50,barWidth: 15,itemStyle: {color: "none",borderColor: "#00c1de",borderWidth: 3,barBorderRadius: 15},data: [19325, 23438, 31000, 121594, 134141, 681807]

给y轴添加第二组数据
完整的y轴代码
yAxis: [{type: "category",data: ["印尼", "美国", "印度", "中国", "世界人口(万)"],// 不显示y轴的线axisLine: {show: false},// 不显示刻度axisTick: {show: false},},{show: true,data: [702, 350, 610, 793, 664],// 不显示y轴的线axisLine: {show: false},// 不显示刻度axisTick: {show: false},axisLabel: {textStyle: {fontSize: 12,}}}],

设置两组柱子层叠以及更换数据
给series 第一个对象里面添加
yAxisIndex: 0,
给series 第二个对象里面添加
yAxisIndex: 1,
把data中的数据更换成自己想要的数据即可

相关文章:
Echarts自定义柱状图
目录 效果图 echarts官网找相似图 将柱状图引入html页面中 自定义柱状图 将不需要的属性删除 编辑 修改图形大小 grid 不显示x轴 编辑 不显示y轴线和相关刻度 编辑 y轴文字的颜色设置为自己想要的颜色 修改第一组柱子相关样式(条状) …...
LuatOS-SOC接口文档(air780E)-- ioqueue - io序列操作
ioqueue.init(hwtimer_id,cmd_cnt,repeat_cnt) 初始化一个io操作队列 参数 传入值类型 解释 int 硬件定时器id,默认用0,根据实际MCU确定,air105为0~5,与pwm共用,同一个通道号不能同时为pwm和ioqueue int 一个完…...
探讨Socks5代理技术的原理及其在不同领域的应用
Socks5代理:实现网络连接的智能之选 作为一种网络代理协议,Socks5代理技术通过转发网络数据包,实现了客户端和服务器之间的代理传输。其独特的特性在跨界电商、爬虫数据分析、企业出海和游戏体验等领域发挥着关键作用,为用户提供…...
sql注入的基本手法
目的 通过sqk注入获取数据内容 掌握sql注入基本手法 我们这里使用 1.联合注入 就是利用union select 语句 两条语句 同时执行 实现跨库跨表查询 条件 两条select语句查询结果具有相同列数 对应列数数据类型相同 简单的步骤 1.目标分析 ?id…...
8.1 C++ 标准输入输出流
C/C语言是一种通用的编程语言,具有高效、灵活和可移植等特点。C语言主要用于系统编程,如操作系统、编译器、数据库等;C语言是C语言的扩展,增加了面向对象编程的特性,适用于大型软件系统、图形用户界面、嵌入式系统等。…...
hive往es映射表写数据报错
hive是基于Hadoop的一个数据仓库工具,用来进行数据提取、转化、加载,这是一种可以存储、查询和分析存储在Hadoop中的大规模数据的机制。hive数据仓库工具能将结构化的数据文件映射为一张数据库表,并提供SQL查询功能,能将SQL语句转…...
2023年【广东省安全员A证第四批(主要负责人)】考试试卷及广东省安全员A证第四批(主要负责人)模拟考试
题库来源:安全生产模拟考试一点通公众号小程序 广东省安全员A证第四批(主要负责人)考试试卷根据新广东省安全员A证第四批(主要负责人)考试大纲要求,安全生产模拟考试一点通将广东省安全员A证第四批&#x…...
YOLOv5算法改进(15)— 如何去更换Neck网络(包括代码+添加步骤+网络结构图)
前言:Hello大家好,我是小哥谈。在学习完了如何去更换主干网络之后,接着就让我们通过案例的方式去学习下如何去更换Neck网络。本篇文章的特色就是比较浅显易懂,附加了很多的网络结构图,通过结构图的形式向大家娓娓道来,希望大家学习之后能够有所收获!🌈 前期回顾: YO…...
用Nginx搭建一个具备缓存功能的反向代理服务
在同一台服务器上,使用nginx提供服务,然后使用openresty提供反向代理服务。 参考《Ubuntu 20.04使用源码安装nginx 1.14.0》安装nginx。 参考《用Nginx搭建一个可用的静态资源Web服务器》搭建静态资源Web服务器,但是/nginx/conf/nginx.conf里…...
YOLOv5改进实战 | 更换主干网络Backbone(三)之轻量化模型Shufflenetv2
前言 轻量化网络设计是一种针对移动设备等资源受限环境的深度学习模型设计方法。下面是一些常见的轻量化网络设计方法: 网络剪枝:移除神经网络中冗余的连接和参数,以达到模型压缩和加速的目的。分组卷积:将卷积操作分解为若干个较小的卷积操作,并将它们分别作用于输入的不…...
【Markdown】 Markdown 操作备忘录
To Do List 显示目前todo list 的状态 getLogger() 单例类, 通过引入模块,获取单例日志对象 结果可视化调研 模型结果保存及测试 - [ ] getLogger() 单例类, 通过引入模块,获取单例日志对象 - [ ] 结果可视化调研 - [x] 模型结果…...
【自动化测试】基于Selenium + Python的web自动化框架
一、什么是Selenium? Selenium是一个基于浏览器的自动化工具,她提供了一种跨平台、跨浏览器的端到端的web自动化解决方案。Selenium主要包括三部分:Selenium IDE、Selenium WebDriver 和Selenium Grid: 1、Selenium IDE&…...
zookeeper连接客户端操作数据时报错Socket is not connected
文章目录 一、报错信息二、问题描述三、原因分析:四、解决方案: 一、报错信息 DEBUG org.apache.zookeeper.ClientCnxnSocketNIO - Ignoring exception during shutdown input java.net.SocketException: Socket is not connectedat sun.nio.ch.Net.tra…...
mysql select语句中from 之后跟查询语句
概念:将from后面的查询语句放在FROM的后面,则查询到的结果,就会被当成一个“表”; 这里有一个特别要注意的地方,放在FROM后面的子查询,必须要加别名。 select dui.id,dui.party_service_id mes_id, dui.party_id,dui.…...
Yolov8小目标检测(26):多尺度空洞注意力(MSDA) | 中科院一区顶刊 DilateFormer 2023.9
💡💡💡本文独家改进:多尺度空洞注意力(MSDA)采用多头的设计,在不同的头部使用不同的空洞率执行滑动窗口膨胀注意力(SWDA),全网独家首发,创新力度十足,适合科研 多尺度空洞注意力(MSDA) | 亲测在红外弱小目标检测涨点,map@0.5 从0.755提升至0.784 💡�…...
NLP:从头开始的文本矢量化方法
一、说明 NLP 项目使用文本,但机器学习算法不能使用文本,除非将其转换为数字表示。这种表示通常称为向量,它可以应用于文本的任何合理单位:单个标记、n-gram、句子、段落,甚至整个文档。 在整个语料库的统计 NLP 中&am…...
Kotlin 中 apply、let、also、run的区别
apply apply 函数接收一个目标并回来该目标自身。它答应您在目标上履行一些操作,同时仍然回来原始目标。 fun <T> T.apply(block: T.() -> Unit): TT 是目标的类型,block 是一个 lambda 表达式,能够在该目标上履行一些操作。在这个…...
Android JKS MD5 SHA1 公钥生成 私钥生成 APP备案 内容获取
1 查看 jks keytool -list -v -keystore /Users/lipengfei/Desktop/android/androidproject.jks密钥库类型: jks 密钥库提供方: SUN您的密钥库包含 1 个条目别名: ddgj 创建日期: 2018-11-16 条目类型: PrivateKeyEntry 证书链长度: 1 证书[1]: 所有者: CNcn, OUcn, Ocn, Lcn,…...
常用linux的命令(持续更新)
1.防火墙相关 centos7 防火墙 查状态:systemctl status firewalld.service 关闭:systemctl disable firewalld.service 重启生效 关闭:systemctl stop firewalld.service 马上生效 systemctl stop firewalld 临时关闭防火墙 systemctl disabl…...
《动手学深度学习 Pytorch版》 8.7 通过时间反向传播
8.7.1 循环神经网络的梯度分析 本节主要探讨梯度相关问题,因此对模型及其表达式进行了简化,进行如下表示: h t f ( x t , h t − 1 , w h ) o t g ( h t , w o ) \begin{align} h_t&f(x_t,h_{t-1},w_h)\\ o_t&g(h_t,w_o) \end{ali…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
Java求职者面试指南:计算机基础与源码原理深度解析
Java求职者面试指南:计算机基础与源码原理深度解析 第一轮提问:基础概念问题 1. 请解释什么是进程和线程的区别? 面试官:进程是程序的一次执行过程,是系统进行资源分配和调度的基本单位;而线程是进程中的…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项: 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库: npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...



