cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-09-12 16:40:40 +08:00
Code Issues Activity

refactor: 架构升级

Browse Source
This commit is contained in:
小莫唐尼
2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/qiun-data-charts/config-ucharts.js
+675
View File
@@ -0,0 +1,675 @@
/*
* uCharts®
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释，感谢支持开源！
*
* uCharts®官方网站
* https://www.uCharts.cn
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
* uni-app插件市场地址：
* http://ext.dcloud.net.cn/plugin?id=271
*
*/
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = [
'#1890FF',
'#91CB74',
'#FAC858',
'#EE6666',
'#73C0DE',
'#3CA272',
'#FC8452',
'#9A60B4',
'#ea7ccc',
]
// 事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
const formatDateTime = (timeStamp, returnType) => {
const date = new Date()
date.setTime(timeStamp * 1000)
const y = date.getFullYear()
let m = date.getMonth() + 1
m = m < 10 ? `0${m}` : m
let d = date.getDate()
d = d < 10 ? `0${d}` : d
let h = date.getHours()
h = h < 10 ? `0${h}` : h
let minute = date.getMinutes()
let 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',
'word',
'funnel',
'map',
'arcbar',
'line',
'column',
'mount',
'bar',
'area',
'radar',
'gauge',
'candle',
'mix',
'tline',
'tarea',
'scatter',
'bubble',
'demotype',
],
range: [
'饼状图',
'圆环图',
'玫瑰图',
'词云图',
'漏斗图',
'地图',
'圆弧进度条',
'折线图',
'柱状图',
'山峰图',
'条状图',
'区域图',
'雷达图',
'仪表盘',
'K线图',
'混合图',
'时间轴折线',
'时间轴区域',
'散点图',
'气泡图',
'自定义类型',
],
// 增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
// 自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
categories: [
'line',
'column',
'mount',
'bar',
'area',
'radar',
'gauge',
'candle',
'mix',
'demotype',
],
// instance为实例变量承载属性，不要删除
instance: {},
// option为opts及eopts承载属性，不要删除
option: {},
// 下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
formatter: {
yAxisDemo1(val, index, opts) {
return `${val}元`
},
yAxisDemo2(val, index, opts) {
return val.toFixed(2)
},
xAxisDemo1(val, index, opts) {
return `${val}年`
},
xAxisDemo2(val, index, opts) {
return formatDateTime(val, 'h:m')
},
seriesDemo1(val, index, series, opts) {
return `${val}元`
},
tooltipDemo1(item, category, index, opts) {
if (index == 0) {
return `随便用${item.data}年`
}
return `其他我没改${item.data}天`
},
pieDemo(val, index, series, opts) {
if (index !== undefined) {
return `${series[index].name}：${series[index].data}元`
}
},
},
// 这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
demotype: {
// 我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
type: 'line',
color,
padding: [15, 10, 0, 15],
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: 'dash',
dashLength: 2,
},
legend: {},
extra: {
line: {
type: 'curve',
width: 2,
},
},
},
// 下面是自定义配置，请添加项目所需的通用配置
pie: {
type: 'pie',
color,
padding: [5, 5, 5, 5],
extra: {
pie: {
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: true,
borderWidth: 3,
borderColor: '#FFFFFF',
},
},
},
ring: {
type: 'ring',
color,
padding: [5, 5, 5, 5],
rotate: false,
dataLabel: true,
legend: {
show: true,
position: 'right',
lineHeight: 25,
},
title: {
name: '收益率',
fontSize: 15,
color: '#666666',
},
subtitle: {
name: '70%',
fontSize: 25,
color: '#7cb5ec',
},
extra: {
ring: {
ringWidth: 30,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: true,
borderWidth: 3,
borderColor: '#FFFFFF',
},
},
},
rose: {
type: 'rose',
color,
padding: [5, 5, 5, 5],
legend: {
show: true,
position: 'left',
lineHeight: 25,
},
extra: {
rose: {
type: 'area',
minRadius: 50,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 15,
border: false,
borderWidth: 2,
borderColor: '#FFFFFF',
},
},
},
word: {
type: 'word',
color,
extra: {
word: {
type: 'normal',
autoColors: false,
},
},
},
funnel: {
type: 'funnel',
color,
padding: [15, 15, 0, 15],
extra: {
funnel: {
activeOpacity: 0.3,
activeWidth: 10,
border: true,
borderWidth: 2,
borderColor: '#FFFFFF',
fillOpacity: 1,
labelAlign: 'right',
},
},
},
map: {
type: 'map',
color,
padding: [0, 0, 0, 0],
dataLabel: true,
extra: {
map: {
border: true,
borderWidth: 1,
borderColor: '#666666',
fillOpacity: 0.6,
activeBorderColor: '#F04864',
activeFillColor: '#FACC14',
activeFillOpacity: 1,
},
},
},
arcbar: {
type: 'arcbar',
color,
title: {
name: '百分比',
fontSize: 25,
color: '#00FF00',
},
subtitle: {
name: '默认标题',
fontSize: 15,
color: '#666666',
},
extra: {
arcbar: {
type: 'default',
width: 12,
backgroundColor: '#E9E9E9',
startAngle: 0.75,
endAngle: 0.25,
gap: 2,
},
},
},
line: {
type: 'line',
color,
padding: [15, 10, 0, 15],
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: 'dash',
dashLength: 2,
},
legend: {},
extra: {
line: {
type: 'straight',
width: 2,
activeType: 'hollow',
},
},
},
tline: {
type: 'line',
color,
padding: [15, 10, 0, 15],
xAxis: {
disableGrid: false,
boundaryGap: 'justify',
},
yAxis: {
gridType: 'dash',
dashLength: 2,
data: [
{
min: 0,
max: 80,
},
],
},
legend: {},
extra: {
line: {
type: 'curve',
width: 2,
activeType: 'hollow',
},
},
},
tarea: {
type: 'area',
color,
padding: [15, 10, 0, 15],
xAxis: {
disableGrid: true,
boundaryGap: 'justify',
},
yAxis: {
gridType: 'dash',
dashLength: 2,
data: [
{
min: 0,
max: 80,
},
],
},
legend: {},
extra: {
area: {
type: 'curve',
opacity: 0.2,
addLine: true,
width: 2,
gradient: true,
activeType: 'hollow',
},
},
},
column: {
type: 'column',
color,
padding: [15, 15, 0, 5],
xAxis: {
disableGrid: true,
},
yAxis: {
data: [{ min: 0 }],
},
legend: {},
extra: {
column: {
type: 'group',
width: 30,
activeBgColor: '#000000',
activeBgOpacity: 0.08,
},
},
},
mount: {
type: 'mount',
color,
padding: [15, 15, 0, 5],
xAxis: {
disableGrid: true,
},
yAxis: {
data: [{ min: 0 }],
},
legend: {},
extra: {
mount: {
type: 'mount',
widthRatio: 1.5,
},
},
},
bar: {
type: 'bar',
color,
padding: [15, 30, 0, 5],
xAxis: {
boundaryGap: 'justify',
disableGrid: false,
min: 0,
axisLine: false,
},
yAxis: {},
legend: {},
extra: {
bar: {
type: 'group',
width: 30,
meterBorde: 1,
meterFillColor: '#FFFFFF',
activeBgColor: '#000000',
activeBgOpacity: 0.08,
},
},
},
area: {
type: 'area',
color,
padding: [15, 15, 0, 15],
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: 'dash',
dashLength: 2,
},
legend: {},
extra: {
area: {
type: 'straight',
opacity: 0.2,
addLine: true,
width: 2,
gradient: false,
activeType: 'hollow',
},
},
},
radar: {
type: 'radar',
color,
padding: [5, 5, 5, 5],
dataLabel: false,
legend: {
show: true,
position: 'right',
lineHeight: 25,
},
extra: {
radar: {
gridType: 'radar',
gridColor: '#CCCCCC',
gridCount: 3,
opacity: 0.2,
max: 200,
labelShow: true,
},
},
},
gauge: {
type: 'gauge',
color,
title: {
name: '66Km/H',
fontSize: 25,
color: '#2fc25b',
offsetY: 50,
},
subtitle: {
name: '实时速度',
fontSize: 15,
color: '#1890ff',
offsetY: -50,
},
extra: {
gauge: {
type: 'default',
width: 30,
labelColor: '#666666',
startAngle: 0.75,
endAngle: 0.25,
startNumber: 0,
endNumber: 100,
labelFormat: '',
splitLine: {
fixRadius: 0,
splitNumber: 10,
width: 30,
color: '#FFFFFF',
childNumber: 5,
childWidth: 12,
},
pointer: {
width: 24,
color: 'auto',
},
},
},
},
candle: {
type: 'candle',
color,
padding: [15, 15, 0, 15],
enableScroll: true,
enableMarkLine: true,
dataLabel: false,
xAxis: {
labelCount: 4,
itemCount: 40,
disableGrid: true,
gridColor: '#CCCCCC',
gridType: 'solid',
dashLength: 4,
scrollShow: true,
scrollAlign: 'left',
scrollColor: '#A6A6A6',
scrollBackgroundColor: '#EFEBEF',
},
yAxis: {},
legend: {},
extra: {
candle: {
color: {
upLine: '#f04864',
upFill: '#f04864',
downLine: '#2fc25b',
downFill: '#2fc25b',
},
average: {
show: true,
name: ['MA5', 'MA10', 'MA30'],
day: [5, 10, 20],
color: ['#1890ff', '#2fc25b', '#facc14'],
},
},
markLine: {
type: 'dash',
dashLength: 5,
data: [
{
value: 2150,
lineColor: '#f04864',
showLabel: true,
},
{
value: 2350,
lineColor: '#f04864',
showLabel: true,
},
],
},
},
},
mix: {
type: 'mix',
color,
padding: [15, 15, 0, 15],
xAxis: {
disableGrid: true,
},
yAxis: {
disabled: false,
disableGrid: false,
splitNumber: 5,
gridType: 'dash',
dashLength: 4,
gridColor: '#CCCCCC',
padding: 10,
showTitle: true,
data: [],
},
legend: {},
extra: {
mix: {
column: {
width: 20,
},
},
},
},
scatter: {
type: 'scatter',
color,
padding: [15, 15, 0, 15],
dataLabel: false,
xAxis: {
disableGrid: false,
gridType: 'dash',
splitNumber: 5,
boundaryGap: 'justify',
min: 0,
},
yAxis: {
disableGrid: false,
gridType: 'dash',
},
legend: {},
extra: {
scatter: {},
},
},
bubble: {
type: 'bubble',
color,
padding: [15, 15, 0, 15],
xAxis: {
disableGrid: false,
gridType: 'dash',
splitNumber: 5,
boundaryGap: 'justify',
min: 0,
max: 250,
},
yAxis: {
disableGrid: false,
gridType: 'dash',
data: [
{
min: 0,
max: 150,
},
],
},
legend: {},
extra: {
bubble: {
border: 2,
opacity: 0.5,
},
},
},
}
export default cfu