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

常用配置:


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
	      }
    },
},

饼图:


在这里插入代码片

柱形图:

在这里插入代码片

折线图:

在这里插入代码片
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值