@zgfe/business-lib 1.0.0-beta.3 → 1.0.0-beta.6

package/es/chart/index.js

@@ -19,21 +19,30 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useEffect, useMemo, useState } from 'react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts';
-import { getChartOption, getPieConfig } from './chartConfig';
+import { getChartOption, getPieOption, getMapOption } from './util/chartConfig';
+import { provinceSeries, citySeries, maxMinValue } from './util/mapUtil';
+import { formatPieData, formatChartData } from './util/formatData';
+import './util/data/china.js';
 import util from '../utils/util';
-import { chartColors } from './color';
 
 var BizChart = function BizChart(props) {
-  var _props$type = props.type,
-      type = _props$type === void 0 ? 'line' : _props$type,
+  var type = props.type,
       data = props.data,
       showList = props.showList,
+      option = props.option,
+      userGroup = props.userGroup,
       _props$showAll = props.showAll,
       showAll = _props$showAll === void 0 ? true : _props$showAll,
       _props$sameColor = props.sameColor,
       sameColor = _props$sameColor === void 0 ? true : _props$sameColor,
       _props$reverseXAxis = props.reverseXAxis,
       reverseXAxis = _props$reverseXAxis === void 0 ? false : _props$reverseXAxis,
+      _props$isCity = props.isCity,
+      isCity = _props$isCity === void 0 ? true : _props$isCity,
+      _props$xRotate = props.xRotate,
+      xRotate = _props$xRotate === void 0 ? 0 : _props$xRotate,
+      _props$yRotate = props.yRotate,
+      yRotate = _props$yRotate === void 0 ? 0 : _props$yRotate,
       seriesName = props.seriesName,
       tooltipFormatter = props.tooltipFormatter,
       xAxisFormatter = props.xAxisFormatter,
@@ -62,84 +71,34 @@ var BizChart = function BizChart(props) {
 
     return data;
   }, [showList]);
-
-  var formatPieData = function formatPieData(data) {
-    var list = [];
-    var other = {
-      name: '其它',
-      value: 0
-    };
-    data.series.forEach(function (item) {
-      var series = {
-        name: item.names.join('-'),
-        value: item.values[0]
-      };
-
-      if (showAll) {
-        list.push(series);
-      } else {
-        if (showList && showMap[series.name] || !showList && list.length < 10) {
-          // 数据被showList命中，或者没定义showList，但位于前十的记录
-          list.push(series);
-        } else {
-          other.value += item.values[0];
-        }
-      }
-    });
-    if (!showAll && other.value > 0) list.push(other);
-    return list;
-  };
-
-  var formatChartData = function formatChartData(data) {
-    if (reverseXAxis) {
-      var series = {
-        names: [seriesName || ''],
-        values: []
-      };
-      var x_axis = [];
-      var sData = [];
-      data.series.forEach(function (seriesItem, index) {
-        x_axis.push(seriesItem.names.join('-'));
-
-        if (reverseXAxis && showList && !showMap[data.series[index].names.join('-')]) {
-          return;
-        }
-
-        sData.push({
-          name: x_axis[index],
-          value: seriesItem.values[0],
-          itemStyle: {
-            normal: {
-              color: chartColors[sData.length]
-            }
-          }
-        });
+  useEffect(function () {
+    if (option) {
+      setChartOption(function () {
+        return _objectSpread({}, option);
       });
-      return {
-        x_axis: x_axis,
-        series: sData
-      };
-    } else {
-      return data;
+      return;
     }
-  };
 
-  useEffect(function () {
     var eOption = {};
 
     if (type === 'pie') {
-      var rData = formatPieData(data);
-      eOption = getPieConfig(rData, legendPosition, legendOrient, tooltipFormatter);
-    } else {
-      var _rData = formatChartData(data);
-
-      eOption = getChartOption(type, reverseXAxis && showList ? showList : _rData.x_axis, _rData.series, sameColor, legendPosition, legendOrient, valueUnit, tooltipFormatter, xAxisFormatter, yAxisFormatter, reverseXAxis, seriesName);
+      var rData = formatPieData(data, showAll, showMap, showList);
+      eOption = getPieOption(rData, legendPosition, legendOrient, tooltipFormatter);
+    } else if (type === 'line' || type === 'bar') {
+      var _rData = formatChartData(data, reverseXAxis, showMap, showList);
+
+      eOption = getChartOption(type, reverseXAxis && showList ? showList : _rData.x_axis, _rData.series, sameColor, legendPosition, legendOrient, valueUnit, xRotate, yRotate, tooltipFormatter, xAxisFormatter, yAxisFormatter, reverseXAxis, seriesName);
+    } else if (type === 'map') {
+      var series = isCity ? citySeries(data, !!userGroup) : provinceSeries(data, !!userGroup);
+      var maxMin = maxMinValue(series[0]);
+      var showVisualMap = !(userGroup && userGroup.split(',').length > 1);
+      eOption = getMapOption(series, maxMin, showVisualMap, tooltipFormatter);
     }
 
     setChartOption(function () {
       return _objectSpread({}, eOption);
     });
-  }, [data, type, reverseXAxis]);
+  }, [option, data, type, reverseXAxis]);
   return /*#__PURE__*/React.createElement(ReactEChartsCore, {
     echarts: echarts,
     option: chartOption,

package/es/chart/type.d.ts

@@ -0,0 +1,22 @@
+export interface ChartItmProps {
+    names: Array<string>;
+    values: Array<number>;
+    userGroupCompareData?: object;
+}
+export interface DataProps {
+    x_axis: Array<string>;
+    series: Array<ChartItmProps>;
+}
+export interface ItemDataProps {
+    data: Array<object>;
+    [prop: string]: any;
+}
+export interface ProvinceDataProps {
+    name: string;
+    value: number;
+    childrenOptions: Array<any>;
+    isProvince?: boolean;
+}
+export interface ProvinceMapDataProps {
+    [prop: string]: ProvinceDataProps;
+}

package/es/chart/type.js

@@ -0,0 +1 @@
+export {};

package/es/chart/{chartConfig.d.ts → util/chartConfig.d.ts}

@@ -1,6 +1,6 @@
 import { GridComponentOption, TitleComponentOption, TooltipComponentOption } from 'echarts/types/dist/echarts';
 import { BarSeriesOption, LegendComponentOption, LineSeriesOption, PieSeriesOption, ToolboxComponentOption, XAXisOption, YAXisOption } from 'echarts/types/dist/shared';
-import './index.less';
+import '../index.less';
 export declare const baseConfig: EChartsOption;
 export declare const seriesConfig: any;
 export declare type EChartsOption = echarts.ComposeOption<TitleComponentOption | ToolboxComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | LineSeriesOption | BarSeriesOption | PieSeriesOption>;
@@ -31,7 +31,7 @@ export declare const tooltipConfig: TooltipComponentOption;
  * @param seriesName  系列名称
  *
  */
-export declare const getChartOption: (chartType: string, xData?: string[] | undefined, seriesData?: object[], sameColor?: boolean, legendPosition?: 'top' | 'bottom' | 'middle', legendOrient?: 'horizontal' | 'vertical', unit?: string | undefined, tooltipFormatter?: ((value: any) => string) | undefined, xAxisFormatter?: ((value: any) => string) | undefined, yAxisFormatter?: ((value: any) => string) | undefined, reverseXAxis?: boolean | undefined, seriesName?: string | undefined) => EChartsOption;
+export declare const getChartOption: (chartType: string, xData?: string[] | undefined, seriesData?: object[], sameColor?: boolean, legendPosition?: 'top' | 'bottom' | 'middle', legendOrient?: 'horizontal' | 'vertical', unit?: string | undefined, xRotate?: number, yRotate?: number, tooltipFormatter?: ((value: any) => string) | undefined, xAxisFormatter?: ((value: any) => string) | undefined, yAxisFormatter?: ((value: any) => string) | undefined, reverseXAxis?: boolean | undefined, seriesName?: string | undefined) => EChartsOption;
 /**
  * 饼图配置
  * @param seriesData 数据  [{name:'',value:''}]
@@ -40,4 +40,69 @@ export declare const getChartOption: (chartType: string, xData?: string[] | unde
  * @param tooltipFormatter   tooltip 自定义显示
  * @returns
  */
-export declare const getPieConfig: (seriesData?: object[], legendPosition?: 'top' | 'bottom' | 'middle', legendOrient?: 'horizontal' | 'vertical', tooltipFormatter?: ((value: any) => string) | undefined) => EChartsOption;
+export declare const getPieOption: (seriesData?: object[], legendPosition?: 'top' | 'bottom' | 'middle', legendOrient?: 'horizontal' | 'vertical', tooltipFormatter?: ((value: any) => string) | undefined) => EChartsOption;
+/**
+ * 地图
+ * @param seriesData 数据
+ * @param maxMinValue 最大最小值
+ * @param showVisualMap 是否显示
+ * @param tooltipFormat 提示formatter
+ * @returns option
+ */
+export declare const getMapOption: (seriesData: object[] | undefined, maxMinValue: {
+    min: number;
+    max: number;
+}, showVisualMap?: boolean, tooltipFormat?: ((value: any) => string) | undefined) => {
+    geo: {
+        map: string;
+        roam: boolean;
+        layoutCenter: string[];
+        top: number;
+        bottom: number;
+    };
+    backgroundColor: string;
+    tooltip: {
+        trigger: string;
+        textStyle: {
+            fontSize: number;
+        };
+        backgroundColor: string;
+        borderColor: string;
+        padding: number;
+        extraCssText: string;
+        className: string;
+        confine: boolean;
+        formatter: (params: any) => string | undefined;
+    };
+    legend: {
+        show: boolean;
+    };
+    visualMap: {
+        type: string;
+        min: number;
+        max: number;
+        left: string;
+        top: string;
+        text: string[];
+        realtime: boolean;
+        calculable: boolean;
+        seriesIndex: number;
+        inRange: {
+            color: string[];
+        };
+        show: boolean;
+    };
+    toolbox: {
+        show: boolean;
+        orient: string;
+        right: string;
+        bottom: string;
+        feature: {
+            saveAsImage: {
+                show: boolean;
+                title: string;
+            };
+        };
+    };
+    series: object[];
+};

package/es/chart/{chartConfig.js → util/chartConfig.js}

@@ -16,9 +16,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import { tooltipFormatterDefault, xAxisFormatterDefault, yAxisFormatterDefault, mapTooltipFormatter } from './formatOption';
 import { chartColors } from './color';
-import { tooltipFormatterDefault, xAxisFormatterDefault, yAxisFormatterDefault } from './util/format';
-import './index.less';
+import '../index.less';
 export var baseConfig = {
   color: chartColors,
   textStyle: {
@@ -132,11 +132,13 @@ export var getChartOption = function getChartOption(chartType, xData) {
   var legendPosition = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'top';
   var legendOrient = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'horizontal';
   var unit = arguments.length > 6 ? arguments[6] : undefined;
-  var tooltipFormatter = arguments.length > 7 ? arguments[7] : undefined;
-  var xAxisFormatter = arguments.length > 8 ? arguments[8] : undefined;
-  var yAxisFormatter = arguments.length > 9 ? arguments[9] : undefined;
-  var reverseXAxis = arguments.length > 10 ? arguments[10] : undefined;
-  var seriesName = arguments.length > 11 ? arguments[11] : undefined;
+  var xRotate = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 0;
+  var yRotate = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 0;
+  var tooltipFormatter = arguments.length > 9 ? arguments[9] : undefined;
+  var xAxisFormatter = arguments.length > 10 ? arguments[10] : undefined;
+  var yAxisFormatter = arguments.length > 11 ? arguments[11] : undefined;
+  var reverseXAxis = arguments.length > 12 ? arguments[12] : undefined;
+  var seriesName = arguments.length > 13 ? arguments[13] : undefined;
 
   var xAxis = JSON.parse(JSON.stringify(xAxisConfig)),
       tooltip = JSON.parse(JSON.stringify(tooltipConfig)),
@@ -154,7 +156,7 @@ export var getChartOption = function getChartOption(chartType, xData) {
   xAxis.axisLabel = xAxis.axisLabel || {
     rotate: 0
   };
-  xAxis.axisLabel.rotate = chartType === 'bar' ? 45 : 0;
+  xAxis.axisLabel.rotate = xRotate;
 
   if (xAxisFormatter) {
     xAxis.axisLabel.formatter = xAxisFormatter;
@@ -164,6 +166,7 @@ export var getChartOption = function getChartOption(chartType, xData) {
 
 
   yAxis.axisLabel = yAxis.axisLabel || {};
+  yAxis.axisLabel.rotate = yRotate;
 
   if (yAxisFormatter) {
     yAxis.axisLabel.formatter = yAxisFormatter;
@@ -225,9 +228,9 @@ export var getChartOption = function getChartOption(chartType, xData) {
 
 
   if (legendPosition === 'top') {
-    grid.top = series.length > 1 || series[0].name ? 45 : 10;
+    grid.top = series.length > 1 || series.length > 0 && series[0].name ? 45 : 10;
   } else if (legendPosition === 'bottom') {
-    grid.bottom = series.length > 1 || series[0].name ? 45 : 0;
+    grid.bottom = series.length > 1 || series.length > 0 && series[0].name ? 45 : 0;
   } // 图例配置
 
 
@@ -259,7 +262,7 @@ export var getChartOption = function getChartOption(chartType, xData) {
  * @returns
  */
 
-export var getPieConfig = function getPieConfig() {
+export var getPieOption = function getPieOption() {
   var seriesData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var legendPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
   var legendOrient = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'horizontal';
@@ -305,4 +308,75 @@ export var getPieConfig = function getPieConfig() {
     grid: grid,
     series: series
   });
+};
+/**
+ * 地图
+ * @param seriesData 数据
+ * @param maxMinValue 最大最小值
+ * @param showVisualMap 是否显示
+ * @param tooltipFormat 提示formatter
+ * @returns option
+ */
+
+export var getMapOption = function getMapOption() {
+  var seriesData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var maxMinValue = arguments.length > 1 ? arguments[1] : undefined;
+  var showVisualMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var tooltipFormat = arguments.length > 3 ? arguments[3] : undefined;
+  var option = {
+    geo: {
+      map: 'china',
+      roam: false,
+      layoutCenter: ['30%', '30%'],
+      top: 20,
+      bottom: 20
+    },
+    backgroundColor: '#fff',
+    tooltip: {
+      trigger: 'item',
+      textStyle: {
+        fontSize: 12
+      },
+      backgroundColor: 'rgba(250, 251, 253, 0.8)',
+      borderColor: 'transparent',
+      padding: 8,
+      extraCssText: '0px 4px 10px rgba(0, 0, 0, 0.1)',
+      className: 'biz-chart-tooltip',
+      confine: true,
+      formatter: tooltipFormat || mapTooltipFormatter
+    },
+    legend: {
+      show: false
+    },
+    visualMap: {
+      type: 'continuous',
+      min: maxMinValue.min,
+      max: maxMinValue.max,
+      left: 'left',
+      top: 'bottom',
+      text: ['高', '低'],
+      realtime: true,
+      calculable: true,
+      seriesIndex: 0,
+      inRange: {
+        color: ['lightskyblue', 'yellow', 'orangered']
+      },
+      show: showVisualMap // 用户群对比不支持
+
+    },
+    toolbox: {
+      show: true,
+      orient: 'horizontal',
+      right: '20',
+      bottom: '20',
+      feature: {
+        saveAsImage: {
+          show: true,
+          title: '保存为图片'
+        }
+      }
+    },
+    series: seriesData
+  };
+  return option;
 };