项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,606 @@
/*
 * 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","mount","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","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
       },
    }
  },
  //下面是自定义配置，请添加项目所需的通用配置
   "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",
    "color": color,
      "padding": [5,5,5,5],
      "rotate": false,
      "dataLabel": true,
      "legend": {
         "show": true,
         "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,
        "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],
      "xAxis": {
      "disableGrid": true,
      },
      "yAxis": {
      "data":[{"min":0}]
      },
      "legend": {
      },
      "extra": {
         "column": {
            "type": "group",
            "width": 30,
            "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,
      },
      "yAxis": {
      "gridType": "dash",
      "dashLength": 2,
      },
      "legend": {
      },
      "extra": {
         "area": {
            "type": "straight",
            "opacity": 0.2,
            "addLine": true,
            "width": 2,
            "gradient": false,
        "activeType": "hollow"
         },
      }
   },
   "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,
            "labelShow": true
         },
      }
   },
   "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,
       },
    }
   }
}

export default cfu;