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, //背景色透明度
		}
	}
}