diff --git a/pages/data/index.vue b/pages/data/index.vue index a11121e..76ef1e6 100644 --- a/pages/data/index.vue +++ b/pages/data/index.vue @@ -3,8 +3,12 @@ @@ -16,66 +20,6 @@ export default { chartData: {}, //这里的 opts 是图表类型 type="line" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['line'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。 opts: { - timing: "easeOut", - duration: 2000, - rotate: false, - rotateLock: false, - color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], - padding: [15,10,0,15], - fontSize: 13, - fontColor: "#666666", - dataLabel: false, - dataPointShape: false, - dataPointShapeType: "solid", - touchMoveLimit: 60, - enableScroll: true, - enableMarkLine: false, - legend: { - show: true, - 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: "#666666", - lineHeight: 11, - hiddenColor: "#CECECE", - itemGap: 10 - }, - xAxis: { - disableGrid: true, - disabled: false, - axisLine: true, - axisLineColor: "#CCCCCC", - calibration: true, - fontColor: "#666666", - fontSize: 13, - lineHeight: 20, - marginTop: 5, - rotateLabel: true, - rotateAngle: 45, - labelCount: 20, - itemCount: 300, - boundaryGap: "center", - splitNumber: 5, - gridColor: "#CCCCCC", - gridType: "solid", - dashLength: 4, - gridEval: 1, - scrollShow: true, - scrollAlign: "left", - scrollColor: "#A6A6A6", - scrollBackgroundColor: "#EFEBEF", - title: "时间", - titleFontSize: 13, - titleOffsetY: 0, - titleOffsetX: 10, - titleFontColor: "#666666", - format: "" - }, yAxis: { gridType: "dash", dashLength: 2, @@ -130,63 +74,7 @@ export default { } ] }, - extra: { - line: { - type: "straight", - width: 2, - activeType: "hollow", - linearType: "none", - onShadow: false, - animation: "vertical" - }, - 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", - boxPadding: 3, - fontSize: 13, - lineHeight: 20, - fontColor: "#FFFFFF", - legendShow: true, - legendShape: "auto", - splitLine: true, - horizentalLine: false, - xAxisLabel: false, - yAxisLabel: false, - labelBgColor: "#FFFFFF", - labelBgOpacity: 0.7, - labelFontColor: "#666666" - }, - markLine: { - type: "solid", - dashLength: 4, - data: [ - { - value: 0, - lineColor: "#DE4A42", - showLabel: false, - labelAlign: "left", - labelOffsetX: 0, - labelOffsetY: 0, - labelPadding: 6, - labelText: "", - labelFontSize: 13, - labelFontColor: "#666666", - labelBgColor: "#DFE8FF", - labelBgOpacity: 0.8 - } - ] - } - } + } }; }, diff --git a/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js b/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js index 17b28b3..9a0d57d 100644 --- a/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js +++ b/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js @@ -21,83 +21,83 @@ const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', //事件转换函数，主要用作格式化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]; + 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为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可 + //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，请在这里加入您的图表类型，例如最后的"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+'元' - } - }, - }, - //这里演示了自定义您的图表类型的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 - }, - } - }, - //下面是自定义配置，请添加项目所需的通用配置 + //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+'元' + } + }, + }, + //这里演示了自定义您的图表类型的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, + "color": color, "padding": [5,5,5,5], "extra": { "pie": { @@ -113,14 +113,14 @@ const cfu = { }, "ring":{ "type": "ring", - "color": color, + "color": color, "padding": [5,5,5,5], "rotate": false, "dataLabel": true, "legend": { "show": true, "position": "right", - "lineHeight": 25, + "lineHeight": 25, }, "title": { "name": "收益率", @@ -147,12 +147,12 @@ const cfu = { }, "rose":{ "type": "rose", - "color": color, + "color": color, "padding": [5,5,5,5], "legend": { "show": true, "position": "left", - "lineHeight": 25, + "lineHeight": 25, }, "extra": { "rose": { @@ -170,7 +170,7 @@ const cfu = { }, "word":{ "type": "word", - "color": color, + "color": color, "extra": { "word": { "type": "normal", @@ -180,7 +180,7 @@ const cfu = { }, "funnel":{ "type": "funnel", - "color": color, + "color": color, "padding": [15,15,0,15], "extra": { "funnel": { @@ -196,9 +196,9 @@ const cfu = { }, "map":{ "type": "map", - "color": color, + "color": color, "padding": [0,0,0,0], - "dataLabel": true, + "dataLabel": true, "extra": { "map": { "border": true, @@ -213,7 +213,7 @@ const cfu = { }, "arcbar":{ "type": "arcbar", - "color": color, + "color": color, "title": { "name": "百分比", "fontSize": 25, @@ -237,93 +237,192 @@ const cfu = { }, "line":{ "type": "line", - "color": color, + timing: "easeOut", + duration: 2000, + rotate: false, + rotateLock: false, + color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"], + padding: [15,10,0,15], + fontSize: 13, + fontColor: "#666666", + dataLabel: false, + dataPointShape: false, + dataPointShapeType: "solid", + touchMoveLimit: 60, + enableScroll: false, + enableMarkLine: false, + xAxis: { + disableGrid: true, + disabled: false, + axisLine: true, + axisLineColor: "#CCCCCC", + calibration: true, + fontColor: "#666666", + fontSize: 13, + lineHeight: 20, + marginTop: 10, + rotateLabel: true, + rotateAngle: 45, + labelCount: 15, + itemCount: 300, + boundaryGap: "center", + splitNumber: 5, + gridColor: "#CCCCCC", + gridType: "solid", + dashLength: 4, + gridEval: 1, + scrollShow: true, + scrollAlign: "left", + scrollColor: "#A6A6A6", + scrollBackgroundColor: "#EFEBEF", + title: "时间", + titleFontSize: 13, + titleOffsetY: 0, + titleOffsetX: 10, + titleFontColor: "#666666", + format: "" + }, + legend: { + show: true, + 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: "#666666", + lineHeight: 11, + hiddenColor: "#CECECE", + itemGap: 10 + }, + extra: { + line: { + type: "straight", + width: 2, + activeType: "hollow", + linearType: "none", + onShadow: false, + animation: "vertical" + }, + 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", + boxPadding: 3, + fontSize: 13, + lineHeight: 20, + fontColor: "#FFFFFF", + legendShow: true, + legendShape: "auto", + splitLine: true, + horizentalLine: false, + xAxisLabel: false, + yAxisLabel: false, + labelBgColor: "#FFFFFF", + labelBgOpacity: 0.7, + labelFontColor: "#666666" + }, + markLine: { + type: "solid", + dashLength: 4, + data: [ + { + value: 0, + lineColor: "#DE4A42", + showLabel: false, + labelAlign: "left", + labelOffsetX: 0, + labelOffsetY: 0, + labelPadding: 6, + labelText: "", + labelFontSize: 13, + labelFontColor: "#666666", + labelBgColor: "#DFE8FF", + labelBgOpacity: 0.8 + } + ] + } + } + }, + "tline":{ + "type": "line", + "color": color, "padding": [15,10,0,15], "xAxis": { - "disableGrid": true, + "disableGrid": false, + "boundaryGap":"justify", }, "yAxis": { - "gridType": "dash", - "dashLength": 2, + "gridType": "dash", + "dashLength": 2, + "data":[ + { + "min":0, + "max":80 + } + ] }, "legend": { }, "extra": { "line": { - "type": "straight", + "type": "curve", "width": 2, - "activeType": "hollow" + "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], + "tarea":{ + "type": "area", + "color": color, + "padding": [15,10,0,15], "xAxis": { - "disableGrid": true, + "disableGrid": true, + "boundaryGap":"justify", }, "yAxis": { - "data":[{"min":0}] + "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": { }, @@ -336,60 +435,60 @@ const cfu = { }, } }, - "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 - }, - } - }, + "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, + "disableGrid": true, }, "yAxis": { - "gridType": "dash", - "dashLength": 2, + "gridType": "dash", + "dashLength": 2, }, "legend": { }, @@ -400,7 +499,7 @@ const cfu = { "addLine": true, "width": 2, "gradient": false, - "activeType": "hollow" + "activeType": "hollow" }, } }, @@ -408,11 +507,11 @@ const cfu = { "type": "radar", "color": color, "padding": [5,5,5,5], - "dataLabel": false, + "dataLabel": false, "legend": { "show": true, "position": "right", - "lineHeight": 25, + "lineHeight": 25, }, "extra": { "radar": { @@ -526,7 +625,7 @@ const cfu = { "color": color, "padding": [15,15,0,15], "xAxis": { - "disableGrid": true, + "disableGrid": true, }, "yAxis": { "disabled": false, @@ -553,53 +652,53 @@ const cfu = { "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": { - }, - } + "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, - }, - } + "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, + }, + } } }