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

/*
 * 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)=>{
    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','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':function(val, index, opts){return val+'元'},
        'yAxisDemo2':function(val, index, opts){return val.toFixed(2)},
        'xAxisDemo1':function(val, index, opts){return val+'年'},
        'xAxisDemo2':function(val, index, opts){return formatDateTime(val,'h:m')},
        'seriesDemo1':function(val, index, series, opts){return val+'元'},
        'tooltipDemo1':function(item, category, index, opts){
            if(index==0){
      	return '随便用'+item.data+'年'
            }else{
      	return '其他我没改'+item.data+'天'
            }
        },
        'pieDemo':function(val, index, series, opts){
            if(index !== undefined){
                return series[index].name+'：'+series[index].data+'元'
            }
        },
        'xAxisDemo3': function(val) {
            const index = val.indexOf('#')
            const newParams = val.slice(0, index)
            var newParamsName = newParams.substring(0, 4) + '...'
            return newParamsName
        }
    },
    //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
    'demotype':{
    //我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
        'type': 'line',
        'color': 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': 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': 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': 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': color,
        'extra': {
            'word': {
                'type': 'normal',
                'autoColors': false
            }
        }
    },
    'funnel':{
        'type': 'funnel',
        'color': 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': 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': 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': 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': 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': 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': 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': 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': 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': 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': 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': 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': 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': 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':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':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