@zgfe/business-lib 1.0.0-beta.1 → 1.0.0-beta.4

package/es/chart/index.d.ts

@@ -1,33 +1,32 @@
 import React from 'react';
-interface ChartItmProps {
-    name?: string;
-    data?: Array<string | number | object>;
-}
-interface DataProps {
-    xData?: Array<string>;
-    seriesData: Array<ChartItmProps>;
-}
+import './util/data/china.js';
+import { DataProps } from './type';
 interface BizChartProps {
-    /**
-     * @description     自定义图表配置
-     * @default         -
-     */
-    option?: any;
     /**
      * @description     图形类型
      * @default         line
      */
-    type?: 'bar' | 'pie' | 'line';
+    type: 'bar' | 'pie' | 'line' | 'map';
     /**
      * @description     数据（x轴和series数据）
      * @default         -
      */
-    data?: DataProps;
+    data: DataProps;
     /**
      * @description     柱图是同色还是一柱一色（仅对柱图单一系列作用）
      * @default         true
      */
     sameColor?: boolean;
+    /**
+     * @description     是否是城市
+     * @default         true
+     */
+    isCity?: boolean;
+    /**
+     * @description     用户群，以，隔开
+     * @default         -
+     */
+    userGroup?: string;
     /**
      * @description     提示格式
      * @default         -
@@ -52,12 +51,33 @@ interface BizChartProps {
      * @description     图例位置
      * @default         -
      */
-    legendPosition: 'top' | 'bottom' | 'middle';
+    legendPosition?: 'top' | 'bottom' | 'middle';
     /**
      * @description     图例布局朝向
      * @default         -
      */
-    legendOrient: 'horizontal' | 'vertical';
+    legendOrient?: 'horizontal' | 'vertical';
+    /**
+     * @description 显示数据项（从store中过滤），对应series中的names字段。如果没传的话，默认会展示前10条记录
+     * @abstract  [['group', 'item1'], ['group', 'item2']]或['item1', 'item2']
+     * @default     -
+     */
+    showList?: Array<any>;
+    /**
+     * @description 默认展示showList指定的条目或者前10条记录，并生成"其它"记录。showAll置为true后，将强制在饼图上展示所有记录
+     * @default     true
+     */
+    showAll?: boolean;
+    /**
+     * @description 是否将series中每项数据的names转为新的x轴
+     * @tip 目前只有柱状图时有效
+     * @default   false
+     */
+    reverseXAxis?: boolean;
+    /**
+     * @description reverseXAxis为true时，该项是图例名称
+     */
+    seriesName?: string;
 }
 declare const BizChart: React.FC<BizChartProps>;
 export default BizChart;

package/es/chart/index.js

@@ -16,18 +16,29 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts';
-import { getChartOption } 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';
 
 var BizChart = function BizChart(props) {
-  var _props$type = props.type,
-      type = _props$type === void 0 ? 'line' : _props$type,
-      option = props.option,
+  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,
       yAxisFormatter = props.yAxisFormatter,
@@ -40,30 +51,42 @@ var BizChart = function BizChart(props) {
       chartOption = _useState2[0],
       setChartOption = _useState2[1];
 
-  useEffect(function () {
-    var eOption = getChartOption(type, data === null || data === void 0 ? void 0 : data.xData, data === null || data === void 0 ? void 0 : data.seriesData, sameColor, legendPosition, legendOrient);
-
-    if (tooltipFormatter) {
-      eOption.tooltip.formatter = tooltipFormatter;
-    }
-
-    if (xAxisFormatter) {
-      eOption.xAxis.axisLabel.formatter = xAxisFormatter;
+  var showMap = useMemo(function () {
+    var data = {};
+
+    if (showList) {
+      showList.forEach(function (item) {
+        if (util.isArray(item)) {
+          data[item.join('-')] = true;
+        } else if (util.isString(item)) {
+          data[item] = true;
+        }
+      });
     }
 
-    if (yAxisFormatter) {
-      eOption.yAxis.axisLabel.formatter = yAxisFormatter;
-    }
-
-    if (valueUnit) {
-      eOption.yAxis.name = valueUnit;
+    return data;
+  }, [showList]);
+  useEffect(function () {
+    var eOption = {};
+
+    if (type === 'pie') {
+      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('option>>>', eOption);
     setChartOption(function () {
       return _objectSpread({}, eOption);
     });
-  }, [data, type]);
+  }, [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/util/chartConfig.d.ts

@@ -0,0 +1,108 @@
+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';
+export declare const baseConfig: EChartsOption;
+export declare const seriesConfig: any;
+export declare type EChartsOption = echarts.ComposeOption<TitleComponentOption | ToolboxComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | LineSeriesOption | BarSeriesOption | PieSeriesOption>;
+export declare const legendConfig: LegendComponentOption;
+export declare const gridConfig: {
+    left: number;
+    right: string;
+    bottom: number;
+    top: number;
+    containLabel: boolean;
+};
+export declare const xAxisConfig: XAXisOption;
+export declare const yAxisConfig: YAXisOption;
+export declare const tooltipConfig: TooltipComponentOption;
+/**
+ *  折现/柱图
+ * @param xData x轴数据 []
+ * @param seriesData 系列数据 [{name:'系列名称',data:[数据]}]
+ * @param chartType 图表类型
+ * @param seriesType 系列类型（单选列柱图是单个颜色还是一个柱一个颜色）
+ * @param legendPosition 图例位置
+ * @param legendOrient   图例方向
+ * @param unit    y轴单位
+ * @param tooltipFormatter   tooltip 自定义显示
+ * @param xAxisFormatter   x轴 自定义显示
+ * @param yAxisFormatter   y轴 自定义显示
+ * @param reverseXAxis  柱图单系列
+ * @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;
+/**
+ * 饼图配置
+ * @param seriesData 数据  [{name:'',value:''}]
+ * @param legendPosition 图例位置
+ * @param legendOrient   图例方向
+ * @param tooltipFormatter   tooltip 自定义显示
+ * @returns
+ */
+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/util/chartConfig.js

@@ -0,0 +1,379 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 '../index.less';
+export var baseConfig = {
+  color: chartColors,
+  textStyle: {
+    color: '#5F6085'
+  },
+  toolbox: {
+    show: false
+  }
+};
+export var seriesConfig = {
+  symbol: 'circle',
+  symbolSize: 5
+};
+export var legendConfig = {
+  type: 'scroll',
+  height: 17,
+  padding: 0,
+  itemHeight: 10,
+  itemWidth: 10,
+  lineStyle: {
+    opacity: 0
+  },
+  textStyle: {
+    color: '#5F6085',
+    lineHeight: 17
+  },
+  pageIconSize: 10,
+  pageTextStyle: {
+    color: '#5F6085'
+  }
+};
+export var gridConfig = {
+  left: 0,
+  right: '3%',
+  bottom: 0,
+  top: 24,
+  containLabel: true
+};
+export var xAxisConfig = {
+  axisLine: {
+    lineStyle: {
+      color: '#ECEDF0',
+      width: 1
+    }
+  },
+  axisTick: {
+    lineStyle: {
+      color: '#ECEDF0'
+    }
+  },
+  nameTextStyle: {
+    lineHeight: 30
+  },
+  // boundaryGap: false,
+  axisLabel: {
+    formatter: function formatter(value) {
+      return value;
+    }
+  }
+};
+export var yAxisConfig = {
+  type: 'value',
+  splitLine: {
+    lineStyle: {
+      type: 'dashed'
+    }
+  },
+  axisLabel: {
+    formatter: function formatter(value) {
+      return String(value);
+    }
+  }
+};
+export var tooltipConfig = {
+  trigger: 'axis',
+  confine: false,
+  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',
+  appendToBody: true,
+  axisPointer: {
+    type: 'shadow',
+    z: 0,
+    shadowStyle: {
+      color: '#f6f6f6'
+    }
+  }
+};
+/**
+ *  折现/柱图
+ * @param xData x轴数据 []
+ * @param seriesData 系列数据 [{name:'系列名称',data:[数据]}]
+ * @param chartType 图表类型
+ * @param seriesType 系列类型（单选列柱图是单个颜色还是一个柱一个颜色）
+ * @param legendPosition 图例位置
+ * @param legendOrient   图例方向
+ * @param unit    y轴单位
+ * @param tooltipFormatter   tooltip 自定义显示
+ * @param xAxisFormatter   x轴 自定义显示
+ * @param yAxisFormatter   y轴 自定义显示
+ * @param reverseXAxis  柱图单系列
+ * @param seriesName  系列名称
+ *
+ */
+
+export var getChartOption = function getChartOption(chartType, xData) {
+  var seriesData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var sameColor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  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 xAxis = JSON.parse(JSON.stringify(xAxisConfig)),
+      tooltip = JSON.parse(JSON.stringify(tooltipConfig)),
+      yAxis = _objectSpread({}, yAxisConfig),
+      legend = _objectSpread({}, legendConfig),
+      grid = _objectSpread({}, gridConfig),
+      seriesItem = _objectSpread({}, seriesConfig); // x轴配置
+
+
+  if (xData) {
+    xAxis.data = xData;
+  }
+
+  xAxis.boundaryGap = chartType === 'bar';
+  xAxis.axisLabel = xAxis.axisLabel || {
+    rotate: 0
+  };
+  xAxis.axisLabel.rotate = chartType === 'bar' ? 45 : 0;
+
+  if (xAxisFormatter) {
+    xAxis.axisLabel.formatter = xAxisFormatter;
+  } else {
+    xAxis.axisLabel.formatter = xAxisFormatterDefault;
+  } //Y轴配置
+
+
+  yAxis.axisLabel = yAxis.axisLabel || {};
+
+  if (yAxisFormatter) {
+    yAxis.axisLabel.formatter = yAxisFormatter;
+  } else {
+    yAxis.axisLabel.formatter = yAxisFormatterDefault;
+  }
+
+  if (unit) {
+    yAxis.name = unit;
+  } // series配置
+
+
+  var itemStyle = {
+    color: sameColor ? 'auto' : function (param) {
+      return chartColors[param.dataIndex % 20];
+    }
+  };
+  var series = [];
+
+  if (chartType === 'bar') {
+    seriesItem.barMaxWidth = 40;
+  }
+
+  if (!reverseXAxis) {
+    series = seriesData.map(function (item) {
+      var data = _objectSpread({}, item);
+
+      if (item.names) {
+        data = {
+          name: item.names.join('-'),
+          data: item.values
+        };
+      }
+
+      return _objectSpread(_objectSpread(_objectSpread({}, data), seriesItem), {}, {
+        itemStyle: itemStyle,
+        type: chartType
+      });
+    });
+  } else {
+    series = [_objectSpread(_objectSpread({
+      name: seriesName || '',
+      data: _toConsumableArray(seriesData)
+    }, seriesItem), {}, {
+      itemStyle: itemStyle,
+      type: chartType
+    })];
+  } // tooltip config
+
+
+  tooltip.axisPointer = tooltip.axisPointer || {};
+  tooltip.axisPointer.type = chartType === 'bar' ? 'shadow' : 'line';
+
+  if (tooltipFormatter) {
+    tooltip.formatter = tooltipFormatter;
+  } else {
+    tooltip.formatter = tooltipFormatterDefault;
+  } // grid config
+
+
+  if (legendPosition === 'top') {
+    grid.top = series.length > 1 || series[0].name ? 45 : 10;
+  } else if (legendPosition === 'bottom') {
+    grid.bottom = series.length > 1 || series[0].name ? 45 : 0;
+  } // 图例配置
+
+
+  legend.top = legendPosition;
+  legend.orient = legendOrient;
+
+  if (legendOrient === 'vertical') {
+    legend.left = 'left';
+    legend.height = 'auto';
+    legend.width = 50;
+    grid.left = 80;
+  }
+
+  return _objectSpread(_objectSpread({}, baseConfig), {}, {
+    legend: legend,
+    xAxis: xAxis,
+    yAxis: yAxis,
+    tooltip: tooltip,
+    grid: grid,
+    series: series
+  });
+};
+/**
+ * 饼图配置
+ * @param seriesData 数据  [{name:'',value:''}]
+ * @param legendPosition 图例位置
+ * @param legendOrient   图例方向
+ * @param tooltipFormatter   tooltip 自定义显示
+ * @returns
+ */
+
+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';
+  var tooltipFormatter = arguments.length > 3 ? arguments[3] : undefined;
+  var series = [{
+    type: 'pie',
+    data: seriesData,
+    label: {
+      show: false
+    }
+  }];
+
+  var tooltip = JSON.parse(JSON.stringify(tooltipConfig)),
+      legend = _objectSpread({}, legendConfig),
+      grid = _objectSpread({}, gridConfig);
+
+  legend.top = legendPosition;
+  legend.orient = legendOrient;
+
+  if (legendOrient === 'vertical') {
+    legend.left = 'left';
+    legend.height = 'auto';
+    legend.width = 50;
+    grid.left = 80;
+  }
+
+  tooltip.trigger = 'item';
+
+  if (tooltipFormatter) {
+    tooltip.formatter = tooltipFormatter;
+  } else {
+    tooltip.formatter = function (params) {
+      var name = params.name,
+          value = params.value,
+          marker = params.marker;
+      return "<div class=\"biz-chart-tooltip-item\"><span class=\"biz-chart-tooltip-content\">".concat(marker).concat(name, ":</span> <span class=\"biz-chart-tooltip-value\">").concat(value, "</span></div>");
+    };
+  }
+
+  return _objectSpread(_objectSpread({}, baseConfig), {}, {
+    legend: legend,
+    tooltip: tooltip,
+    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;
+};