echart实现排名列表

 

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.mfbz.cn/a/558707.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

k8s配置configmap指定到容器的指定文件

我们需要将名称为walletkey.properties的文件做成configmap,然后将walletkey.properties文件单独挂载出来到/data/walletkey.properties,且不能覆盖/data目录,具体如下 1、创建configmap configmap文件内容 其中walletkey.properties: >-引…

课时100:正则表达式_基础实践_基础知识

3.1.1 基础知识 学习目标 这一节,我们从 基础知识、简单实践、小结 三个方面来学习 基础知识 需求 我们之前的一些操作,很大程度上都是基于特定的关键字来进行实践的,尤其是面对一些灵活的场景,我们因为过于限定一些关键字&am…

【配电网故障定位】基于二进制矮猫鼬优化算法的配电网故障定位 33节点配电系统故障定位【Matlab代码#82】

文章目录 【获取资源请见文章第6节:资源获取】1. 配电网故障定位2. 二进制矮猫鼬优化算法3. 算例展示4. 部分代码展示5. 仿真结果展示6. 资源获取 【获取资源请见文章第6节:资源获取】 1. 配电网故障定位 配电系统故障定位,即在配电网络发生…

Tensorflow2.0笔记 - 使用卷积神经网络层做CIFA100数据集训练(类VGG13)

本笔记记录CNN做CIFAR100数据集的训练相关内容,代码中使用了类似VGG13的网络结构,做了两个Sequetial(CNN和全连接层),没有用Flatten层而是用reshape操作做CNN和全连接层的中转操作。由于网络层次较深,参数量…

在 Node.js 中配置代理 IP 采集文章

不说废话,直接上代码: const http require(http); const https require(https);// 之后可以使用 http 或 https 模块发起请求,它们将自动使用配置的代理 // 代理ip:https://www.kuaidaili.com/?refrg3jlsko0ymg const proxy …

JavaScript算数运算符

源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> <b…

Bert语言大模型基础

一、Bert整体模型架构 基础架构是transformer的encoder部分&#xff0c;bert使用多个encoder堆叠在一起。 主要分为三个部分&#xff1a;1、输入部分 2、注意力机制 3、前馈神经网络 bertbase使用12层encoder堆叠在一起&#xff0c;6个encoder堆叠在一起组成编码端&#xf…

ZooKeeper设置监听器

ZooKeeper设置监听器&#xff0c;通过getData()/getChildern()/xists()方法。 步骤&#xff1a; 1.创建监听器&#xff1a;创建一个实现Watcher接口的类&#xff0c;实现process()方法。这个方法会在ZooKeeper向客户端发送一个Watcher事件通知的时候被调用。 2.注册监听器&…

【工厂模式】工厂方法模式、抽象工厂模式-简单例子

简单工厂模式&#xff0c;请跳转到我的另一篇博客【工厂模式】简单工厂模式-简单例子-CSDN博客 四、工厂方法模式 &#xff08;1&#xff09;这部分还是不变&#xff0c;创建一个Car接口&#xff0c;和两个实现类。 public interface Car {void name(); }public class WuLing…

深入刨析 mysql 底层索引结构B+树

文章目录 前言一、什么是索引&#xff1f;二、不同索引结构对比2.1 二叉树2.2 平衡二叉树2.3 B-树2.4 B树 三、mysql 的索引3.1 聚簇索引3.2 非聚簇索引 前言 很多人看过mysql索引的介绍&#xff1a;hash表、B-树、B树、聚簇索引、主键索引、唯一索引、辅助索引、二级索引、联…

C#语法知识之循环语句

5、循环语句 文章目录 1、while思考1 斐波那契数列思考2 判断一个数是否为质数思考3 找出100以内的质数 2、do...while3、for思考1 找水仙花数思考2 乘法表 1、while 1、作用 让代码重复去执行 2、语法相关 while(bool类型值){//当满足条件时&#xff0c;就会执行while语句…

大话设计模式-里氏代换原则

里氏代换原则&#xff08;Liskov Substitution Principle&#xff0c;LSP&#xff09; 概念 里氏代换原则是面向对象设计的基本原则之一&#xff0c;由美国计算机科学家芭芭拉利斯科夫&#xff08;Barbara Liskov&#xff09;提出。这个原则定义了子类型之间的关系&#xff0…

linux下使用qt+mpv调用GPU硬件解码

linux下GPU硬件解码接口&#xff0c;常用的有vdpau和vaapi。 mpv是基于mplayer开发的一个播放器。此外&#xff0c;mpv还提供了函数库libmpv&#xff0c;通过使用libmpv可以编写一个简单的播放器。 基于qtlibmpv的demo&#xff0c;官方例子代码如下&#xff1a;https://github.…

Java maven项目打包自动测试并集成jacoco生成代码测试覆盖度报告

引入Junit 引入 junit5 单元测试依赖 <properties><junit.version>5.10.2</junit.version><jacoco.version>0.8.12</jacoco.version></properties><dependencies><!-- 单元测试 --><dependency><groupId>org.jun…

JUC 线程间通信

前言 本篇文章我将解释《并发编程的艺术》一书中一个经典的实现线程间通信的案例&#xff0c;主要是使用wait() 和 notifyAll() 方法来实现的。 这段代码的作用是通过 wait() 和 notifyAll() 方法实现线程间的等待和通知机制。具体来说&#xff0c;代码中创建了两个线程&…

论文阅读-Multiple Targets Directed Greybox Fuzzing (Hongliang Liang,2024)

标题: Multiple Targets Directed Greybox Fuzzing (Hongliang Liang,2024) 作者: Hongliang Liang, Xinglin Yu, Xianglin Cheng, Jie Liu, Jin Li 期刊: IEEE Transactions on Dependable and Secure Computing 研究问题: 发现局限性&#xff1a;之前的定向灰盒测试在有…

webAssembly学习及使用rust

学习理解 webAssembly 概念知识&#xff0c;使用 API 进行 web 前端开发。 概念 是一种运行在现代网络浏览器中的新型代码&#xff0c;并且提供新的性能特性和效果。它有一种紧凑的二进制格式&#xff0c;使其能够以接近原生性能的速度运行。C/C、 C#、Rust等语言可以编译为 …

ruby 配置代理 ip(核心逻辑)

在 Ruby 中配置代理 IP&#xff0c;可以通过设置 Net::HTTP 类的 Proxy 属性来实现。以下是一个示例&#xff1a; require net/http// 获取代理Ip&#xff1a;https://www.kuaidaili.com/?refrg3jlsko0ymg proxy_address 代理IP:端口 uri URI(http://www.example.com)Net:…

【React】Sigma.js框架网络图-入门篇

一、介绍 Sigma.js是一个专门用于图形绘制的JavaScript库。 它使在Web页面上发布网络变得容易&#xff0c;并允许开发人员将网络探索集成到丰富的Web应用程序中。 Sigma.js提供了许多内置功能&#xff0c;例如Canvas和WebGL渲染器或鼠标和触摸支持&#xff0c;以使用户在网页上…

MATLAB R2024a:重塑商业数学软件的未来

在数字化浪潮席卷全球的今天&#xff0c;商业数学软件已经成为企业、研究机构乃至个人不可或缺的工具。而在这其中&#xff0c;MATLAB R2024a以其卓越的性能和广泛的应用领域&#xff0c;正逐步成为商业数学软件的新标杆。 MATLAB R2024a不仅继承了前代版本的优秀基因&#xf…
最新文章