echart实现排名列表

news2024/11/15 15:29:07

 

function createHorizontalBarChart(chartId, data) {
	    if (typeof echarts === 'undefined') {
	        console.error('请先引入 ECharts 库');
	        return;
	    }
	
	    // 初始化echarts实例
	    var myChart = echarts.init(document.getElementById(chartId));
	
	    // 对数据按照 value 进行降序排序
	    var sortedData = data.slice(0).sort(function (a, b) {
	        return a.value-b.value ;
	    });
	
	    // 指定图表的配置项和数据
	    var option = {
			title:{
				show: true ,
				padding: 15 ,
				text: '地震排名' ,
				link: 'https://wheart.cn' ,
				target: 'blank' ,
				textStyle: {
				color: '#fff' ,
				fontStyle: 'normal' ,
				fontWeight: 'bolder' ,
				fontFamily: 'sans-serif' ,
				fontSize: 18 ,
				textBorderType: 'solid' ,
				textBorderDashOffset: 0 ,
				textShadowColor: 'transparent' ,
				textShadowBlur: 0 ,
				textShadowOffsetX: 0 ,
				textShadowOffsetY: 0 ,
				overflow: 'none' ,
				ellipsis: '...' ,
				}
			},
	        tooltip: {
	            trigger: 'axis',
	            axisPointer: {
	                type: 'shadow',
	                shadowStyle: {
	                    color: 'rgba(255, 255, 255, 0.5)' // 设置指针颜色为半透明白色
	                }
	            }
	        },
	        grid: {
	            left: '1%',
	            right: '8%',
	            bottom: '3%',
	            containLabel: true
	        },
	        xAxis: {
	            type: 'value',
	            boundaryGap: [0, 0.01],
	            show: false,
	            axisLine: {
	                show: true // 不显示X轴线
	            },
	            axisLabel: {
	                show: true,
	                textStyle: {
	                    color: 'white' // X轴标签文字颜色
	                }
	            },
	            axisTick: {
	                show: true ,// 显示X轴刻度
	            }
	        },
	        yAxis: {
	            type: 'category',
	            data: sortedData.map(function (item) {
					
	                return item.name;
	            }),
	          axisLabel: {
	              show: true,
	              textStyle: {
	                  color: 'white' // X轴标签文字颜色
	              }
	          },
	        },
	        series: [{
	            name: '数值',
	            type: 'bar',
	            data: sortedData.map(function (item) {
	                return {
	                                   value: item.value,
	                                   name: item.name,
	                                   itemStyle: {
	                                       normal: {
	                                           borderRadius: [0, 15, 15, 0], // 设置圆角,这里表示顶部圆角为5px,底部无圆角
	                                       }
	                                   }
	                               }
	            }),
	            label: {
	                normal: {
	                    show: true,
	                    position: 'right', // 标签显示在柱状图的右侧
	                    formatter: '{c}',
						color: 'white',
						fontStyle: 'normal' ,
						fontWeight: 'normal' ,
						fontFamily: 'sans-serif' ,
						fontSize: 16 ,
	                },
					
	            },
	            itemStyle: {
	                normal: {
	                    color: function (params) {
	                        // 根据系列索引返回颜色
	                        var colorList = ['#3398DB', '#59C4E6', '#55ff00', '#ffff7f', '#ffaa00', '#DB3333'];
	                        return colorList[params.dataIndex]; // 循环使用颜色数组
	                    }
	                }
	            }
	        }]
	    };
	
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}
		// 示例数据,基于您提供的资源内容
		var rankData = [
		    {name: 'K线图', value: 10352},
		    {name: '知识图谱', value: 18398},
		    {name: '运行管家', value: 6545},
		    {name: '一次接线图', value: 4895},
		    {name: '应用5', value: 3546},
		    {name: '应用6', value: 10352},
		];
		
		// 调用函数创建图表,确保您页面中有一个元素的 ID 为 'chart-container'
		createHorizontalBarChart('box', rankData);

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

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

相关文章

hexo配置教程、主题使用及涉及的技术学习

一、背景 最近,一直想做一个属于自己的网站.可以从零开始搭建一个网站,顺便可以把日常中学到的技术用于实战,还可以顺便记录自己的所思所感,记录成长的过程. 方案 一开始的方案是从零开始,模仿常见个人博客的设计,基于vueSpringbootMySQL的去实现网站. 新建项目之后,发现vu…

Git 新手快速入门教程

一、什么是 Git 1. 何为版本控制 版本控制是一种记录文件变化的系统,可以跟踪文件的修改历史,并允许用户在不同版本之间进行比较、恢复或合并。它主要用于软件开发过程中管理代码的变更,但也可以应用于任何需要跟踪文件变更的场景。 版本控…

【问题】java查询MySQL时,mysql查询tinyint类型 的数据时,0会被转为false,1或以上会转为true

在做接口测试的数据库断言时,发现type字段断言总是失败,期望是0,打印数据库实际值是false 查看数据库格式: 解决: 在数据库url上,添加:&tinyInt1isBitfalse ——可解决java查询MySQL时&a…

密钥密码学(二)

原文:annas-archive.org/md5/b5abcf9a07e32fc6f42b907f001224a1 译者:飞龙 协议:CC BY-NC-SA 4.0 第十章:可变长度分数化 本章涵盖 基于摩尔斯电码的密码 混合字母和双字母 可变长度二进制码字 基于文本压缩的密码 本章涵盖…

【JavaWeb】Day52.Mybatis动态SQL(二)

动态SQL-foreach 案例&#xff1a;批量删除员工功能 SQL语句&#xff1a; delete from emp where id in (1,2,3); Mapper接口&#xff1a; ~~~java Mapper public interface EmpMapper {//批量删除public void deleteByIds(List<Integer> ids); } ~~~ XML映射文件&am…

C++学习进阶版(一):用C++写简单的状态机实现

目录 一、基础知识 1、状态机 2、四大要素 3、描述方式 4、设计步骤 5、实现过程中需注意 &#xff08;1&#xff09; 状态定义 &#xff08;2&#xff09; 状态转换规则 &#xff08;3&#xff09; 输入处理 &#xff08;4&#xff09; 状态机的封装 &#xff08;5…

串联超前及对应matlab实现

串联超前校正它的本质是利用相角超前的特性提高系统的相角裕度。传递函数为&#xff1a;下面将以一个实际的例子&#xff0c;使用matlab脚本&#xff0c;实现其校正后的相位裕度≥60。

mysql基础2——字段类型

整数类型 需要考虑存储空间和可靠性的平衡 浮点类型 浮点数类型不精准 将十进制数转换为二进制数存储 浮点数类型&#xff1a;float double real(默认是&#xff0c;double ) 如果需要将real设定为float &#xff0c;那么通过以下语句实现 set sql_mode "real_as…

go语言实现心跳机制样例

1、服务端代码&#xff1a; package mainimport ("fmt""net" )func handleClient(conn net.Conn) {defer conn.Close()fmt.Println("Client connected:", conn.RemoteAddr())// 读取客户端的数据buffer : make([]byte, 1024)for {n, err : conn…

AOC/AGON亮相2024上海国际酒店及商业空间博览会,共话电竞酒店产业新趋势!

摘要&#xff1a;行业头部品牌共聚上海&#xff0c;共话电竞酒店市场未来&#xff01; 春景熙熙&#xff0c;相逢自有时&#xff0c;3月26日-29日&#xff0c;2024上海国际酒店及商业空间博览会以及第二届全国电竞酒店投资交流论坛在上海新国际博览中心圆满帷幕。连续五年蝉联…

腾讯云轻量2核4G5M服务器优惠价格165元1年,2024年多配置报价单

腾讯云轻量2核4G5M服务器优惠价格165元1年。腾讯云服务器价格表2024年最新价格&#xff0c;轻量2核2G3M服务器61元一年、2核2G4M服务器99元1年&#xff0c;三年560元、2核4G5M服务器165元一年、3年900元、轻量4核8M12M服务器646元15个月、4核16G10M配置32元1个月、8核32G配置11…

STM32F407,429参考手册(中文)

发布一个适用STM32F405XX、STM32F407XX、STM32F415XX、STM32F417XX、STM32F427XX、STM32F437XX的中文数据手册&#xff0c;具体内容见下图&#xff1a; 点击下载&#xff08;提取码&#xff1a;spnn&#xff09; 链接: https://pan.baidu.com/s/1zqjKFdSV8PnHAHWLYPGyUA 提取码…

你准备好迎接它了吗?英伟达CEO黄仁勋预言:人形机器人将成为未来主流

在近日举行的“CadenceLIVE 硅谷 2024”大会上&#xff0c;英伟达公司的首席执行官黄仁勋与大会主办方Cadence公司的CEO进行了一场富有深度的对话。在这场引人瞩目的交流中&#xff0c;黄仁勋大胆预测&#xff0c;未来人形机器人将成为主流&#xff0c;引领科技发展的新潮流。 …

three.js(3):添加three. js坐标轴、光源和阴影效果

1 实现步骤 要实现阴影效果同样需要几个重要的概念。 我们首先研究一下日常生活中是如何产生阴影效果的。 需要有光。需要一个物体&#xff0c;比如苹果、狗等。需要一个接受投影的元素&#xff0c;比如地面、桌面等。 在 Three.js 中要产生阴影效果其实和现实世界的原理差…

ollama在windows系统上安装总结以及注意事项

ollama官网 https://ollama.com/ 直接点击下载&#xff0c;会根据你的系统自动下载相应的版本。 下载完之后&#xff0c;直接点击安装&#xff0c;默认安装到c盘。 安装完之后就可以在命令窗口测试一下。 ollama的常用命令如下&#xff1a; ollama serve 启动ollama o…

认识产品经理

一、合格的产品经理 1、什么是产品 解决某个问题的东西&#xff0c;称为产品 键盘可以打字&#xff0c;想喝水了可以用水壶&#xff0c;在超市想找一款扫把会有导购员服务 产品有颜色、大小等等区别&#xff0c;也有有形和无形的区别 2、什么是产品经理 想清楚怎么设计产品…

【氮化镓】GaN HEMT SEEs效应影响因素和机制

研究背景&#xff1a;AlGaN/GaN HEMT因其在高电压、高温和高频率下的操作能力而受到关注&#xff0c;尤其在航空航天和汽车应用中&#xff0c;其辐射响应变得尤为重要。重离子辐射可能导致绝缘体失效&#xff0c;即单事件效应&#xff08;SEEs&#xff09;引起的栅介质击穿。 …

订单分红与异业联盟:共筑电商新生态

大家好&#xff0c;我是微三云周丽&#xff0c;今天给大家分析当下市场比较火爆的商业模式&#xff01; 小编今天跟大伙们分享什么是订单分红与异业联盟&#xff1f; 随着互联网的深入发展和商业模式的不断创新&#xff0c;电子商务行业正迎来qian所未有的发展机遇。近年来&a…

java接口自动化测试

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

Linux cmake 初窥【1】

1.开发背景 linux 下编译程序需要用到对应的 Makefile&#xff0c;用于编译应用程序&#xff0c;但是 Makefile 的语法过于繁杂&#xff0c;甚至有些反人类&#xff0c;所以这里引用了cmake&#xff0c;cmake 其中一个主要功能就是用于生成 Makefile&#xff0c;cmake 的语法更…