总结Echarts的一些配置

饼图基本配置

图例形状的样式

legend: {
	icon: "rect circle" // 矩形 圆形等样式通过icon
	itemWidth: number // 矩形宽度
	itemHeight: number // 矩形高度
	itemGap: number // 图例的间距!
	x: "", // 图例位置 横向 可以给百分比调整
	y: "" // 图例位置 纵向 可以给百分比调整
	color: (params) => {
		console.log(params) // 设置文字颜色与数据块颜色一致
	}
}

饼图的大小和位置调整

radius: [ " ", " " ] // 都是number 根据需求调整 默认先给 50%, 50%试试吧
center: [ " " , " "] // 第一位代表左右 第二位代表上下 50%, 50% 根据需求做调整`在这里插入代码片`

series基本配置

startAngle: 90 // 饼图的起始角度和生长方向
itemStyle: {
	normal : {
		label: {
			show: boolean // 是否显示指示线数据
		},
		labelLine: {
			show: boolean // 是否显示指示线
		}
	}
}

折线图配置

xAxis

axisLine: { // 显示x轴并设置颜色为白色
	show: true,
	lineStyle: {
		color: "#fff"
	}
}
axisLabel: {
	textStyle: { 
		color: "#fff" // 设置x坐标轴文字颜色
	}
}
axiosTick: {
	show: boolean // 是否显示x轴刻度
}

yAxis

splitStyle: {
	show: boolean // 是否显示网格线
	lineStyle: {
		type: "dashed" // 网格线样式为点状
		color: "" // 网格线颜色
	}
}

series

smooth: boolean // 是否为平滑曲线
itemStyle: {
	color: "#fff" // 线条颜色
}
lineStyle: {
	shadowColor: " #fff" // 光影的颜色
	shadowOffsetX: 0 // 光影x偏移值
	shadowOffsetY: 0 // 光影y偏移值
	opacity: 0 // 
	type: "solid " // 光影样式
	width: 2 
}
aeraStyle: {
	// 填充渐变
	normal: {
		color: new echarts.graphic(0,0,0,1, [ // 上到下渐变
			{ offset: 0, color: "color" },
			{ offset: 1, color: "color" }
		])
	}
}

内容若有问题欢迎纠正。
还有个问题没有查到,除了使用border以外,如何给饼图设置间隔。
希望以上内容对大家有所帮助, 欢迎评论。

继续加油 ~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值