UCharts配置个性化图表:折柱混合、条状图、渐变

发布时间:2024年01月04日

UCharts配置个性化图表:折柱混合、条状图、渐变

折线

效果图:
在这里插入图片描述
配置:

const opts = {
	color: ["#B7E55D", "#78DAE6", "#FF432A", "#FF9641", "#FFDF3D"], //颜色配置
	dataLabel: false, //不显示图表区域内数据点上方的数据文案
	legend: {
		position: "top", //图例相对画布的显示位置,可选值:'bottom','top','left','right'
		margin: 10, //图例外侧填充边距
		fontColor: "#333" //字体眼色 
	}, 
	xAxis: {
		disableGrid: true,
		fontColor: "#999",
		axisLineColor: "#DFE3EB"
	},
	yAxis: {
		gridType: "dash",
		gridColor: "#DFE3EB",
		dashLength: 2,
		showTitle: true,
		data: [{
			title: "万元",
			fontColor: "#999",
			titleFontColor: "#999",
			axisLineColor: "#DFE3EB",
			titleOffsetY: -5,
			titleOffsetX: -12
		}]
	},
	extra: {
		line: {
			type: "straight"
		},
		tooltip: { //提示窗
			showArrow: false, //是否显示箭头
			borderRadius: 4, //圆角大小
			bgOpacity: 0.6, //背景色透明度
		}
	}
}
圆滑折线

效果图:
在这里插入图片描述
配置:

const opts = {
	color: ["#B7E55D", "#78DAE6", "#FF432A", "#FF9641", "#FFDF3D"], //颜色配置
	dataLabel: false, //不显示图表区域内数据点上方的数据文案
	dataPointShape: false,
	legend: {
		position: "top", //图例相对画布的显示位置,可选值:'bottom','top','left','right'
		margin: 10, //图例外侧填充边距
		fontColor: "#333" //字体眼色 
	}, 
	xAxis: {
		disableGrid: true,
		fontColor: "#999",
		axisLineColor: "#DFE3EB"
	},
	yAxis: {
		gridType: "dash",
		gridColor: "#DFE3EB",
		dashLength: 2,
		showTitle: true,
		data: [{
			title: "万元",
			fontColor: "#999",
			titleFontColor: "#999",
			axisLineColor: "#DFE3EB",
			titleOffsetY: -5,
			titleOffsetX: -12
		}]
	},
	extra: {
		line: {
			type: "curve"
		},
		tooltip: { //提示窗
			showArrow: false, //是否显示箭头
			borderRadius: 4, //圆角大小
			bgOpacity: 0.6, //背景色透明度
		}
	}
}
柱状图

效果图:
在这里插入图片描述

配置:

const opts = {
	color: ["#1CC68E", "#5898FF"],
	dataLabel: false, //不显示图表区域内数据点上方的数据文案
	legend: {
		position: "top", //图例相对画布的显示位置,可选值:'bottom','top','left','right'
		float:"right",
		margin: 10, //图例外侧填充边距
		fontColor: "#333" //字体眼色 
	}, 
	xAxis: {
		disableGrid: true,
		fontColor: "#999",
		axisLineColor: "#DFE3EB"
	},
	yAxis: {
		gridType: "dash",
		gridColor: "#DFE3EB",
		dashLength: 2,
		showTitle: true,
		data: [{
			title: "万元",
			fontColor: "#999",
			titleFontColor: "#999",
			axisLineColor: "#DFE3EB",
			titleOffsetY: -5,
			titleOffsetX: -12
		}]
	},
	extra: {
		tooltip: { //提示窗
			showArrow: false, //是否显示箭头
			borderRadius: 4, //圆角大小
			bgOpacity: 0.6, //背景色透明度
		}
	}
}
饼图

效果图:
在这里插入图片描述
配置:

const opts = {
	color: ["#FEB587", "#21ADF9", "#A896FE ", "#1FCC9A"],
	legend: {
		position: "top", //图例相对画布的显示位置,可选值:'bottom','top','left','right'
		float: "right",
		margin: 10, //图例外侧填充边距
		fontColor: "#333" //字体眼色 
	},
	extra: {
		pie: {

		},
		tooltip: { //提示窗
			showArrow: false, //是否显示箭头
			borderRadius: 4, //圆角大小
			bgOpacity: 0.6, //背景色透明度
		}
	}
}
条状图

效果图:
在这里插入图片描述

配置:

const opts = {
	color: ["#FF6F5D", "#FFD589"],
	dataLabel: false, //不显示图表区域内数据点上方的数据文案
	legend: {
		position: "top", //图例相对画布的显示位置,可选值:'bottom','top','left','right'
		float:"right",
		margin: 10, //图例外侧填充边距
		fontColor: "#333" //字体眼色 
	}, 
	xAxis: {
		axisLine: false,
		fontColor: "#999",
		gridType: "dash",
		gridColor: "#DFE3EB",
	},
	yAxis: {
		gridType: "dash",
		gridColor: "#DFE3EB",
		dashLength: 2,
		showTitle: true,
		data: [{
			title: "万元",
			fontColor: "#999",
			titleFontColor: "#999",
			axisLineColor: "#DFE3EB",
			titleOffsetY: -5,
			titleOffsetX: -12
		}]
	},
	extra: {
		bar: {
			type: "group",
			width: 12,
			linearType: "custom",
			customColor:["#F64250", "#FF885D"],
			barBorderCircle: true,
			seriesGap: 2,
			categoryGap: 2
		},
		tooltip: { //提示窗
			showArrow: false, //是否显示箭头
			borderRadius: 4, //圆角大小
			bgOpacity: 0.6, //背景色透明度
		}
	}
}
折柱混合渐变

效果图:
在这里插入图片描述

配置:

const opts = {
	color: ["#3D87FF", "#31C97C"],
	dataLabel: false, //不显示图表区域内数据点上方的数据文案
	legend: {
		position: "top", //图例相对画布的显示位置,可选值:'bottom','top','left','right'
		float: "right",
		margin: 10, //图例外侧填充边距
		fontColor: "#333" //字体眼色 
	},
	xAxis: {
		disableGrid: true,
		fontColor: "#999",
		axisLineColor: "#DFE3EB"
	},
	yAxis: {
		gridType: "dash",
		gridColor: "#DFE3EB",
		dashLength: 2,
		showTitle: true,
		data: [{
			title: "万元",
			fontColor: "#999",
			titleFontColor: "#999",
			axisLineColor: "#DFE3EB",
			titleOffsetY: -5,
			titleOffsetX: -12
		}]
	},
	extra: {
		mix: {
			column: {
				type: "group",
				width: 10,
				seriesGap: 5,
				linearOpacity: 0.5,
				barBorderCircle: true,
				linearType: "custom",
				customColor: [
					"#E7F2FD"
				]
			}
		},
		tooltip: { //提示窗
			showArrow: false, //是否显示箭头
			borderRadius: 4, //圆角大小
			bgOpacity: 0.6, //背景色透明度
		}
	}
}
文章来源:https://blog.csdn.net/Serena_tz/article/details/135388089
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。