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

package/es/chart/index.js

@@ -16,14 +16,13 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts';
-import { getChartOption, getPieOption, getMapOption } from './util/chartConfig';
+import { getChartOption, getPieOption, getMapOption } from './util/chartOptionConfig';
 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 type = props.type,
@@ -31,22 +30,17 @@ var BizChart = function BizChart(props) {
       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,
+      showAll = props.showAll,
+      reverseXAxis = props.reverseXAxis,
+      isCity = props.isCity,
+      xRotate = props.xRotate,
+      yRotate = props.yRotate,
       seriesName = props.seriesName,
+      colors = props.colors,
       tooltipFormatter = props.tooltipFormatter,
       xAxisFormatter = props.xAxisFormatter,
       yAxisFormatter = props.yAxisFormatter,
+      legendFormatter = props.legendFormatter,
       valueUnit = props.valueUnit,
       legendPosition = props.legendPosition,
       legendOrient = props.legendOrient;
@@ -56,21 +50,6 @@ var BizChart = function BizChart(props) {
       chartOption = _useState2[0],
       setChartOption = _useState2[1];
 
-  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;
-        }
-      });
-    }
-
-    return data;
-  }, [showList]);
   useEffect(function () {
     if (option) {
       setChartOption(function () {
@@ -82,12 +61,12 @@ var BizChart = function BizChart(props) {
     var eOption = {};
 
     if (type === 'pie') {
-      var rData = formatPieData(data, showAll, showMap, showList);
+      var rData = formatPieData(data, showAll, showList);
       eOption = getPieOption(rData, legendPosition, legendOrient, tooltipFormatter);
     } else if (type === 'line' || type === 'bar') {
-      var _rData = formatChartData(data, reverseXAxis, showMap, showList);
+      var _rData = formatChartData(data, showAll, showList, reverseXAxis, colors);
 
-      eOption = getChartOption(type, reverseXAxis && showList ? showList : _rData.x_axis, _rData.series, sameColor, legendPosition, legendOrient, valueUnit, xRotate, yRotate, tooltipFormatter, xAxisFormatter, yAxisFormatter, reverseXAxis, seriesName);
+      eOption = getChartOption(type, _rData, legendPosition, legendOrient, valueUnit, xRotate, yRotate, tooltipFormatter, xAxisFormatter, yAxisFormatter, legendFormatter, reverseXAxis, seriesName);
     } else if (type === 'map') {
       var series = isCity ? citySeries(data, !!userGroup) : provinceSeries(data, !!userGroup);
       var maxMin = maxMinValue(series[0]);
@@ -95,17 +74,31 @@ var BizChart = function BizChart(props) {
       eOption = getMapOption(series, maxMin, showVisualMap, tooltipFormatter);
     }
 
+    if (colors) {
+      eOption.color = colors;
+    }
+
     setChartOption(function () {
       return _objectSpread({}, eOption);
     });
-  }, [option, data, type, reverseXAxis]);
+  }, [data, showAll, showList, reverseXAxis]);
   return /*#__PURE__*/React.createElement(ReactEChartsCore, {
     echarts: echarts,
     option: chartOption,
     notMerge: true,
     lazyUpdate: true,
-    theme: 'theme_name'
+    theme: 'theme_name',
+    style: {
+      width: '100%'
+    }
   });
 };
 
+BizChart.defaultProps = {
+  showAll: false,
+  reverseXAxis: false,
+  isCity: true,
+  xRotate: 0,
+  yRotate: 0
+};
 export default BizChart;

package/es/chart/styles/index.less

@@ -0,0 +1,50 @@
+@import '../../assets/styles/variable.less';
+
+.biz-chart-tooltip {
+  padding: @padding-xs;
+  background-color: 'rgba(250, 251, 253, 0.8)';
+  border-color: 'transparent';
+  backdrop-filter: blur(4px);
+
+  .biz-chart-tooltip-title {
+    margin-bottom: @margin-xss;
+    color: @text-color;
+    font-weight: 600;
+    font-size: @font-size-sm;
+    line-height: 17px;
+  }
+
+  .biz-chart-tooltip-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: @height-sm;
+    padding: 0px @padding-xs;
+    font-size: @font-size-sm;
+    background: @white;
+    border-radius: @border-radius-small;
+    box-shadow: @box-shadow-small;
+
+    &:not(:last-child) {
+      margin-bottom: @margin-xss;
+    }
+
+    .biz-chart-tooltip-content {
+      color: @text-color-secondary;
+
+      .biz-tooltip-marker {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        margin-right: @margin-xs;
+        border-radius: 50%;
+      }
+    }
+
+    .biz-chart-tooltip-value {
+      margin-left: @margin-xs;
+      color: @text-color;
+      font-weight: 500;
+    }
+  }
+}

package/es/chart/types.d.ts

@@ -0,0 +1,46 @@
+import { EChartsOption } from 'echarts';
+export interface ChartItmProps {
+    names: Array<string>;
+    values: Array<number>;
+    userGroupCompareData?: object;
+}
+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;
+}
+export declare namespace ChartTypes {
+    interface Value {
+        x_axis: Array<string>;
+        series: Array<ChartItmProps>;
+    }
+    interface Props {
+        type: 'bar' | 'pie' | 'line' | 'map';
+        data: Value;
+        option?: EChartsOption;
+        isCity?: boolean;
+        userGroup?: string;
+        colors?: string[];
+        tooltipFormatter?: (param: any) => string;
+        xAxisFormatter?: (param: any) => string;
+        yAxisFormatter?: (param: any) => string;
+        legendFormatter?: (param: any) => string;
+        valueUnit?: string;
+        xRotate?: number;
+        yRotate?: number;
+        legendPosition?: 'top' | 'bottom' | 'middle';
+        legendOrient?: 'horizontal' | 'vertical';
+        showList?: Array<any>;
+        showAll?: boolean;
+        reverseXAxis?: boolean;
+        seriesName?: string;
+    }
+}

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

@@ -1,9 +1,10 @@
 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 '../styles/index.less';
+import { ChartTypes } from '../types';
+export declare type EChartsOption = echarts.ComposeOption<TitleComponentOption | ToolboxComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | LineSeriesOption | BarSeriesOption | PieSeriesOption>;
 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;
@@ -15,40 +16,8 @@ export declare const gridConfig: {
 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, 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:''}]
- * @param legendPosition 图例位置
- * @param legendOrient   图例方向
- * @param tooltipFormatter   tooltip 自定义显示
- * @returns
- */
+export declare const getChartOption: (chartType: string, data: ChartTypes.Value, 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, legendFormatter?: ((value: any) => string) | undefined, reverseXAxis?: boolean | undefined, seriesName?: 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;

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

@@ -1,24 +1,12 @@
-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 { tooltipFormatterDefault, xAxisFormatterDefault, yAxisFormatterDefault, mapTooltipFormatter, legendFormatterDefault } from './formatOption';
 import { chartColors } from './color';
-import '../index.less';
+import '../styles/index.less';
 export var baseConfig = {
   color: chartColors,
   textStyle: {
@@ -34,20 +22,25 @@ export var seriesConfig = {
 };
 export var legendConfig = {
   type: 'scroll',
-  height: 17,
-  padding: 0,
   itemHeight: 10,
   itemWidth: 10,
-  lineStyle: {
-    opacity: 0
-  },
+  itemGap: 21,
   textStyle: {
     color: '#5F6085',
-    lineHeight: 17
+    height: 10,
+    rich: {
+      a: {
+        verticalAlign: 'bottom'
+      }
+    }
   },
+  formatter: ['{a|{name}}'].join('\n'),
   pageIconSize: 10,
   pageTextStyle: {
     color: '#5F6085'
+  },
+  tooltip: {
+    show: true
   }
 };
 export var gridConfig = {
@@ -72,7 +65,6 @@ export var xAxisConfig = {
   nameTextStyle: {
     lineHeight: 30
   },
-  // boundaryGap: false,
   axisLabel: {
     formatter: function formatter(value) {
       return value;
@@ -109,47 +101,28 @@ export var tooltipConfig = {
     }
   }
 };
-/**
- *  折现/柱图
- * @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 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;
+export var getChartOption = function getChartOption(chartType, data) {
+  var legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top';
+  var legendOrient = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'horizontal';
+  var unit = arguments.length > 4 ? arguments[4] : undefined;
+  var xRotate = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  var yRotate = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  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 legendFormatter = arguments.length > 10 ? arguments[10] : undefined;
+  var reverseXAxis = arguments.length > 11 ? arguments[11] : undefined;
+  var seriesName = arguments.length > 12 ? arguments[12] : 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轴配置
-
+      seriesItem = _objectSpread({}, seriesConfig);
 
-  if (xData) {
-    xAxis.data = xData;
+  if (data.x_axis) {
+    xAxis.data = data.x_axis;
   }
 
   xAxis.boundaryGap = chartType === 'bar';
@@ -162,8 +135,7 @@ export var getChartOption = function getChartOption(chartType, xData) {
     xAxis.axisLabel.formatter = xAxisFormatter;
   } else {
     xAxis.axisLabel.formatter = xAxisFormatterDefault;
-  } //Y轴配置
-
+  }
 
   yAxis.axisLabel = yAxis.axisLabel || {};
   yAxis.axisLabel.rotate = yRotate;
@@ -176,14 +148,8 @@ export var getChartOption = function getChartOption(chartType, xData) {
 
   if (unit) {
     yAxis.name = unit;
-  } // series配置
-
+  }
 
-  var itemStyle = {
-    color: sameColor ? 'auto' : function (param) {
-      return chartColors[param.dataIndex % 20];
-    }
-  };
   var series = [];
 
   if (chartType === 'bar') {
@@ -191,48 +157,29 @@ export var getChartOption = function getChartOption(chartType, xData) {
   }
 
   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,
+    series = data.series.map(function (item) {
+      return _objectSpread(_objectSpread(_objectSpread({}, item), seriesItem), {}, {
         type: chartType
       });
     });
   } else {
     series = [_objectSpread(_objectSpread({
       name: seriesName || '',
-      data: _toConsumableArray(seriesData)
+      data: data.series
     }, 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
-
+  tooltip.formatter = tooltipFormatter ? tooltipFormatter : tooltipFormatterDefault;
 
   if (legendPosition === 'top') {
     grid.top = series.length > 1 || series.length > 0 && series[0].name ? 45 : 10;
   } else if (legendPosition === 'bottom') {
     grid.bottom = series.length > 1 || series.length > 0 && series[0].name ? 45 : 0;
-  } // 图例配置
-
+  }
 
   legend.top = legendPosition;
   legend.orient = legendOrient;
@@ -244,6 +191,11 @@ export var getChartOption = function getChartOption(chartType, xData) {
     grid.left = 80;
   }
 
+  if (chartType === 'line') {
+    legend.icon = 'circle';
+  }
+
+  legend.formatter = legendFormatter ? legendFormatter : legendFormatterDefault;
   return _objectSpread(_objectSpread({}, baseConfig), {}, {
     legend: legend,
     xAxis: xAxis,
@@ -253,15 +205,6 @@ export var getChartOption = function getChartOption(chartType, xData) {
     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';
@@ -281,6 +224,7 @@ export var getPieOption = function getPieOption() {
 
   legend.top = legendPosition;
   legend.orient = legendOrient;
+  legend.icon = 'circle';
 
   if (legendOrient === 'vertical') {
     legend.left = 'left';
@@ -297,8 +241,8 @@ export var getPieOption = function getPieOption() {
     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>");
+          color = params.color;
+      return "<div class=\"biz-chart-tooltip-item\">\n                <span class=\"biz-chart-tooltip-content\">\n                    <span class=\"biz-tooltip-marker\" style=\"background:".concat(color, "\"></span>").concat(name, "\n                </span> \n                <span class=\"biz-chart-tooltip-value\">").concat(value, "</span>\n              </div>");
     };
   }
 
@@ -309,15 +253,6 @@ export var getPieOption = function getPieOption() {
     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;
@@ -361,8 +296,7 @@ export var getMapOption = function getMapOption() {
       inRange: {
         color: ['lightskyblue', 'yellow', 'orangered']
       },
-      show: showVisualMap // 用户群对比不支持
-
+      show: showVisualMap
     },
     toolbox: {
       show: true,

package/es/chart/util/formatData.d.ts

@@ -1,13 +1,9 @@
-import { DataProps } from '../type';
-export declare const formatPieData: (data: DataProps, showAll: boolean, showMap: {
-    [x: string]: any;
-}, showList?: any[] | undefined) => {
+import { ChartTypes } from '../types';
+export declare const formatPieData: (data: ChartTypes.Value, showAll?: boolean | undefined, showList?: any[] | undefined) => {
     name: string;
     value: number;
 }[];
-export declare const formatChartData: (data: DataProps, reverseXAxis: boolean, showMap: {
-    [x: string]: any;
-}, showList?: any[] | undefined) => {
+export declare const formatChartData: (data: ChartTypes.Value, showAll?: boolean | undefined, showList?: any[] | undefined, reverseXAxis?: boolean | undefined, color?: string[] | undefined) => {
     x_axis: string[];
     series: any;
 };

package/es/chart/util/formatData.js

@@ -1,5 +1,7 @@
+import util from '../../utils/util';
 import { chartColors } from './color';
-export var formatPieData = function formatPieData(data, showAll, showMap, showList) {
+export var formatPieData = function formatPieData(data, showAll, showList) {
+  var showMap = getShowMap(showList);
   var list = [];
   var other = {
     name: '其它',
@@ -7,7 +9,7 @@ export var formatPieData = function formatPieData(data, showAll, showMap, showLi
   };
   data.series.forEach(function (item) {
     var series = {
-      name: item.names.join('-'),
+      name: item.names.join(','),
       value: item.values[0]
     };
 
@@ -15,7 +17,6 @@ export var formatPieData = function formatPieData(data, showAll, showMap, showLi
       list.push(series);
     } else {
       if (showList && showMap[series.name] || !showList && list.length < 10) {
-        // 数据被showList命中，或者没定义showList，但位于前十的记录
         list.push(series);
       } else {
         other.value += item.values[0];
@@ -25,32 +26,52 @@ export var formatPieData = function formatPieData(data, showAll, showMap, showLi
   if (!showAll && other.value > 0) list.push(other);
   return list;
 };
-export var formatChartData = function formatChartData(data, reverseXAxis, showMap, showList) {
-  if (reverseXAxis) {
-    var x_axis = [];
-    var sData = [];
-    data.series.forEach(function (seriesItem, index) {
-      x_axis.push(seriesItem.names.join('-'));
+export var formatChartData = function formatChartData(data, showAll, showList, reverseXAxis, color) {
+  var showMap = getShowMap(showList);
+  var x_axis = reverseXAxis ? [] : data.x_axis;
+  var sData = [];
+  var colorData = color || chartColors;
+  data.series.forEach(function (seriesItem) {
+    var name = seriesItem.names.join(',');
 
-      if (reverseXAxis && showList && !showMap[data.series[index].names.join('-')]) {
-        return;
+    if (showAll || showList && showMap[name] || !showList && sData.length < 10) {
+      if (reverseXAxis) {
+        x_axis.push(name);
+        sData.push({
+          name: name,
+          value: seriesItem.values[0],
+          itemStyle: {
+            normal: {
+              color: colorData[sData.length]
+            }
+          }
+        });
+      } else {
+        sData.push({
+          name: name,
+          data: seriesItem.values
+        });
       }
+    }
+  });
+  return {
+    x_axis: x_axis,
+    series: sData
+  };
+};
 
-      sData.push({
-        name: x_axis[index],
-        value: seriesItem.values[0],
-        itemStyle: {
-          normal: {
-            color: chartColors[sData.length]
-          }
-        }
-      });
+var getShowMap = function getShowMap(showList) {
+  var data = {};
+
+  if (showList) {
+    showList.forEach(function (item) {
+      if (util.isArray(item)) {
+        data[item.join(',')] = true;
+      } else if (util.isString(item)) {
+        data[item] = true;
+      }
     });
-    return {
-      x_axis: x_axis,
-      series: sData
-    };
-  } else {
-    return data;
   }
+
+  return data;
 };