echarts常用参数详解汇总(饼图,柱形图,折线图)持续更新中

2023-09-14 10:37:09

常用配置:


X/Y轴线的基础设置《通用》 细微的差距只能去官网查看了,基本一致 这里只是做了个汇总方便查看

xAxis/yAxis: {
    show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
    axisTick:{------------------------------------------------------------------------------------------
   		// 不显示坐标轴刻度线
        show:false, 
        alignWithLabel: true,  // 在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐
        // 坐标轴刻度的显示间隔 可以设置成 0 强制显示所有标签。
		// 如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
        interval: 0,
        inside: false, // 坐标轴刻度是否朝内,默认朝外。
        length: 5, // 坐标轴刻度的长度。也可以叫高度
        // 刻度线的样式设置。
        lineStyle: {
			color: '', // 刻度线的颜色
			width: 1, // 刻度线的宽度
			type: 'solid', // 刻度线类型-border类型展示
	        dashOffset: 1, // 用于设置虚线的偏移量,可搭配 type 指定 dash array 实现灵活的虚线效果。

	        // 用于指定线段末端的绘制方式,可以是:
	       	// --'butt': 线段末端以方形结束。
			// --'round': 线段末端以圆形结束。
			// --'square': 线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域。
			
	        cap: "butt",

	        // 用于设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)。可以是:
			// 'bevel': 在相连部分的末端填充一个额外的以三角形为底的区域, 每个部分都有各自独立的矩形拐角。
			// 'round': 通过填充一个额外的,圆心在相连部分末端的扇形,绘制拐角的形状。 圆角的半径是线段的宽度。
			// 'miter': 通过延伸相连部分的外边缘,使其相交于一点,形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。
			
	        join: "bevel",
			
			// 用于设置斜接面限制比例。只有当 join 为 miter 时, miterLimit 才有效。
			// 默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。
	        miterLimit: 10,
	        // 阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。这里的阴影是设置的刻度的
	        shadowBlur: 0,
	        shadowColor: "rgba(77, 33, 33, 1)", // 阴影颜色。支持的格式同color。
	        shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
	        shadowOffsetY: 0, // 阴影垂直方向上的偏移距离。
	        opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
		}
    },
    axisLine: {------------------------------------------------------------------------------------------
          show: false, // 不显示坐标轴线
	      onZero: false, // X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。
      	  onZeroAxisIndex: 0, // 当有双轴时,可以用这个属性手动指定,在哪个轴的 0 刻度上。
      	  
      	  // 轴线两边的箭头。可以是字符串,表示两端使用同样的箭头;或者长度为 2 的字符串数组,分别表示两端的箭头。
      	  // 默认不显示箭头,即 'none'。两端都显示箭头可以设置为 'arrow',只在末端显示箭头可以设置为 ['none', 'arrow']。
	      symbol: "none",
	      symbolSize: [10, 10], // 轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。
	      symbolOffset: [0, 0] // 轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。
	      
	      // 分割线线样式 复用样式不再重复
		  lineStyle: {
		        color: null,
		        width: 0,
		        type: "solid",
		        dashOffset: 0,
		        cap: "butt",
		        join: "bevel",
		        miterLimit: 10,
		        shadowBlur: 0,
		        shadowColor: null,
		        shadowOffsetX: 0,
		        shadowOffsetY: 0,
		        opacity: 1
	      }
    },
    axisLabel: {------------------------------------------------------------------------------------------
          show: false, // 不显示坐标轴上的文字 是否显示刻度标签。
    },
    splitLine:{------------------------------------------------------------------------------------------
         show:false, // 不显示网格线
         interval: 0,	      
         // 坐标轴线线样式 复用样式不再重复
		  lineStyle: {
		        color: null, // 坐标轴线线的颜色。
		        width: 0, // 坐标轴线线宽。
		        type: "solid",
		        dashOffset: 0,
		        cap: "butt",
		        join: "bevel",
		        miterLimit: 10,
		        shadowBlur: 0,
		        shadowColor: null,
		        shadowOffsetX: 0,
		        shadowOffsetY: 0,
		        opacity: 1
	      }
    },
},

饼图:


在这里插入代码片

柱形图:

在这里插入代码片

折线图:

在这里插入代码片
更多推荐

关于mysql已有主从环境得主从重配置

恢复主从环境1:Situation(背景)2:Task(任务)3:Action(行动)主库(备份)1:锁表2:效验是否锁表3:查看主库状态并记录4:备份数据库全部5:解锁表6:把备份放到从库从库1:备份从库(可选)2:恢复从库3:清除旧设置4:添加新设置4:Result(结果)1:Situation(背景)测试环境下得

片内互联中常用的拓扑结构

主要的拓扑结构有星型(Star)、交叉(Crossbar)、总线(Bus)、环型(Ring)和网格(Mesh)等。星型(Star)结构,主控处理器放在中心位置,其他各个模块均与其连接,而模块彼此之间并不直接交互,必须通过主控中转,结构如图1所示。这种结构简单高效,在早期片内模块数量较少、结构单一时经常被使用。但随着多核

9.21数电(加法器&状态机&独热编码)

加法半加器一位,分为两部分,一个是进位,一个是单位上的和进位采取与门,单位上的和用异或门全加器进位数就是三个数进行加和,通过与门,就是两两过与门描述每位的和项就是,只去描述那个1的情况,即三中有一个,或者三个都为1分解全加器行波进位加法器快速加法器是说下一位的进位=此位的两个加数再加上来自上位的进数当此位的两个加数均为

如何恢复U盘里面的已经损坏的数据?

弹出使用驱动器之前,先将U盘格式化的信息框,是Windows系统针对某些特定类型的U盘或移动硬盘的一种常见处理方式。一般来说,如果U盘或移动硬盘出现某些故障或问题,Windows系统会建议用户将其格式化。格式化是一种常规的操作,它能使U盘或移动硬盘恢复到初始状态,但需要注意的是,格式化操作将会清除所有存储在U盘或移动硬

极客时间:数据结构与算法之美【文章笔记 & 实践 & 总结】

原文链接:https://time.geekbang.org/column/intro/10001730127|递归树:如何借助树来求解递归算法的时间复杂度?如何借助树来分析归并排序算法的时间复杂度?如何借助树来分析快速排序算法的时间复杂度?如何借助递归树来分析斐波那契数列的时间复杂度?如何借助递归树来分析全排列的时间

SpringBoot,Mybatis 使用Java8(JSR310)时间日期规范

目录一.依赖二.前台三.Controller,Form,Service四.数据库类型五.效果一.依赖⏹若使用的是SpringBoot<dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter<

综合管廊安全监测系统,城市‘里子’的守护者

在现代城市的地下,一条隐藏在地下深处的巨龙悄然运行,它虽悄无声息,却是城市运转的重要生命线。这个神秘的存在就是综合管廊,综合管廊是保障城市运行的重要基础设施,被形象地称为“城市大动脉”“地下生命线”,能够有效解决传统城市建设中存在的“空中蜘蛛网”“马路拉链”等“城市病”,不仅让市容市貌更美观、更安全,也可以减少路面翻修

python温度转换程序

1.使用pycharm运行温度转换程序,尝试将温度单位设在前面2.参照温度转换程序,自己写一个关于货币转换、长度转换、重量转换或者面积转换的程序循环+函数defconvertemperature():temperature=""while(temperature!="q"):temperature=input("请输入

如何在linux定时备份opengauss数据库(linux核心至少在GLIBC_2.34及以上)

前提环境,linux的核心至少在GLIBC_2.34及以上才能使用。查看linux的glibc版本的命令如下strings/lib64/libc.so.6|grepGLIBC如下图或者用ldd--version如下图在官网下载对应的依赖包,只需要这个lib文件即可,将这个包放在linux对应下面脚本的LD_LIBRAR

Guava Cache介绍-面试用

一、GuavaCache简介1、简介GuavaCache是本地缓存,数据读写都在一个进程内,相对于分布式缓存redis,不需要网络传输的过程,访问速度很快,同时也受到JVM内存的制约,无法在数据量较多的场景下使用。基于以上特点,本地缓存的主要应用场景为以下几种:对于访问速度有较大要求存储的数据不经常变化数据量不大,占用

【校招VIP】java语言考点之反射

考点介绍:java的反射(reflection)机制是指在程序的运行状态中,可以构造任意一个类的对象,可以了解任意一个对象所属的类,可以了解任意一个类的成员变量和方法,可以调用任意一个对象的属性和方法。这种动态获取程序信息以及动态调用对象的功能称为lava语言的反射机制。反射被视为动态语言的关键。java语言考点之反射

热文推荐