全部代码

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head><meta charset="utf-8"><title>3D柱状图-圆柱体-文字竖排</title>
</head>
<body style="height: 100%; margin: 0"><div id="main" style="height: 100%"></div><script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script><script type="text/javascript">// 当请求回数据后initData(['周一', '周二', '周三', '周四', '周五', '周六'], [100, 50, 70, 80, 60, 40])function initData(xData, yData) {var chartDom = document.getElementById('main');var bar = echarts.init(chartDom);let options = {// 直角坐标系内绘图网格,设置组件距离容器的距离grid: {left: 50,top: 50,right: 50,bottom: 50},// 设置鼠标移入的提示，默认显示tooltip: {},// 设置图例legend: {textStyle: {color: '#999'}},// 设置x轴xAxis: {data: [],// 显示x轴axisLine: {show: true},// 设置x轴的颜色和偏移量axisLabel: {color: '#999',rotate: 0},// 不显示x轴刻度axisTick: {show: false}},// 设置y轴yAxis: {// 显示y轴axisLine: {show: true},// 设置y轴的颜色axisLabel: {color: '#999',},// 不显示y轴刻度axisTick: {show: false},// 不显示分隔线splitLine: {show: false}},// 表示不同系列的列表series: []}// 设置顶部和底部的值let symbolData = [], newShadowHight = [];let heights = 0;yData.forEach(item => {symbolData.push(1)heights += item});newShadowHight = yData.map(item => heights);options.xAxis.data = xData;options.series = [// 底部{z: 2,type: 'pictorialBar',symbol: 'circle',symbolOffset: ['0%', '50%'],symbolSize: [30, 12],toolltip: {show: false},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#1f7eff'}, {offset: 1,color: '#64adff'}])},data: symbolData,},//内容区域{z: 1,type: 'bar',barWidth: 30,label: {normal: {show: true,position: 'inside',verticalAlign: 'middle', // 垂直居中显示// rotate: 90, // 旋转90度，使文字垂直显示//formatter: '{a|{b}}',//{a|{c}万人}formatter: function (params) {console.log(params);let txtArry = params.name.split('');let rs = "";for (var i = 0; i < txtArry.length; i++) {rs += txtArry[i] + "\n";}return rs;},rich: {a: {color: '#fff',fontSize: 14,align: 'center',},}}},data: yData},//内容的顶部{z: 3,type: 'pictorialBar',symbol: 'circle',symbolPosition: 'end',symbolOffset: ['0%', '-50%'],symbolSize: [30, 12],toolltip: {show: false,},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#1f7eff'}, {offset: 1,color: '#64adff',}])},label: {normal: {show: true,position: 'top',formatter: '{a|{c}万人}',//{a|{c}万人}rich: {a: {color: 'inherit',fontSize: 14,align: 'center'},}}},data: yData,},];// 设置配置项bar.setOption(options);window.addEventListener('resize', bar.resize);}</script>
</body>
</html>

效果图

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/89861.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/89861.shtml
英文地址，请注明出处：http://en.pswp.cn/diannao/89861.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【算法训练营Day08】字符串part2

【算法训练营Day08】字符串part2

文章目录 反转字符串里的单词右旋字符串KMP算法双指针法总结 反转字符串里的单词 题目链接&#xff1a;151. 反转字符串中的单词 双指针法解题逻辑 head指针遍历字符串遍历到单词首单词&#xff0c;生成end指针移动到单词尾部遇到完整单词收集&#xff0c;压入栈中head指针移动…
阅读更多...
如何使用backtrace定位Linux程序的崩溃位置

如何使用backtrace定位Linux程序的崩溃位置

在嵌入式Linux开发中&#xff0c;特别是复杂软件&#xff0c;多人协作开发时&#xff0c;当某人无意间写了一个代码bug导致程序崩溃&#xff0c;但又不知道崩溃的具体位置时&#xff0c;单纯靠走读代码&#xff0c;很难快速的定位问题。 本篇就来介绍一种方法&#xff0c;使用…
阅读更多...
十大排序算法汇总

十大排序算法汇总

好的&#xff0c;下面为你整理一篇面试全覆盖、极其深入的十大排序算法总结博客&#xff0c;涵盖算法原理、复杂度、稳定性、应用场景、工程实践、C与Python实现&#xff08;含详细注释&#xff09;&#xff0c;并对比分析各种排序的优缺点与适用情境。内容力求结构清晰、讲解透…
阅读更多...
零基础 “入坑” Java--- 七、数组（二）

零基础 “入坑” Java--- 七、数组（二）

文章目录 一、数组转字符串二、数组的拷贝三、求数组中元素的平均值四、查找数组中指定元素&#xff08;顺序查找&#xff09;五、数组排序&#xff08;冒泡排序&#xff09;六、查找数组中指定元素&#xff08;二分查找&#xff09;七、判断两个数组中的元素是否相等八、填充数…
阅读更多...
【C++ 真题】P1104 生日

【C++ 真题】P1104 生日

P1104 生日 题目描述 cjf 君想调查学校 OI 组每个同学的生日&#xff0c;并按照年龄从大到小的顺序排序。但 cjf 君最近作业很多&#xff0c;没有时间&#xff0c;所以请你帮她排序。 输入格式 输入共有 n 1 n 1 n1 行&#xff0c; 第 1 1 1 行为 OI 组总人数 n n n&…
阅读更多...
Oracle DB和PostgreSQL,OpenGauss主外键一致性的区别

Oracle DB和PostgreSQL,OpenGauss主外键一致性的区别

针对于unique索引在主外键上的表现&#xff0c;o和PG的行为确实不一致&#xff0c;测试样例&#xff1a;PG:测试1&#xff1a;test# CREATE TABLE gdb_editingtemplates ( objectid INTEGER NOT NULL, globalid VARCHAR(38) DEFAULT {00000000-0000-0000-0000-000000000000} …
阅读更多...
06.自动化测试概念

06.自动化测试概念

自动化测试概念 1. 自动化1.1 回归测试1.2 自动化分类 1.3 自动化测试金字塔2. web自动化测试3.Selenium 1. 自动化 ​ **自动化测试&#xff08;Automated Testing&#xff09;&#xff1a;**是指使用软件工具或脚本来自动执行测试任务&#xff0c;代替人工进行重复性、繁琐的…
阅读更多...
页面登录数据的加密(前端+后端)

页面登录数据的加密(前端+后端)

本加密过程使用的 AESRSA概要1.使用AES对传输数据进行加密AES为对称加密,加密和解决所需要的key是一样的,所以拦截到AES key就可以直接解密,所以需要结果RSA进行加密2.对AES的key进行RSA加密RSA为非对称加密,客户端只能获取到publicKey(公钥),而解密只能使用服务器的privateKey…
阅读更多...
PC端基于SpringBoot架构控制无人机(一):初识无人机控制

PC端基于SpringBoot架构控制无人机(一):初识无人机控制

一、无人机飞控系统的概述飞控&#xff08;Flight Controller&#xff09;是无人机最为核心的组成部分之一&#xff0c;负责实现无人机的自主飞行控制和稳定飞行。飞控系统的功能决定了无人机的飞行性能&#xff0c;包括飞行的稳定性、操控的响应速度、导航的精确度等。通过飞控…
阅读更多...
QT6 源（154）模型视图架构里的列表视图 QListView：先学习属性部分，

QT6 源（154）模型视图架构里的列表视图 QListView：先学习属性部分，

&#xff08;1&#xff09;属性总图&#xff0c;以及测试程序的框架 &#xff1a; 开始属性的学习 &#xff1a; &#xff08;2&#xff09; 继续属性学习 &#xff1a; &#xff08;3&#xff09; 谢谢
阅读更多...
MySQL——9、事务管理

MySQL——9、事务管理

事务管理 1、什么是事务&#xff1f;2、事务常见操作方式3、事务隔离级别4、数据库并发场景4.1、读-写4.2、RR与RC的本质区别 1、什么是事务&#xff1f; mysql是基于CS模式的&#xff0c;是一套网络服务&#xff0c;所以我们是可以在本地连接上远程服务器的mysql服务端的。my…
阅读更多...
Python之面向对象详解（一篇足矣）

Python之面向对象详解（一篇足矣）

目录 一、初阶面向对象 1. 初识面向对象 1.1 对象和self 1.2 常见成员 1.3 应用示例 将数据封装到一个对象&#xff0c;便于以后使用。 将数据封装到对象中&#xff0c;在方法中对原始数据进行加工处理。 根据类创建多个对象&#xff0c;在方法中对对象中的数据进行修改…
阅读更多...
【Qt】qml组件对象怎么传递给c++

【Qt】qml组件对象怎么传递给c++

将QML组件对象传递给C的方法 在QML和C之间传递完整的组件对象需要特殊处理&#xff0c;因为QML组件是动态创建的JavaScript对象。以下是几种有效的方法&#xff1a; 1. 使用QObject指针传递 C端设置 // MyClass.h #include <QObject> #include <QQuickItem>cla…
阅读更多...
Java基础 集合框架 List框架

Java基础 集合框架 List框架

list架构 list接口list 核心特性以及扩展Collection的体现 抽象类 AbstractList抽象类 AbstractSequentialList (简化链表的顺序访问)AbstractSequentialList 核心特点自定义实现示例代码讲解其实现原理AbstractSequentialList 总结与AbstractList的对比 List 实现类 ArrayList…
阅读更多...
2025年6月28和29日复习和预习（C++）

2025年6月28和29日复习和预习（C++）

学习笔记大纲​一、预习部分&#xff1a;数组基础​&#xff08;一&#xff09;核心知识点​数组的创建&#xff1a;掌握一维数组的声明方式&#xff0c;如int arr[5];&#xff08;创建一个包含 5 个整数的数组&#xff09;。重点在于理解数组长度需为常量&#xff0c;且在声明…
阅读更多...
【centos8服务如何给服务器开发3306端口】

【centos8服务如何给服务器开发3306端口】

在 CentOS 8 中开放 MySQL 默认端口 3306&#xff0c;需要配置防火墙和 SELinux。以下是详细步骤&#xff1a; 1. 开放防火墙端口&#xff08;Firewalld&#xff09; CentOS 8 默认使用 firewalld 管理防火墙&#xff0c;执行以下命令开放 3306 端口&#xff1a; # 开放 TCP 33…
阅读更多...
python系列之：使用md5和sha256完成签名认证，调用接口

python系列之：使用md5和sha256完成签名认证，调用接口

python系列之：使用md5和sha256完成签名认证，调用接口 MD5签名和sha256签名认证md5认证代码sha256认证代码拼接签名生成签名拼接url调用接口MD5签名和sha256签名认证 MD5签名认证 算法特性： 生成128位(16字节)的哈希值计算速度快已被证明存在碰撞漏洞(不同输入可能产生相同…
阅读更多...
SpringBatch配置与入门实例

SpringBatch配置与入门实例

通过对SpringBatch基础概念的了解&#xff0c;参考&#xff1a;SpringBatch使用介绍 任何技术用起来之后&#xff0c;再去探究内部细节的原理&#xff0c;才会事半功倍。下面记录一下笔者在SpringBoot项目中集成SpringBatch&#xff0c;并且通过一个小的实例展示如何简单使用它…
阅读更多...
spdlog 项目介绍与二次封装

spdlog 项目介绍与二次封装

目录 介绍 二次封装 介绍 spdlog 是C开源的第三方日志库&#xff0c;整个项目在 spdlog 命名空间中。 在 spdlog 命名空间的 level 命名空间里定义了枚举类型&#xff0c;把日志分为了 5 个等级&#xff1a;trace debug info warn err critical enum level_enum : in…
阅读更多...
shell编程之awk命令详解

shell编程之awk命令详解

1. awk 教程 1.1 调用 awk awk 是一种强大的文本处理工具&#xff0c;在 Linux 系统中广泛应用于日志分析、数据处理等场景。调用 awk 主要有以下三种方式&#xff1a; 1.1.1 命令行方式 基本语法为&#xff1a; awk (-F filed-separator) commands input-files其中&#…
阅读更多...
最新文章

Copyright @ 2022~2023