// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性 const color = ["#4169E1", "#ff5959", "#f9c752", "#d8deff", "#23b46c", "#ff8caf", "#FC8452", "#9A60B4"]; // 提示窗配置 const tooltip = { "showBox": true, "showArrow": false, "showCategory": false, "borderRadius": 6, "bgOpacity": 0.5, "splitLine": true, "gridType": "dash", "dashLength": 24, }; //x轴配置 const X = { "disableGrid": true, "fontSize": 11, "scrollColor": "#F5F5F5", "scrollBackgroundColor": "#D3D3D3", "itemCount": 6, "format": "" }; //y轴配置 const Y = { "data": [{ // "fontSize": 11, // "min": 0, axisLine: false, }] }; //图例配置 const legend = { "show": true, "position": "top", "float": "right", "padding": 5, "margin": 15, "fontSize": 13, }; //标记线配置 const markLine = { "type": "solid", "dashLength": 20, "data": [{ "value": 100, "lineColor": "#666", "showLabel": true, "labelFontColor": "#666", "labelBgColor": "#FFF", "labelBgOpacity": 0, "yAxisIndex": 0 }] }; const padding = [ 0, 10, 20, 5 ] //事件转换函数,主要用作格式化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", "mount", "bar" ], "range": [], //增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype" //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories "categories": ["line", "column", "bar", "area", "radar", "mainline", "mini-line", "mini-area", "mini-column", "mount", "bar" ], //instance为实例变量承载属性,不要删除 "instance": {}, //option为opts及eopts承载属性,不要删除 "option": {}, //下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换 "formatter": { "tooltipScore": function(item, category, index, opts) { return category + ' ' + item.name + ': ' + item.data + ' 分 ' }, "tooltipScoreShort": function(item, category, index, opts) { return item.name + '得分率: ' + item.data + ' % ' }, "HomeworkPercent": function(item, category, index, opts) { return category.replace('-', '月') + '日 ' + item.name + ' ' + item.data + ' % ' }, "tooltipHourColum": function(item, category, index, opts) { return category.replace('-', '月') + '日 ' + item.name + ': ' + item.data + ' 小时 ' }, "pieHour": function(item, category, index, opts) { return item.name.replace('-', '月') + '日 ' + item.data + '小时' }, "pieMinute": function(item, category, index, opts) { return item.name.replace('-', '月') + '日 ' + item.data + '分钟' }, "sleepExerciseCom": function(item, category, index, opts) { let value = item.data <= 20 ? (item.data >= 10 ? '分配科学' : '运动量少') : '运动过量' return '运动占睡眠: ' + item.data + '% ' + value }, "subjectRankColum": function(item, category, index, opts) { return category + ' ' + item.name + '超过 ' + item.data + '% 的学生' }, "subjectRankArea": function(item, category, index, opts) { return category + ' ' + item.name + item.data + '% 的学生' }, "distributionColumn": function(item, category, index, opts) { return category + '分 ' + item.name + ' ' + item.data + ' 人 ' }, "meritsRadar": function(item, category, index, opts) { return category + ' ' + item.name + ' ' + item.data + ' % ' }, "xAxisBar": function(val, index, opts) { return parseInt(val).toFixed(0) + '%' }, }, //这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。 //下面是自定义配置,请添加项目所需的通用配置 "line": { "type": "line", "animation": true, "timing": "easeOut", "duration": 500, "color": color, "padding": padding, "dataLabel": false, "fontSize": 12, "xAxis": X, "yAxis": Y, "enableScroll": true, "touchMoveLimit": 60, "legend": legend, "extra": { "line": { "type": "curve", "width": 2 }, "tooltip": tooltip, } }, "column": { "type": "column", "animation": true, "timing": "easeOut", "duration": 500, "color": color, "padding": padding, "dataLabel": false, "fontSize": 12, "xAxis": X, "yAxis": Y, "enableScroll": true, "touchMoveLimit": 60, "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": padding, "dataLabel": false, "fontSize": 12, "xAxis": X, "yAxis": Y, "enableScroll": true, "touchMoveLimit": 60, "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, 5, 5, 5 ], "dataLabel": false, "dataPointShape": false, "dataPointShapeType": "hollow", "legend": { "show": true, "position": "bottom", "float": "center", }, "extra": { "rose": { "type": "radius", "minRadius": 90, "border": true, }, "tooltip": tooltip, } }, "arcbar": { "type": "arcbar", "animation": true, "timing": "easeOut", "duration": 500, "padding": [30, 30, 30, 30], "title": { "name": "", "fontSize": 28, "color": "#4169E1", "offsetY": -5 }, "subtitle": { "name": "", "fontSize": 15, "color": "#909399", }, "extra": { "arcbar": { "width": 15, "type": "circle", "backgroundColor": "#F5F5F5", } } }, "radar": { "type": "radar", "animation": true, "timing": "easeOut", "duration": 500, "color": color, "padding": [ 0, 15, 10, 15 ], "fontSize": 13, "enableMarkLine": false, "dataLabel": false, "legend": { "show": true, "position": "top", "float": "center", "padding": 5, "margin": 5, "fontColor": "#696969", }, "extra": { "radar": { "gridType": "circle", "gridCount": 3, "opacity": 0.2, "border": true, "borderWidth": 1, "labelColor": '#303133', "labelPointShow": true, }, "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, }, "title": { "name": "", "fontSize": 12, "offsetY": -5 }, "subtitle": { "name": "", "fontSize": 16, }, "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, 10, -20 ], "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": 3, "gradient": true }, "tooltip": { "showBox": false, "splitLine": false, }, } }, "mini-column": { "type": "column", "animation": true, "timing": "easeOut", "duration": 500, "color": color, "padding": [ 0, 10, 10, 10 ], "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": [ "#4169E1", "#FFFFFF", "#ff5959", "#FFFFFF", "#f9c752", "#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": [ 0, -5, 10, -5 ], "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": [ 0, 0, 0, 0 ], "dataLabel": false, "dataPointShape": false, "dataPointShapeType": "hollow", "legend": { "show": false, }, "extra": { "rose": { "type": "radius", "minRadius": 40, "activeRadius": 0, "opacity": 0.7, "gradient": true, "border": true, "borderWidth": 2, "borderColor": "#FFFFFF", }, "tooltip": { "showBox": false, "splitLine": false, }, }, }, "mount": { "type": "mount", "animation": true, "timing": "easeOut", "duration": 500, "color": color, "padding": [ 0, 20, 10, 20 ], "dataLabel": false, "dataPointShape": false, "tapLegend": false, "xAxis": { "disableGrid": true, "fontSize": 11, "scrollColor": "#F5F5F5", "scrollBackgroundColor": "#D3D3D3", "boundaryGap": "center", "disabled": true }, "yAxis": { "disableGrid": true, "data": [{ "fontSize": 11, "min": 0, "disabled": true }] }, "legend": { "show": false, }, "extra": { "mount": { "type": "mount", "borderWidth": 1.2, "widthRatio": 1.7, "linearType": "opacity", "linearOpacity": 0.1 }, "tooltip": { "showBox": true, "showArrow": false, "showCategory": false, "borderRadius": 6, "bgOpacity": 0.5, "splitLine": false, }, } }, "bar": { "type": "bar", "timing": "easeOut", "duration": 1000, "rotate": false, "rotateLock": false, "color": color, "padding": [0, 30, 20, 10], "fontSize": 13, "fontColor": "#666666", "dataLabel": false, "dataPointShape": true, "dataPointShapeType": "solid", "touchMoveLimit": 60, "enableScroll": false, "enableMarkLine": false, "xAxis": { "boundaryGap": "justify", "disableGrid": false, "min": 0, "max": 100, "axisLine": false, "disabled": false, "axisLineColor": "#CCCCCC", "calibration": false, "fontColor": "#666666", "fontSize": 13, "rotateLabel": false, "rotateAngle": 45, "itemCount": 5, "splitNumber": 5, "gridColor": "#CCCCCC", "gridType": "dash", "dashLength": 10, "gridEval": 1, "scrollShow": false, "scrollAlign": "left", "scrollColor": "#A6A6A6", "scrollBackgroundColor": "#EFEBEF", "format": "" }, "yAxis": { "disabled": false, "disableGrid": false, "splitNumber": 5, "gridType": "solid", "dashLength": 8, "gridColor": "#CCCCCC", "padding": 10, "showTitle": false, "data": [] }, "extra": { "bar": { "type": "group", "width": 30, "meterBorde": 1, "activeBgOpacity": 0.08, "seriesGap": 2, "categoryGap": 3, "barBorderCircle": false, "barBorderRadius": [6, 6, 6, 6], "linearType": "none", "linearOpacity": 1, "colorStop": 0 }, "tooltip": tooltip, } } } export default cfu;