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

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


//事件转换函数，主要用作格式化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", "fin-area"
	],
	"range": [],
	//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
	//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
	"categories": ["line", "column", "bar", "area", "radar", "mainline", "mini-line", "mini-area", "mini-column",
		"fin-area"
	],
	//instance为实例变量承载属性，不要删除
	"instance": {},
	//option为opts及eopts承载属性，不要删除
	"option": {},
	//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
	"formatter": {
		"yAxisDemo1": function(val) {
			return val + '元'
		},
		"yAxisDemo2": function(val) {
			return val.toFixed(2)
		},
		"xAxisDemo1": function(val) {
			return val + '年'
		},
		"xAxisDemo2": function(val) {
			return formatDateTime(val, 'h:m')
		},
		"seriesDemo1": function(val) {
			return val + '元'
		},
		"tooltipScore": function(item, category, index, opts) {
			return category + ' ' + item.name + ': ' + item.data + ' 分 '
		},
		"tooltipScoreShort": function(item, category, index, opts) {
			return item.name + '得分率: ' + item.data + ' % '
		},
		"tooltipPercent": function(item, category, index, opts) {
			return category + ' ' + item.name + ': ' + item.data + ' % '
		},
		"HomeworkPercent": function(item, category, index, opts) {
			let value = item.data >= 50? (item.data >= 80? '优秀' : '良好') : '一般'
			return category + ' ' + item.name + '完成情况:' + value+ ' ' + item.data + ' % '
		},
		"tooltipHour": function(item, category, index, opts) {
			return item.name + ': ' + item.data + ' 小时 '
		},
		"pieMinute": function(item, category, index, opts) {
			return item.name + ': ' + item.data + ' 分钟 '
		},

	},
	//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
	//下面是自定义配置，请添加项目所需的通用配置
	"line": {
		"type": "line",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0, 10, 15, 5
		],
		"dataLabel": false,
		"fontSize": 12,
		"xAxis": X,
		"yAxis": Y,
		"legend": legend,
		"extra": {
			"line": {
				"type": "curve",
				"width": 2
			},
			"tooltip": tooltip,
		}
	},
	"column": {
		"type": "column",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0, 10, 15, 5
		],
		"dataLabel": false,
		"fontSize": 12,
		"xAxis": X,
		"yAxis": Y,
		"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": [
			0, 10, 15, 5
		],
		"dataLabel": false,
		"fontSize": 12,
		"xAxis": X,
		"yAxis": Y,
		"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,
			0,
			0,
			0
		],
		"dataLabel": false,
		"dataPointShape": false,
		"dataPointShapeType": "hollow",
		"legend": {
			"show": true,
			"position": "bottom",
			"float": "center",
		},
		"extra": {
			"rose": {
				"type": "radius",
				"minRadius": 50,
				"activeOpacity": 0.5,
				"activeRadius": 10,
				"offsetAngle": 0,
				"labelWidth": 15,
				"border": true,
				"borderWidth": 2,
				"borderColor": "#FFFFFF",
				"linearType": "none"
			},
			"tooltip": tooltip,
		}
	},
	"arcbar": {
		"type": "arcbar",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"title": {
			"name": "总成绩占比",
			"fontSize": 20,
			"color": "#0052d4",
		},
		"subtitle": {
			"name": "年级与班级",
			"fontSize": 15,
			"color": "#666666",
		},
		"extra": {
			"arcbar": {
				"width": 16,
			}
		}
	},
	"radar": {
		"type": "radar",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			0, 15, 10, 15
		],
		"fontSize": 12,
		"enableMarkLine": false,
		"dataLabel": false,
		"legend": {
			"show": true,
			"position": "bottom",
			"float": "right",
			"padding": 5,
			"margin": 5,
			"fontColor": "#696969",
		},
		"extra": {
			"radar": {
				"gridType": "circle",
				"gridCount": 2,
				"opacity": 0.3,
				"border": true,
				"borderWidth": 1,
			},
			"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,
		},
		"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,
			0,
			-20
		],
		"dataLabel": false,
		"dataPointShape": false,
		"tapLegend": false,
		"xAxis": {
			"disabled": true,
			"axisLine": false,
			"disableGrid": true,
			"boundaryGap": "center",
		},
		"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,
			12,
			0,
			12
		],
		"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": [
					"#0052d4",
					"#FFFFFF",
					"#ff5959",
					"#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": [
			10,
			0,
			0,
			0
		],
		"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": [
			-10,
			5,
			5,
			5
		],
		"dataLabel": false,
		"dataPointShape": false,
		"dataPointShapeType": "hollow",
		"legend": {
			"show": false,
		},
		"extra": {
			"rose": {
				"type": "radius",
				"activeRadius": 0,
				"border": true,
				"borderWidth": 2,
				"borderColor": "#FFFFFF",
			},
			"tooltip": {
				"showBox": false,
				"splitLine": false,
			},
		},
	},
	"fin-area": {
		"type": "area",
		"animation": true,
		"timing": "easeOut",
		"duration": 500,
		"color": color,
		"padding": [
			10,
			-10,
			-10,
			-10
		],
		"dataLabel": false,
		"dataPointShape": false,
		"tapLegend": false,
		"xAxis": {
			"disabled": true,
			"axisLine": false,
			"disableGrid": true,
		},
		"yAxis": {
			"disabled": true,
			"disableGrid": true,
			"data": [{
				"min": 0,
			}]
		},
		"legend": {
			"show": false,
		},
		"extra": {
			"area": {
				"type": "curve",
				"opacity": 0.7,
				"addLine": true,
				"width": 2,
				"gradient": true
			},
			"tooltip": tooltip,
		}
	},

}

export default cfu;