// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性 const color = ["#0052d4", "#ff5959", "#f9b248", "#c1cbf7", "#3CA272", "#5fb7ff", "#FC8452", "#9A60B4"]; // 提示窗配置 const tooltip = { "showBox": true, "showArrow": false, "showCategory": false, "borderRadius": 6, "bgOpacity": 0.5, "splitLine": true, }; //x轴配置 const X = { "disableGrid": true, "fontSize": 11, "scrollColor": "#F5F5F5", "scrollBackgroundColor": "#D3D3D3", "format": "" }; //y轴配置 const Y = { "data": [{ // "fontSize": 11, // "min": 0, }] }; //图例配置 const legend = { "show": true, "position": "top", "float": "right", "padding": 5, "margin": 15, "fontSize": 13, }; //标记线配置 const markLine = { "type": "solid", "dashLength": 4, "data": [{ "value": 100, "lineColor": "#666", "showLabel": true, "labelFontColor": "#666", "labelBgColor": "#FFF", "labelBgOpacity": 0, "yAxisIndex": 0 }] } //事件转换函数,主要用作格式化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", "fin-area" ], "range": [], //增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype" //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories "categories": ["line", "column", "bar", "area", "radar", "mainline", "mini-line", "mini-area", "mini-column", "fin-area" ], //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 + '元' }, "tooltipScore": function(item, category, index, opts) { return category + ' ' + item.name + ': ' + item.data + ' 分 ' }, "tooltipScoreShort": function(item, category, index, opts) { return item.name + '得分率: ' + item.data + ' % ' }, "tooltipPercent": function(item, category, index, opts) { return category + ' ' + item.name + ': ' + item.data + ' % ' }, "HomeworkPercent": function(item, category, index, opts) { let value = item.data >= 50? (item.data >= 80? '优秀' : '良好') : '一般' return category + ' ' + item.name + '完成情况:' + value+ ' ' + item.data + ' % ' }, "tooltipHour": function(item, category, index, opts) { return item.name + ': ' + item.data + ' 小时 ' }, "pieMinute": function(item, category, index, opts) { return item.name + ': ' + item.data + ' 分钟 ' }, }, //这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。 //下面是自定义配置,请添加项目所需的通用配置 "line": { "type": "line", "animation": true, "timing": "easeOut", "duration": 500, "color": color, "padding": [ 0, 10, 15, 5 ], "dataLabel": false, "fontSize": 12, "xAxis": X, "yAxis": Y, "legend": legend, "extra": { "line": { "type": "curve", "width": 2 }, "tooltip": tooltip, } }, "column": { "type": "column", "animation": true, "timing": "easeOut", "duration": 500, "color": color, "padding": [ 0, 10, 15, 5 ], "dataLabel": false, "fontSize": 12, "xAxis": X, "yAxis": Y, "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": [ 0, 10, 15, 5 ], "dataLabel": false, "fontSize": 12, "xAxis": X, "yAxis": Y, "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, 0, 0, 0 ], "dataLabel": false, "dataPointShape": false, "dataPointShapeType": "hollow", "legend": { "show": true, "position": "bottom", "float": "center", }, "extra": { "rose": { "type": "radius", "minRadius": 50, "activeOpacity": 0.5, "activeRadius": 10, "offsetAngle": 0, "labelWidth": 15, "border": true, "borderWidth": 2, "borderColor": "#FFFFFF", "linearType": "none" }, "tooltip": tooltip, } }, "arcbar": { "type": "arcbar", "animation": true, "timing": "easeOut", "duration": 500, "title": { "name": "总成绩占比", "fontSize": 20, "color": "#0052d4", }, "subtitle": { "name": "年级与班级", "fontSize": 15, "color": "#666666", }, "extra": { "arcbar": { "width": 16, } } }, "radar": { "type": "radar", "animation": true, "timing": "easeOut", "duration": 500, "color": color, "padding": [ 0, 15, 10, 15 ], "fontSize": 12, "enableMarkLine": false, "dataLabel": false, "legend": { "show": true, "position": "bottom", "float": "right", "padding": 5, "margin": 5, "fontColor": "#696969", }, "extra": { "radar": { "gridType": "circle", "gridCount": 2, "opacity": 0.3, "border": true, "borderWidth": 1, }, "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, }, "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, 0, -20 ], "dataLabel": false, "dataPointShape": false, "tapLegend": false, "xAxis": { "disabled": true, "axisLine": false, "disableGrid": true, "boundaryGap": "center", }, "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, 12, 0, 12 ], "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": [ "#0052d4", "#FFFFFF", "#ff5959", "#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": [ 10, 0, 0, 0 ], "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": [ -10, 5, 5, 5 ], "dataLabel": false, "dataPointShape": false, "dataPointShapeType": "hollow", "legend": { "show": false, }, "extra": { "rose": { "type": "radius", "activeRadius": 0, "border": true, "borderWidth": 2, "borderColor": "#FFFFFF", }, "tooltip": { "showBox": false, "splitLine": false, }, }, }, "fin-area": { "type": "area", "animation": true, "timing": "easeOut", "duration": 500, "color": color, "padding": [ 10, -10, -10, -10 ], "dataLabel": false, "dataPointShape": false, "tapLegend": false, "xAxis": { "disabled": true, "axisLine": false, "disableGrid": true, }, "yAxis": { "disabled": true, "disableGrid": true, "data": [{ "min": 0, }] }, "legend": { "show": false, }, "extra": { "area": { "type": "curve", "opacity": 0.7, "addLine": true, "width": 2, "gradient": true }, "tooltip": tooltip, } }, } export default cfu;