|
- /*
- * 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];
- }
-
- module.exports = {
- //demotype为自定义图表类型,一般不需要自定义图表类型,只需要改根节点上对应的类型即可
- "type":["pie","ring","rose","word","funnel","map","arcbar","line","column","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
- "range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
- //增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype"
- //自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories
- "categories":["line","column","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.data+'天'
- }
- },
- "pieDemo":function(val, index, series){
- 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,
- "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",
- "padding": [15,5,5,5],
- "rotate": false,
- "dataLabel": true,
- "color":[ '#66AFF5', '#FABD2B', '#6F8EDC', '#FFCF8F', '#F98120', '#1CC99E', '#9474FB',
- '#657292','#7A6A99','#BF5D52','#EE6666','#77B7E4','#E6A065','#9D5139','#C1AA88','#F87F7A',
- '#F6CF74','#7F5506','#88BB9B','#6E99AA','#5789D0'
- ],
- "legend": {
- "show": true,
- "position": "bottom",
- "float": "center",
- "padding": 5,
- "margin": 5,
- "backgroundColor": "rgba(0,0,0,0)",
- "borderColor": "rgba(0,0,0,0)",
- "borderWidth": 0,
- "fontSize": 10,
- "fontColor": "#666666",
- "lineHeight": 25,
- "hiddenColor": "#CECECE",
- "itemGap": 6
- },
- "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
- }
- }
- },
-
- // enableScroll
// scrollShow
- "line":{
- "type": "line",
- "canvasId": "",
- "canvas2d": true,
- "background": "none",
- "animation": true,
- "timing": "easeOut",
- "duration": 1000,
- "color": [
- "#1890FF",
- "#91CB74",
- "#FAC858",
- "#EE6666",
- "#73C0DE",
- "#3CA272",
- "#FC8452",
- "#9A60B4",
- "#ea7ccc"
- ],
- "padding": [
- 15,
- 10,
- 0,
- 15
- ],
- "rotate": false,
- "errorReload": true,
- "fontSize": 13,
- "fontColor": "#666666",
- "enableScroll": false,
- "touchMoveLimit": 60,
- "enableMarkLine": false,
- "dataLabel": false,
- "dataPointShape": true,
- "dataPointShapeType": "solid",
- "tapLegend": true,
- "xAxis": {
- "disabled": false,
- "axisLine": true,
- "axisLineColor": "#CCCCCC",
- "calibration": false,
- "fontColor": "#666666",
- "fontSize": 13,
- "rotateLabel": false,
- // "itemCount": 3,
- 'labelCount':3,
- "boundaryGap": "center",
- "disableGrid": true,
- "gridColor": "#CCCCCC",
- "gridType": "solid",
- "dashLength": 4,
- "gridEval": 1,
- "scrollShow": false,
- "scrollAlign": "left",
- "scrollColor": "#A6A6A6",
- "scrollBackgroundColor": "#EFEBEF",
- "min": 0,
- "format": ""
- },
- "yAxis": {
- "disabled": false,
- "disableGrid": false,
- "splitNumber": 5,
- "gridType": "dash",
- "dashLength": 2,
- "gridColor": "#CCCCCC",
- "padding": 10,
- "showTitle": false,
- "min":20,
- "data": []
- },
- "legend": {
- "show": true,
- "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": {
- "line": {
- "type": "curve",
- "width": 2
- },
- "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"
- },
- "markLine": {
- "type": "solid",
- "dashLength": 4,
- "data": []
- }
- }
- },
-
-
- "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",
- "canvasId": "",
- "canvas2d": true,
- "background": "none",
- "animation": true,
- "timing": "easeOut",
- "duration": 1000,
- "color": [
- "#1890FF",
- "#91CB74",
- "#FAC858",
- "#EE6666",
- "#73C0DE",
- "#3CA272",
- "#FC8452",
- "#9A60B4",
- "#ea7ccc"
- ],
- "padding": [
- 15,
- 15,
- 0,
- 5
- ],
- "rotate": false,
- "errorReload": true,
- "fontSize": 13,
- "fontColor": "#666666",
- "enableScroll": true,
- "touchMoveLimit": 60,
- "enableMarkLine": false,
- "dataLabel": true,
- "dataPointShape": true,
- "dataPointShapeType": "solid",
- "xAxis": {
- "disabled": false,
- "axisLine": true,
- "axisLineColor": "#CCCCCC",
- "calibration": false,
- "fontColor": "#666666",
- "fontSize": 13,
- "rotateLabel": false,
- "itemCount": 7,
- "boundaryGap": "center",
- "disableGrid": true,
- "gridColor": "#CCCCCC",
- "gridType": "solid",
- "dashLength": 4,
- "gridEval": 1,
- "scrollShow": true,
- "scrollAlign": "left",
- "scrollColor": "#A6A6A6",
- "scrollBackgroundColor": "#EFEBEF"
- },
- "yAxis": {
- "disabled": false,
- "disableGrid": false,
- "splitNumber": 5,
- "gridType": "dash",
- "dashLength": 8,
- "gridColor": "#CCCCCC",
- "padding": 10,
- "showTitle": false,
- "min":0,
- "max":100,
- "data": []
- },
- "legend": {
- "show": true,
- "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": {
- "column": {
- "type": "group",
- "width": 30,
- "seriesGap": 2,
- "categoryGap": 3,
- "barBorderCircle": false,
- "linearType": "none",
- "linearOpacity": 1,
- "colorStop": 0,
- "meterBorder": 1,
- "meterFillColor": "#FFFFFF",
- "activeBgColor": "#000000",
- "activeBgOpacity": 0.08,
- "meterBorde": 1
- },
- "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"
- },
- "markLine": {
- "type": "solid",
- "dashLength": 4,
- "data": []
- }
- }
- },
-
-
- "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",
- "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": true,
- "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": 25,
- "hiddenColor": "#CECECE",
- "itemGap": 10
- },
- "extra": {
- "radar": {
- "gridType": "radar",
- "gridColor": "#CCCCCC",
- "gridCount": 3,
- "labelColor": "#666666",
- "opacity": 0.2,
- "border": false,
- "borderWidth": 2,
- "max": 200
- },
- "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"
- }
- }
- },
-
-
-
- "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,
- },
- }
- }
- }
|