/* * 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+'元' } }, 'pieDemo1':function(val, index, series, opts){ if(index !== undefined){ return `${series[index].name}:${series[index].per}%` } }, 'xAxisDemo3': function(val) { if(val.length>4){ return val.substring(0, 3) + '...' }else{ return val } } }, //这里演示了自定义您的图表类型的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