echarts x轴y轴添加单位

news2024/11/15 11:50:48

    function evaluationDistributionBar(data,id) {	
		//data.series[0].data = [1,31,1,1]
		//data.series[1].data = [1,1,1,1]
		if(!data || data.series.length == 0) return
		for(let i in data.series){//给柱状图动态修改颜色
			if(data.series[i].name == '男'){
				data.series[i].itemStyle = {
					color : '#00ccdf'
				}
				data.series[i].barGap = '0%'//去掉双柱子中间的间距
			}else if(data.series[i].name == '女'){
				data.series[i].itemStyle = {
					color : '#f39801'//去掉双柱子中间的间距
				}
				data.series[i].barGap = '0%'
			}
		}
		let myChart = echarts.init(document.getElementById(id))
		var option = {
		    tooltip : {
		        trigger: 'axis'
		    },
		    title: { //y轴的写法 ************************************
			    text: '人',
			    left: '20',
			    top: '30',
			    textStyle:{
			    	color: '#999',
			    	fontSize: 12,
			    	fontWeight: 400
			   	}
			},
		    legend: {
		        data:data.legendData
		    },
		    xAxis : [
		        {
		            type : 'category',
		            data : data.xData,
		            axisTick: {
		                show: false //不显示刻度线
		            },
		            axisLine: {
	                    lineStyle: {
	                        color: '#999',
	                        width: 1, //这里是为了突出显示加上的  
	                    },
	                    symbol: ['none', 'arrow'],    //只在末端显示箭头
	                    symbolSize: [6, 10],//原来是[8, 16]
	                    symbolOffset:[0, 8],//箭头段移动8个像素
	                },
	                name: '分', //x轴的写法 ************************************
	                nameLocation: 'end',//坐标位置,支持start,end
	                nameTextStyle: {
	                  fontSize: 12,
	                  color: '#999'
	                }
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            minInterval: 1,//设置最小的刻度是1
		            boundaryGap: ['0', '10%'],//在Y轴的两端保留10%的空白间隔,使得柱状图不会与Y轴边界紧密相连。,
		            axisTick: {
		                show: false //不显示刻度线
		            },
		            axisLine: {
	                    lineStyle: {
	                        color: '#999',
	                        width: 1, //这里是为了突出显示加上的  
	                    },
	                    symbol: ['none', 'arrow'],    //只在末端显示箭头
	                    symbolSize: [6, 10],//原来是[8, 16]
	                    symbolOffset:[0, 8],//箭头段移动8个像素
	                },
		        }
		    ],
		    series : data.series
		};		
		
		myChart.setOption(option);
	}

看星星的位置

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

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

相关文章

什么牌子的led台灯质量好?考研必备五款护眼台灯推荐

眼睛更是心灵的窗户,我们通过这扇窗来欣赏这个美好的世界。而如今,近视在儿童中已司空见惯,近视率逐年提高,并且低龄化的现状更加突出。据世界卫生组织的最新研究报告,目前中国近视患者人数多达6亿,其中我国…

Sui与阿联酋科技孵化器Hub71合作支持生态项目建设,扩大全球影响力

近日,总部位于阿联酋( United Arab Emirates ,UAE)的科技孵化器Hub71宣布与Mysten Labs合作,将支持Sui上的新项目。通过本次合作,孵化项目的开发者们不仅可以获得Mysten Labs的技术专业知识和支持&#xff…

供应商关系管理软件:如何使用它来改善供应商关系?

从最基本的角度来说,企业需要供应商为其生产和销售的产品或服务提供原材料,或者为其提供资源和服务来经营自己的业务。 建立稳定而健康的供应商关系的最大优势之一,就是可以为企业带来更高的价值。企业对供应商了解越多,供应商对…

kerberos的认证过程以及白银黄金票据

kerberos协议 背景 1、1000台电脑,员工可以在任意电脑上登录自己的账户,每台电脑建立1000个用户 2、现有一台打印机服务,员工想要访问有两种方式,一种直接链接网线,第二种实现认证后,多个主机使用一台打印…

程序包不存在

idea2020会有一个小bug&#xff0c;在idea的Settings设置中进行下面配置&#xff1a; 然后在maven项目下的pom.xml中加入如下代码&#xff1a; <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifact…

CVE-2023-25573:MeterSphere 任意文件下载漏洞复现[附POC]

文章目录 MeterSphere 任意文件下载&#xff08;CVE-2023-25573&#xff09;漏洞复现[附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 MeterSphere 任意文件下载&#xff08;CVE-2023-25573&#xff09;漏洞…

基于SSM线上旅行信息管理系统设计与实现

摘 要 随着旅游业的迅速发展&#xff0c;传统的旅行信息查询管理方式&#xff0c;已经无法满足用户需求&#xff0c;因此&#xff0c;结合计算机技术的优势和普及&#xff0c;特开发了本线上旅行信息管理系统。 本论文首先对线上旅行信息管理系统进行需求分析&#xff0c;从系…

Abbyy FineReader16最新版本有哪些新功能?

在数字化时代&#xff0c;数据处理和转换变得非常重要&#xff0c;Abbyy FineReader 就是一款专门用于处理、转换和识别图像和 PDF 文件的软件。在本文中&#xff0c;我们将会详细介绍 Abbyy FineReader 的功能以及适合使用该软件的电脑。 ABBYY Finereader 16-安装包下载如下&…

echarts折线图的线呈现动态效果

效果如图 let yData [222, 932, 66, 934, 111, 333, 0],xData ["测1", "测2", "测3", "测4", "测5", "测6", "测7"],datacoords [{coords: [],},];for (var i 0; i < xData.length; i) {datacoo…

抖音自动评论助手,开发流程与需要到的技术和代码分享

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 一、引言 随着互联网的快速发展&#xff0c;短视频平台已成为人们日常生活的重要组成部分。其中&#xff0c;抖音作为一款深受用户喜爱的短视频平台&#xff0c;拥有庞大的用户群体…

Visual Studio 2022分析C#程序内存泄漏

背景 最近我们的项目出现了内存激增的情况&#xff0c;初次探讨&#xff0c;我们发现和机器人发生通信之后&#xff0c;内存会缓慢上升&#xff0c;直到系统崩溃。 例子 由于只是介绍一个简单的方案&#xff0c;所以就写一个比较简单的例子来演示了&#xff0c;代码如下&…

MySQL进阶知识:SQL性能优化

目录 SQL性能分析 SQL执行频率 慢查询日志 profile详情 explain执行计划 索引的使用 最左前缀法则 范围查询 索引列运算 字符串加引号 模糊查询 or连接的条件 数据分布影响 SQL提示 覆盖索引 前缀索引 索引设计原则 SQL优化 insert优化 主键优化 页分裂 …

JS动态转盘可自由设置个数与概率

让我为大家介绍一下转盘的实现过程与原理&#xff0c;介绍都放在下面代码块中&#xff0c;一步一步的教会你。 我们转盘使用线段来实现 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title><style type&quo…

【Jmeter性能测试】ForEach控制器的用法解析

引言 最近我在进行JMeter性能测试时遇到了一些问题&#xff0c;特别是在使用ForEach控制器时感到有点棘手。 但是经过不断地摸索和实践&#xff0c;终于成功地掌握了这个神奇的工具&#xff0c;提高了我的测试效率。因此&#xff0c;今天我想和大家分享我的经验&#xff0c;让…

“逆风飞翔·事实孤儿同行计划”成长陪伴主题区域陪伴培训会

为推进各机构更好地开展事实孤儿成长陪伴工作&#xff0c;促进事实孤儿成长陪伴实施成效&#xff0c;搭建各机构间事实孤儿成长陪伴方式方法交流平台。11月26日&#xff0c;在中国乡村发展基金会、中国民生银行的支持下&#xff0c;由湖南省大爱无疆青少年公益发展中心主办&…

社区内涝积水监测系统作用,改善社区积水

随着社区化进程的加速&#xff0c;社区基础设施的重要性日益凸显。在这个背景下&#xff0c;社区生命线和内涝积水监测系统成为了关注的焦点。它们在维护社区安全&#xff0c;特别是在应对暴雨等极端天气条件下&#xff0c;发挥着至关重要的作用。 WITBEE万宾时刻关注社区内涝积…

【JavaEE初阶】volatile 关键字、wait 和 notify

目录 一、volatile 关键字 1、volatile 能保证内存可见性 2、volatile 不保证原子性 二、wait 和 notify 1、wait()方法 2、notify()方法 3、notifyAll()方法 4、wait 和 sleep 的对比 一、volatile 关键字 1、volatile 能保证内存可见性 我们前面的线程安全文章中&…

Windows系统IIS服务配置与网站搭建,结合内网穿透实现公网访问

文章目录 1.前言2.Windows网页设置2.1 Windows IIS功能设置2.2 IIS网页访问测试 3. Cpolar内网穿透3.1 下载安装Cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5.结语 1.前言 在网上各种教程和介绍中&#xff0c;搭建网页都会借助各种软件的帮助&#xf…

nginx 配置前端项目添加https

可申请阿里云免费证书 步骤省略… nginx 配置 server {listen 8050; #默认80端口 如果需要所有访问地址都是https 需要注释listen 8443 ssl; #https 访问的端口 &#xff0c;默认443server_name 192.168.128.XX; #域名 或 ip# 增加ssl#填写证书文件…

【嵌入式C】数据的大小端存储与数据格式转换

【嵌入式C】数据的大小端存储与数据格式转换 目录 1. 大小端存储格式图解2. 数据类型转换函数2.1 u8数组转u162.2 u16数转u8数组 资料&#xff1a;【嵌入式数据传输及存储的C语言实现】 以Cortex-M内核为例&#xff0c;实际应用中大部分内核都是 **小端 **存储&#xff0c;以S…