@zgfe/business-lib 1.0.0-beta.2 → 1.0.0-beta.5

package/es/chart/demo/map.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/chart/demo/map.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BizChart } from '@zgfe/business-lib';
+import chartData from './data/data3';
+export default (function () {
+  return /*#__PURE__*/React.createElement(BizChart, {
+    data: chartData,
+    type: "map",
+    isCity: false,
+    useGroup: "1"
+  });
+});

package/es/chart/index.d.ts

@@ -1,18 +1,12 @@
 import React from 'react';
-interface ChartItmProps {
-    names: Array<string>;
-    values: Array<number>;
-}
-interface DataProps {
-    x_axis?: Array<string>;
-    series: Array<ChartItmProps>;
-}
+import './util/data/china.js';
+import { DataProps } from './type';
 interface BizChartProps {
     /**
      * @description     图形类型
      * @default         line
      */
-    type?: 'bar' | 'pie' | 'line';
+    type: 'bar' | 'pie' | 'line' | 'map';
     /**
      * @description     数据（x轴和series数据）
      * @default         -
@@ -23,6 +17,16 @@ interface BizChartProps {
      * @default         true
      */
     sameColor?: boolean;
+    /**
+     * @description     是否是城市
+     * @default         true
+     */
+    isCity?: boolean;
+    /**
+     * @description     用户群，以，隔开
+     * @default         -
+     */
+    userGroup?: string;
     /**
      * @description     提示格式
      * @default         -

package/es/chart/index.js

@@ -19,21 +19,25 @@ 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,
+      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,
       seriesName = props.seriesName,
       tooltipFormatter = props.tooltipFormatter,
       xAxisFormatter = props.xAxisFormatter,
@@ -62,81 +66,23 @@ 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]
-            }
-          }
-        });
-      });
-      return {
-        x_axis: x_axis,
-        series: sData
-      };
-    } else {
-      return data;
-    }
-  };
-
   useEffect(function () {
     var eOption = {};
 
     if (type === 'pie') {
-      var rData = formatPieData(data);
-      eOption = getPieConfig(rData, legendPosition, legendOrient, tooltipFormatter);
-    } else {
-      var _rData = formatChartData(data);
+      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, 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);
     }
 
-    console.log(type, ' >>> ', eOption);
     setChartOption(function () {
       return _objectSpread({}, eOption);
     });

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>;
@@ -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: {
@@ -225,9 +225,9 @@ export var getChartOption = function getChartOption(chartType, xData) {
 
 
   if (legendPosition === 'top') {
-    grid.top = series.length > 1 || reverseXAxis && seriesName ? 45 : 10;
+    grid.top = series.length > 1 || series[0].name ? 45 : 10;
   } else if (legendPosition === 'bottom') {
-    grid.bottom = series.length > 1 ? 45 : 0;
+    grid.bottom = series.length > 1 || series[0].name ? 45 : 0;
   } // 图例配置
 
 
@@ -259,7 +259,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 +305,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;
 };