MiniPrograms/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = ["#4169E1", "#ff5959", "#f9c752", "#d8deff", "#23b46c", "#ff8caf", "#FC8452", "#9A60B4"];
// 提示窗配置
const tooltip = {
	"showBox": true,
	"showArrow": false,
	"showCategory": false,
	"borderRadius": 6,
	"bgOpacity": 0.5,
	"splitLine": true,
	"gridType": "dash",
	"dashLength": 24,
};
//x轴配置
const X = {
	"disableGrid": true,
	"fontSize": 11,
	"scrollColor": "#F5F5F5",
	"scrollBackgroundColor": "#D3D3D3",
	"itemCount": 6,
	"format": ""
};
//y轴配置
const Y = {
	"data": [{
		// "fontSize": 11,
		// "min": 0,
		axisLine: false,
	}]
};
//图例配置
const legend = {
	"show": true,
	"position": "top",
	"float": "right",
	"padding": 5,
	"margin": 15,
	"fontSize": 13,
};
//标记线配置
const markLine = {
	"type": "solid",
	"dashLength": 20,
	"data": [{
		"value": 100,
		"lineColor": "#666",
		"showLabel": true,
		"labelFontColor": "#666",
		"labelBgColor": "#FFF",
		"labelBgOpacity": 0,
		"yAxisIndex": 0
	}]
};
const padding = [
	0, 10, 20, 5
]

//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
const formatDateTime = (timeStamp, returnType) => {
	var date = new Date();
	date.setTime(timeStamp * 1000);
	var y = date.getFullYear();
	var m = date.getMonth() + 1;
	m = m < 10 ? ('0' + m) : m;
	var d = date.getDate();
	d = d < 10 ? ('0' + d) : d;
	var h = date.getHours();
	h = h < 10 ? ('0' + h) : h;
	var minute = date.getMinutes();
	var second = date.getSeconds();
	minute = minute < 10 ? ('0' + minute) : minute;
	second = second < 10 ? ('0' + second) : second;
	if (returnType == 'full') {
		return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
	}
	if (returnType == 'y-m-d') {
		return y + '-' + m + '-' + d;
	}
	if (returnType == 'h:m') {
		return h + ':' + minute;
	}
	if (returnType == 'h:m:s') {
		return h + ':' + minute + ':' + second;
	}
	return [y, m, d, h, minute, second];
}

const cfu = {
	//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
	"type": ["pie", "ring", "rose", "arcbar", "line", "column", "area", "radar", "mainline", "mini-line",
		"mini-area", "mini-column", "mini-rose", "mount"
	],
	"range": [],
	//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
	//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
	"categories": ["line", "column", "bar", "area", "radar", "mainline", "mini-line", "mini-area", "mini-column",
		"mount"
	],
	//instance为实例变量承载属性，不要删除
	"instance": {},
	//option为opts及eopts承载属性，不要删除
	"option": {},
	//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
	"formatter": {
		"tooltipScore": function(item, category, index, opts) {
			return category + ' ' + item.name + ': ' + item.data + ' 分 '
		},
		"tooltipScoreShort": function(item, category, index, opts) {
			return item.name + '得分率: ' + item.data + ' % '
		},
		"HomeworkPercent": function(item, category, index, opts) {
			return category.replace('-', '月') + '日 ' + item.name + ' ' + item.data + ' % '
		},
		"tooltipHourColum": function(item, category, index, opts) {
			return category.replace('-', '月') + '日 ' + item.name + ': ' + item.data + ' 小时 '
		},
		"pieHour": function(item, category, index, opts) {
			return item.name.replace('-', '月') + '日 ' + item.data + '小时'
		},
		"pieMinute": function(item, category, index, opts) {
			return item.name.replace('-', '月') + '日 ' + item.data + '分钟'
		},
		"sleepExerciseCom": function(item, category, index, opts) {
			let value = item.data <= 20 ? (item.data >= 10 ? '分配科学' : '运动量少') : '运动过量'
			return '运动占睡眠: ' + item.data + '% ' + value
		},
		"subjectRankColum": function(item, category, index, opts) {
			return category + ' ' + item.name + '超过 ' + item.data + '% 的学生'
		},
		"subjectRankArea": function(item, category, index, opts) {
			return category + ' ' + item.name + item.data + '% 的学生'
		},
		"distributionColumn": function(item, category, index, opts) {
			return category + '分 ' + item.name + ' ' + item.data + ' 人 '
		},
		"meritsRadar": function(item, category, index, opts) {
			return category + ' ' + item.name + ' ' + item.data + ' % '
		},
	},
	//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
	//下面是自定义配置，请添加项目所需的通用配置
	"line": {
		"type": "line",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": padding,
		"dataLabel": false,
		"fontSize": 12,
		"xAxis": X,
		"yAxis": Y,
		"enableScroll": true,
		"touchMoveLimit": 60,
		"legend": legend,
		"extra": {
			"line": {
				"type": "curve",
				"width": 2
			},
			"tooltip": tooltip,
		}
	},
	"column": {
		"type": "column",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": padding,
		"dataLabel": false,
		"fontSize": 12,
		"xAxis": X,
		"yAxis": Y,
		"enableScroll": true,
		"touchMoveLimit": 60,
		"legend": legend,
		"extra": {
			"column": {
				"type": "group",
				"width": 17,
				"seriesGap": 3,
				"categoryGap": 5,
				"barBorderCircle": true,
			},
			"tooltip": tooltip,
		}
	},
	"area": {
		"type": "area",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": padding,
		"dataLabel": false,
		"fontSize": 12,
		"xAxis": X,
		"yAxis": Y,
		"enableScroll": true,
		"touchMoveLimit": 60,
		"legend": legend,
		"extra": {
			"area": {
				"type": "curve",
				"opacity": 0.5,
				"addLine": true,
				"width": 2,
				"gradient": true
			},
			"tooltip": tooltip,
		}
	},
	"rose": {
		"type": "rose",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			-20,
			5,
			5,
			5
		],
		"dataLabel": false,
		"dataPointShape": false,
		"dataPointShapeType": "hollow",
		"legend": {
			"show": true,
			"position": "bottom",
			"float": "center",
		},
		"extra": {
			"rose": {
				"type": "radius",
				"minRadius": 90,
				"border": true,
			},
			"tooltip": tooltip,
		}
	},
	"arcbar": {
		"type": "arcbar",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"padding": [30, 30, 30, 30],
		"title": {
			"name": "",
			"fontSize": 28,
			"color": "#4169E1",
			"offsetY": -5
		},
		"subtitle": {
			"name": "",
			"fontSize": 15,
			"color": "#909399",
		},
		"extra": {
			"arcbar": {
				"width": 15,
				"type": "circle",
				"backgroundColor": "#F5F5F5",
			}
		}
	},
	"radar": {
		"type": "radar",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0, 15, 10, 15
		],
		"fontSize": 13,
		"enableMarkLine": false,
		"dataLabel": false,
		"legend": {
			"show": true,
			"position": "top",
			"float": "center",
			"padding": 5,
			"margin": 5,
			"fontColor": "#696969",
		},
		"extra": {
			"radar": {
				"gridType": "circle",
				"gridCount": 3,
				"opacity": 0.2,
				"border": true,
				"borderWidth": 1,
				"labelColor": '#303133',
				"labelPointShow": true,
			},
			"tooltip": tooltip,
		}
	},
	"pie": {
		"type": "pie",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0, 3, 0, 3
		],
		"fontSize": 12,
		"dataLabel": false,
		"legend": {
			"show": false,
		},
		"extra": {
			"pie": {
				"activeOpacity": 0.5,
				"activeRadius": 10,
				"offsetAngle": 0,
				"customRadius": 0,
				"labelWidth": 15,
				"border": true,
				"borderWidth": 3,
				"borderColor": "#FFFFFF",
				"linearType": "none"
			},
			"tooltip": tooltip,
		}
	},
	"ring": {
		"type": "ring",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0, 3, 0, 3
		],
		"fontSize": 12,
		"dataLabel": false,
		"legend": {
			"show": false,
		},
		"title": {
			"name": "",
			"fontSize": 12,
			"offsetY": -5
		},
		"subtitle": {
			"name": "",
			"fontSize": 16,
		},
		"extra": {
			"ring": {
				"ringWidth": 30,
				"centerColor": "#FFFFFF",
				"activeOpacity": 0.5,
				"activeRadius": 10,
				"offsetAngle": 0,
				"customRadius": 0,
				"labelWidth": 15,
				"border": true,
				"borderWidth": 3,
				"borderColor": "#FFFFFF",
				"linearType": "none"
			},
			"tooltip": tooltip,
		}
	},
	"mainline": {
		"type": "area",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0,
			-20,
			10,
			-20
		],
		"dataLabel": false,
		"dataPointShape": false,
		"tapLegend": false,
		"xAxis": {
			"disabled": true,
			"axisLine": false,
			"disableGrid": true,
		},
		"yAxis": {
			"disabled": true,
			"disableGrid": true
		},
		"legend": {
			"show": false,
		},
		"extra": {
			"area": {
				"type": "curve",
				"opacity": 0.7,
				"addLine": true,
				"width": 3,
				"gradient": true
			},
			"tooltip": {
				"showBox": false,
				"splitLine": false,
			},
		}
	},
	"mini-column": {
		"type": "column",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0,
			10,
			10,
			10
		],
		"dataLabel": false,
		"dataPointShape": false,
		"tapLegend": false,
		"xAxis": {
			"disabled": true,
			"axisLine": false,
			"disableGrid": true,
		},
		"yAxis": {
			"disabled": true,
			"disableGrid": true,
		},
		"legend": {
			"show": false,
		},
		"extra": {
			"column": {
				"type": "group",
				"width": 10,
				"seriesGap": 2,
				"categoryGap": 3,
				"barBorderCircle": false,
				"barBorderRadius": [
					10,
					10,
					10,
					10
				],
				"linearType": "opacity",
				"linearOpacity": 0.7,
				"customColor": [
					"#4169E1",
					"#FFFFFF",
					"#ff5959",
					"#FFFFFF",
					"#f9c752",
					"#FFFFFF"
				],
				"colorStop": 0.5,
				"meterBorder": 1,
				"meterFillColor": "#FFFFFF",
				"activeBgColor": "#FFFFFF",
				"activeBgOpacity": 0.08,
				"meterBorde": 1
			},
			"tooltip": {
				"showBox": false,
				"splitLine": false,
			},
		}
	},
	"mini-area": {
		"type": "area",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0,
			-5,
			10,
			-5
		],
		"dataLabel": false,
		"dataPointShape": false,
		"tapLegend": false,
		"xAxis": {
			"disabled": true,
			"axisLine": false,
			"disableGrid": true,
		},
		"yAxis": {
			"disabled": true,
			"disableGrid": true,
		},
		"legend": {
			"show": false,
		},
		"extra": {
			"area": {
				"type": "curve",
				"opacity": 0.7,
				"addLine": true,
				"width": 2,
				"gradient": true
			},
			"tooltip": {
				"showBox": false,
				"splitLine": false,
			},
		},
	},
	"mini-rose": {
		"type": "rose",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0,
			0,
			0,
			0
		],
		"dataLabel": false,
		"dataPointShape": false,
		"dataPointShapeType": "hollow",
		"legend": {
			"show": false,
		},
		"extra": {
			"rose": {
				"type": "radius",
				"minRadius": 40,
				"activeRadius": 0,
				"opacity": 0.7,
				"gradient": true,
				"border": true,
				"borderWidth": 2,
				"borderColor": "#FFFFFF",
			},
			"tooltip": {
				"showBox": false,
				"splitLine": false,
			},
		},
	},
	"mount": {
		"type": "mount",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0,
			20,
			10,
			20
		],
		"dataLabel": false,
		"dataPointShape": false,
		"tapLegend": false,
		"xAxis": {
			"disableGrid": true,
			"fontSize": 11,
			"scrollColor": "#F5F5F5",
			"scrollBackgroundColor": "#D3D3D3",
			"boundaryGap": "center",
			"disabled": true
		},
		"yAxis": {
			"disableGrid": true,
			"data": [{
				"fontSize": 11,
				"min": 0,
				"disabled": true
			}]
		},
		"legend": {
			"show": false,
		},
		"extra": {
			"mount": {
				"type": "mount",
				"borderWidth": 1.2,
				"widthRatio": 1.7,
				"linearType": "opacity",
				"linearOpacity": 0.1
			},
			"tooltip": {
				"showBox": true,
				"showArrow": false,
				"showCategory": false,
				"borderRadius": 6,
				"bgOpacity": 0.5,
				"splitLine": false,
			},
		}
	}
}

export default cfu;