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中的数据更换成自己想要的数据即可

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决 /bin/bash^M: bad interpreter: No such file or directory

问题描述 linux 系统中知行*.sh 文件报/bin/bash^M: bad interpreter: No such file or directory 原因&#xff1a; .sh文件是在windows系统编写的&#xff0c;在linux执行就有问题 解决过程 转化下格式执行如下命令 # dos2unix app.sh 结果bash: dos2unix: command not …

性能优化:JIT即时编译与AOT提前编译

优质博文&#xff1a;IT-BLOG-CN 一、简介 JIT与AOT的区别&#xff1a; 两种不同的编译方式&#xff0c;主要区别在于是否处于运行时进行编译。 JIT:Just-in-time动态(即时)编译&#xff0c;边运行边编译&#xff1a;在程序运行时&#xff0c;根据算法计算出热点代码&#xf…

类图表示法

设计模式&#xff0c;用设计图表示的话&#xff0c;主要用到类图。常见UML类图如下&#xff1a; 1、类图&#xff1a;矩形框&#xff0c;代表一个类&#xff08;Class&#xff09;。类图分为三层&#xff0c;第一层显示类的名称&#xff0c;如果是抽象类&#xff0c;则用斜体显…

FFmpeg编译安装(windows环境)以及在vs2022中调用

文章目录 下载源码环境准备下载msys换源下载依赖源码位置 开始编译编译x264编译ffmpeg 在VS2022写cpp调用ffmpeg 下载源码 直接在官网下载压缩包 这个应该是目前&#xff08;2023/10/24&#xff09;最新的一个版本。下载之后是这个样子&#xff1a; 我打算添加外部依赖x264&a…

探索随机森林: 机器学习中的集成学习神器

机器学习 第七课 随机森林 概述机器学习机器学习的主要分类监督学习无监督学习强化学习 集成学习提高准确性增强稳定性提升泛化能力 集成学习的主要方法BaggingBoostingStacking 随机森林的理论基础决策树的基本原理随机森林的生成过程随机森林的优势与局限性 随机森林的实际应…

进阶JAVA篇-深入了解 Stream 流对象的创建与中间方法、终结方法

目录 1.0 Stream 流的说明 2.0 Stream 流对象的创建 2.1 对于 Collection 系列集合创建 Stream 流对象的方式 2.2 对于 Map 系列集合创建 Stream 流对象的方式 2.3 对于数组创建 Stream 流对象的方式 3.0 Stream 流的中间方法 3.1 Stream 流的 filter() 中间方法 3.2 Stream 流…

C++基类和派生类的内存分配,多态的实现

目录 基类和派生类的内存分配基类和派生类的成员归属多态的实现 基类和派生类的内存分配 类包括成员变量&#xff08;data member&#xff09;和成员函数&#xff08;member function&#xff09;。 成员变量分为静态数据&#xff08;static data&#xff09;和非静态数据&…

Git简明教程

1.Git的定位 在我们自己开发项目的过程中&#xff0c;经常会遇到这样的情况&#xff0c;为了防止代码丢失&#xff0c;或者新变更的代码影响到原有的代码功能&#xff0c;为了在失误后能恢复到原来的版本&#xff0c;不得不复制出一个副本,比如&#xff1a;“坦克大战1.0”“坦…

【Html】交通灯问题

效果 实现方式 计时器&#xff1a;setTimeout或setInterval来计时。setInterval和 setTimeout 在某些情况下可能会出现计时不准确的情况。这通常是由于JavaScript的事件循环机制和其他代码执行所需的时间造成的。 问询&#xff1a;通过getCurrentLight将每个状态的持续时间设置…

Git常用的命令有哪些?

一、前言 git 的操作可以通过命令的形式如执行&#xff0c;日常使用就如下图6个命令即可 实际上&#xff0c;如果想要熟练使用&#xff0c;超过60多个命令需要了解&#xff0c;下面则介绍下常见的的git 命令 二、有哪些 配置 Git 自带一个 git config 的工具来帮助设置控制…

Haproxy 服务

Haproxy&#xff1a;他也是常用的负载均衡软件 nginx 支持四层转发&#xff0c;七层转发 haproxy 也是四层和七层转发 LVS的DR和NAT都是基于四层转发 都是基于流量的转发。 tun:四层和七层都有。 基于四层的转发&#xff1a; 1&#xff0c;lvs 2&#xff0c;nginx 3&…

对python中切片详解

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 Python中什么可以切片 Python中符合序列的有序序列都支持切片(slice) 如:列表,字符,元祖 &#x1f447; &#x1f447; &#x1f447; 更多精彩机密、教程&#xff0c;尽在下方&#xff0c;赶紧点击了解吧~ python源码、视…

“唯品会VIP商品API:一键获取奢侈品详情,尊享品质生活!“

要获取唯品会VIP商品的详细信息&#xff0c;您可以通过唯品会的API接口进行调用。 唯品会提供了多种商品选择&#xff0c;包括服装、美容护肤、鞋子、箱包、家居、母婴等等。在这些商品中&#xff0c;VIP奢侈品专区是唯品会的重要特色之一。 要获取VIP商品的详细信息&#xf…

计算机网络-计算机网络体系结构-应用层

目录 一、网络应用模型 客户/服务器模型(Client/Server) P2P模型(Peer-to-peer) 二、域名解析系统(DNS) 域名 域名服务器 解析过程 三、文件传输协议(FTP) FTP控制原理 四、电子邮件 组成结构 协议 SMTP MIME POP3 IMAP 五、万维网和HTTP协议 概述 HTTP 报…

程桌面管理软件Apple Remote Desktop mac中文介绍说明

Apple Remote Desktop mac是一款远程桌面管理软件。它可以让用户通过局域网或互联网连接到其他远程计算机&#xff0c;并实时监控和管理这些计算机。 使用Apple Remote Desktop&#xff0c;用户可以轻松远程操作和控制其他计算机的桌面。用户可以在远程计算机上查看、操控和键入…

WPF Material Design UI框架

前言 Material Design in xaml 是开源免费的ui框架&#xff0c;工控软件主打的就是简单界面。 以下简称MD 相关资源 MaterialDesignInXamlToolkit Github 地址 MD 快速启动 MD 案例压缩包 MD 框架使用 启动环境配置 安装Nuget包 App.xaml 配置 <Application x:Class&qu…

我用GPT4 预测了10年后中国大学排名Top10

目录 前言 &#x1f3eb;预测大学排名 &#x1f525; GPT4 预测排名的理由 最后 &#x1f388;个人主页&#xff1a;库库的里昂 &#x1f390;C/C领域新星创作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏✨收录专栏&#xff1a;杂谈&#x1f91d;希望作者的文章能…

Java IDEA feign调用上传文件MultipartFile以及实体对象亲测可行

Java IDEA feign调用上传文件MultipartFile以及实体对象亲测可行 1. 报错 java.lang.IllegalStateException: Body parameter cannot be used with form parameters2. 解决参考 1. 报错 java.lang.IllegalStateException: Body parameter cannot be used with form parameters …

海思专业级图像分析处理边缘计算盒子,双核A55 64位处理器+2.5TOPS算力

随着大模型、物联网等技术的快速发展&#xff0c;边缘计算逐渐成为了当今信息技术领域的研究热点&#xff0c;边缘算力的重要性愈加凸显。据市场需求反馈&#xff0c;大量长尾场景普遍具有小型化、灵活多变、即时性等特点&#xff0c;更需要关注算力的利用率、以及方案的成本、…

macOS telnet替代方式

前言 经过使用Linux&#xff0c;常常用Linux的telnet查看端口畅通&#xff0c;是否有防火墙&#xff0c;但是在mac上已经没有这个命令了&#xff0c;那么怎么使用这个命令或者有没有其他替代呢&#xff0c;win和linux是否可以使用相同的替代。macOS可以原生用nc命令替代&#…