/* * 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", "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", "bar", "area", "radar", "gauge", "candle", "mix", "demotype"], //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 + '元' }, "tooltipDemo1": function(item, category, index, opts) { if (index == 0) { return '随便用' + item.data + '年' } else { return item.name + item.data + '%' } }, "pieDemo": function(val, index, series) { if (index !== undefined) { return series[index].name + "\n" + series[index].data + '元' } }, "customToolTip":function(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": color, "padding": [15, 10, 0, 15], "xAxis": { "disableGrid": true, }, "yAxis": { "gridType": "dash", "dashLength": 2, }, "legend": {}, "extra": { "line": { "type": "curve", "width": 1 }, } }, //下面是自定义配置，请添加项目所需的通用配置 "pie": { "type": "pie", "canvasId": "", "canvas2d": false, "background": "none", "animation": true, "timing": "easeOut", "duration": 1000, "color": [ "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ], "padding": [ 5, 5, 5, 5 ], "rotate": false, "errorReload": true, "fontSize": 13, "fontColor": "#666666", "enableScroll": false, "touchMoveLimit": 60, "enableMarkLine": false, "dataLabel": true, "dataPointShape": true, "dataPointShapeType": "solid", "tapLegend": true, "legend": { "show": false, "position": "top", "float": "center", "padding": 5, "margin": 5, "backgroundColor": "rgba(0,0,0,0)", "borderColor": "rgba(0,0,0,0)", "borderWidth": 0, "fontSize": 13, "fontColor": "#000", "lineHeight": 11, "hiddenColor": "#CECECE", "itemGap": 10 }, "extra": { "pie": { "activeOpacity": 0.5, "activeRadius": 10, "offsetAngle": 0, "customRadius": 0, "labelWidth": 15, "border": true, "borderWidth": 3, "borderColor": "#FFFFFF", "linearType": "none" }, "tooltip": { "showBox": true, "showArrow": true, "showCategory": false, "borderWidth": 0, "borderRadius": 0, "borderColor": "#000000", "borderOpacity": 0.7, "bgColor": "#000000", "bgOpacity": 0.7, "gridType": "solid", "dashLength": 4, "gridColor": "#CCCCCC", "fontColor": "#FFFFFF", "splitLine": true, "horizentalLine": false, "xAxisLabel": false, "yAxisLabel": false, "labelBgColor": "#FFFFFF", "labelBgOpacity": 0.7, "labelFontColor": "#666666" } } }, "ring": { "type": "ring", "color": color, "padding": [5, 5, 5, 5], "rotate": false, "dataLabel": true, "legend": { "show": false, "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 }, } }, "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 }, } }, "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 }, } }, "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 } } }, "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 }, } }, "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 }, } }, "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", "canvasId": "", "canvas2d": false, "background": "none", "animation": true, "timing": "easeOut", "duration": 1000, "color": [ "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ], "padding": [ 15, 15, 0, 15 ], "rotate": false, "errorReload": true, "fontSize": 13, "fontColor": "#666666",//数字颜色 "enableScroll": false, "touchMoveLimit": 60, "enableMarkLine": false, "dataLabel": true, "dataPointShape": true, "dataPointShapeType": "solid", "tapLegend": true, "xAxis": {//x轴 "disabled": false, "axisLine": true, "axisLineColor": "#CCCCCC", "calibration": false, "fontColor": "#d0d0d0", "fontSize": 13, "rotateLabel": false, "itemCount": 5, "boundaryGap": "center", "disableGrid": true, "gridColor": "#CCCCCC", "gridType": "solid", "dashLength": 4, "gridEval": 1, "scrollShow": false, "scrollAlign": "left", "scrollColor": "#A6A6A6", "scrollBackgroundColor": "#EFEBEF", "format": "" }, "yAxis": {//y轴 "disabled": false, "disableGrid": false, "splitNumber": 5, "gridType": "solid",//dash：虚线 solid:实线 "dashLength": 4, "gridColor": "#CCCCCC", "fontColor": "#666666", "padding": 10, "showTitle": true, "data": [{ "position": "top", "title": "折线", "fontColor": "#d0d0d0", }, { "position": "top", "title": "", "fontColor": "#d0d0d0", }, { "position": "left", "title": "", "fontColor": "#d0d0d0", }, ] }, "legend": { "show": false, "position": "bottom", "float": "center", "padding": 5, "margin": 5, "backgroundColor": "rgba(0,0,0,0)", "borderColor": "rgba(0,0,0,0)", "borderWidth": 0, "fontSize": 13, "fontColor": "#666666", "lineHeight": 11, "hiddenColor": "#CECECE", "itemGap": 10 }, "extra": { "mix": { "column": { "width": 20, "seriesGap": 2, "barBorderCircle": false, "linearType": "none", "linearOpacity": 1, "colorStop": 0 } }, "tooltip": { "showBox": false,//点击时不显示描述信息 "showArrow": true, "showCategory": false, "borderWidth": 0, "borderRadius": 0, "borderColor": "#000000", "borderOpacity": 0.7, "bgColor": "#000000", "bgOpacity": 0.7, "gridType": "solid", "dashLength": 4, "gridColor": "#CCCCCC", "fontColor": "#FFFFFF", "splitLine": false,//点击时不显示选中竖线 "horizentalLine": false, "xAxisLabel": false, "yAxisLabel": false, "labelBgColor": "#FFFFFF", "labelBgOpacity": 0.7, "labelFontColor": "#666666" }, "markLine": { "type": "solid", "dashLength": 4, "data": [] } } }, "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;