@opentiny/vue-renderless 3.13.1 → 3.14.0

package/cascader-select/usePicker.js

@@ -0,0 +1,251 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+const DEFAULT_FILED_NAMES = {
+  text: "label",
+  value: "id",
+  children: "children"
+};
+const createSourceData = ({ props, state, api }) => () => {
+  if (!api.validProps())
+    return;
+  const { options, valueField, textField, type } = props;
+  if (type === "cascade")
+    return options;
+  const values = api.parseType(state.defaultValues.slice());
+  const types = Array.from({ length: values.length });
+  const ranges = Array.from({ length: values.length });
+  const indices = Array.from({ length: values.length });
+  const visibleOptions = options.map((opt, i) => {
+    let slicedValues, existOption;
+    if (Array.isArray(opt)) {
+      if (opt.length === 0)
+        return [];
+      let index = opt.findIndex((item) => item[valueField] === values[i]);
+      index = index === -1 ? 0 : index;
+      types[i] = "a";
+      ranges[i] = [0, opt.length - 1];
+      indices[i] = index;
+      slicedValues = api.sliceValue(0, opt.length - 1);
+      existOption = (i2) => opt[i2];
+    } else if (opt && typeof opt === "object") {
+      let range;
+      if (Array.isArray(opt.range)) {
+        range = opt.range.slice(0, 2);
+      } else if (typeof opt.rangeMethod === "function") {
+        range = opt.rangeMethod(...values);
+        state.isOldCascadeType = true;
+      }
+      types[i] = "o";
+      ranges[i] = api.parseType(range);
+      slicedValues = api.sliceValue(ranges[i][0], ranges[i][1]);
+      existOption = (i2) => opt.optionMethod(i2, ...values);
+    }
+    if (!slicedValues || !existOption)
+      return [];
+    return slicedValues.map((slicedValue) => {
+      const option = slicedValue === null ? { [valueField]: null, [textField]: "" } : existOption(slicedValue);
+      return option;
+    });
+  });
+  return visibleOptions;
+};
+const changeHandler = ({ state, columnFieldNames, columnsType, api }) => (columnIndex, option) => {
+  const fields = columnFieldNames.value;
+  if (option && Object.keys(option).length) {
+    state.defaultValues = state.defaultValues ? state.defaultValues : [];
+    if (columnsType.value === "cascade") {
+      state.defaultValues[columnIndex] = option[fields.value] || "";
+      let index = columnIndex;
+      let cursor = option;
+      while (cursor && cursor[fields.children] && cursor[fields.children][0]) {
+        state.defaultValues[index + 1] = cursor[fields.children][0][fields.value];
+        index++;
+        cursor = cursor[fields.children][0];
+      }
+      if (cursor && cursor[fields.children] && cursor[fields.children].length === 0) {
+        state.defaultValues = state.defaultValues.slice(0, index + 1);
+      }
+    } else {
+      state.defaultValues[columnIndex] = Object.prototype.hasOwnProperty.call(option, fields.value) ? option[fields.value] : "";
+    }
+    api.change(columnIndex);
+  }
+};
+const formatCascade = ({ columnFieldNames }) => (columns, defaultValues) => {
+  const formatted = [];
+  const fields = columnFieldNames.value;
+  let cursor = {
+    text: "",
+    value: "",
+    [fields.children]: columns
+  };
+  let columnIndex = 0;
+  while (cursor && cursor[fields.children]) {
+    const options = cursor[fields.children];
+    const value = defaultValues[columnIndex];
+    let index = options.findIndex((columnItem) => columnItem[fields.value] === value);
+    if (index === -1)
+      index = 0;
+    cursor = cursor[fields.children][index];
+    columnIndex++;
+    formatted.push(options);
+  }
+  return formatted.slice();
+};
+const columnFieldNamesComputed = ({ props, computed }) => computed(() => {
+  return __spreadProps(__spreadValues({}, DEFAULT_FILED_NAMES), {
+    text: props.textField,
+    value: props.valueField,
+    children: props.childrenField
+  });
+});
+const defaultIndexes = ({ state, computed, columnFieldNames, columnsList }) => computed(() => {
+  const fields = columnFieldNames.value;
+  return columnsList.value.map((column, index) => {
+    const targetIndex = column.findIndex((item) => item[fields.value] === state.defaultValues[index]);
+    return targetIndex === -1 ? 0 : targetIndex;
+  });
+});
+const confirmDisabled = ({ props, state, columnsList }) => () => {
+  if (typeof props.disabled !== "function") {
+    return false;
+  }
+  state.isDisabled = columnsList.value.some((column, columnIndex) => {
+    return props.disabled(state.defaultValues[columnIndex], ...state.defaultValues);
+  });
+};
+const change = ({ api, state, columnFieldNames, columnsList }) => () => {
+  if (api.isSameValue(state.oldValues, state.defaultValues))
+    return;
+  state.oldValues = state.defaultValues.slice();
+  if (state.isOldCascadeType) {
+    state.formattedColumns = api.createSourceData();
+  }
+  api.getColumnsList();
+  api.confirmDisabled();
+  const fields = columnFieldNames.value;
+  state.selectedOptions = columnsList.value.map((column, index) => {
+    return column.find((item) => item[fields.value] === state.defaultValues[index]) || column[0];
+  });
+};
+const columnsTypeComputed = ({ state, computed, columnFieldNames }) => computed(() => {
+  const firstColumn = state.formattedColumns[0];
+  const fields = columnFieldNames.value;
+  if (firstColumn) {
+    if (Array.isArray(firstColumn)) {
+      return "multiple";
+    }
+    if (fields.children in firstColumn) {
+      return "cascade";
+    }
+  }
+  return "single";
+});
+const getColumnsList = ({ state, api, columnsType, columnsList }) => () => {
+  let result = [];
+  switch (columnsType.value) {
+    case "multiple":
+      result = state.formattedColumns;
+      break;
+    case "cascade":
+      result = api.formatCascade(state.formattedColumns, state.defaultValues ? state.defaultValues : []);
+      break;
+    default:
+      result = [state.formattedColumns];
+      break;
+  }
+  columnsList.value = result;
+};
+const setValue = ({ api, state }) => (value) => {
+  if (!api.isSameValue(value, state.defaultValues)) {
+    state.defaultValues = (value || []).slice();
+    api.change();
+  }
+};
+const isSameValue = (valA, valB) => JSON.stringify(valA) === JSON.stringify(valB);
+const sliceValue = (min, max) => {
+  const values = [min];
+  Array.from({ length: max - min }).map((v, i) => values.push(min + i + 1));
+  return values;
+};
+const validArr = (arr) => Array.isArray(arr) && arr.length;
+const validProps = ({ props }) => () => {
+  const { modelValue, options } = props;
+  return validArr(modelValue) && validArr(options) && modelValue.length === options.length;
+};
+const parseType = ({ props }) => (values) => {
+  const { valueType } = props;
+  return values.map(valueType === "number" ? Number : valueType === "string" ? String : (i) => i);
+};
+const init = ({ api, state }) => () => {
+  state.isInit = true;
+  state.formattedColumns = api.createSourceData();
+  api.getColumnsList();
+};
+const usePicker = (args) => {
+  const { ref, reactive, watch, computed, toRefs, props } = args;
+  const state = reactive({
+    formattedColumns: [],
+    defaultValues: [],
+    selectedOptions: [],
+    oldValues: [],
+    isOldCascadeType: false,
+    isDisabled: false,
+    isInit: false
+  });
+  const api = {};
+  const columnsList = ref([]);
+  const pickerColumn = ref([]);
+  const columnFieldNames = columnFieldNamesComputed({ props, computed });
+  const columnsType = columnsTypeComputed({ state, computed, columnFieldNames });
+  Object.assign(api, {
+    change: change({ api, state, columnFieldNames, columnsList }),
+    changeHandler: changeHandler({ state, columnFieldNames, columnsType, api }),
+    formatCascade: formatCascade({ columnFieldNames }),
+    setValue: setValue({ api, state }),
+    validProps: validProps({ props }),
+    parseType: parseType({ props }),
+    init: init({ api, state }),
+    isSameValue,
+    sliceValue,
+    getColumnsList: getColumnsList({ state, api, columnsType, columnsList }),
+    confirmDisabled: confirmDisabled({ props, state, columnsList }),
+    defaultIndexes: defaultIndexes({ state, computed, columnFieldNames, columnsList }),
+    createSourceData: createSourceData({ props, state, api })
+  });
+  initWatch({ props, api, state, watch });
+  return __spreadProps(__spreadValues({}, toRefs(state)), {
+    columnsType,
+    columnsList,
+    columnFieldNames,
+    changeHandler: api.changeHandler,
+    defaultIndexes: api.defaultIndexes,
+    pickerColumn,
+    isSameValue: api.isSameValue,
+    setValue: api.setValue
+  });
+};
+const initWatch = ({ props, api, state, watch }) => {
+  watch(
+    () => props.modelValue,
+    (newValues) => {
+      api.setValue(newValues);
+    },
+    { deep: true, immediate: true }
+  );
+  watch(
+    () => props.options,
+    () => props.visible && api.init(),
+    { deep: true, immediate: true }
+  );
+  watch(
+    () => props.visible,
+    () => props.visible && !state.isInit && api.init(),
+    { deep: true, immediate: true }
+  );
+};
+export {
+  usePicker
+};

package/cascader-select/useTouch.js

@@ -0,0 +1,65 @@
+import "../chunk-G2ADBYYC.js";
+const MIN_DISTANCE = 10;
+const getDirection = (x, y) => {
+  if (x > y && x > MIN_DISTANCE)
+    return "horizontal";
+  if (y > x && y > MIN_DISTANCE)
+    return "vertical";
+  return "";
+};
+function useTouch({ ref }) {
+  const startX = ref(0);
+  const startY = ref(0);
+  const moveX = ref(0);
+  const moveY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref("");
+  const isVertical = () => direction.value === "vertical";
+  const isHorizontal = () => direction.value === "horizontal";
+  const move = (event) => {
+    const touchEvent = event.touches[0];
+    deltaX.value = touchEvent.clientX - startX.value;
+    deltaY.value = touchEvent.clientY - startY.value;
+    moveY.value = touchEvent.clientY;
+    moveX.value = touchEvent.clientX;
+    offsetY.value = Math.abs(deltaY.value);
+    offsetX.value = Math.abs(deltaX.value);
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+  };
+  const reset = () => {
+    deltaX.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    deltaY.value = 0;
+    direction.value = "";
+  };
+  const start = (event) => {
+    reset();
+    startY.value = event.touches[0].clientY;
+    startX.value = event.touches[0].clientX;
+  };
+  return {
+    start,
+    move,
+    reset,
+    startY,
+    startX,
+    moveY,
+    moveX,
+    deltaY,
+    deltaX,
+    offsetY,
+    offsetX,
+    isVertical,
+    direction,
+    isHorizontal
+  };
+}
+export {
+  useTouch
+};

package/cascader-select/vue.js

@@ -1,67 +1,55 @@
 import "../chunk-G2ADBYYC.js";
-import {
-  init,
-  handleTouchstart,
-  handleTouchend,
-  handleTouchmove,
-  watchActionSheetVisible,
-  calcSelector,
-  close,
-  confirm,
-  styleOpt,
-  statusOpt,
-  computedConfirmDisabled,
-  parseType
-} from "./index";
-import throttle from "../common/deps/throttle";
+import { watchActionSheetVisible, close, confirm, columnStyle } from "./index";
+import { usePicker } from "./usePicker";
 const api = [
   "state",
-  "handleTouchstart",
-  "handleTouchend",
-  "throttledHandleTouchmove",
   "close",
   "confirm",
-  "styleOpt",
-  "statusOpt"
+  "columnsType",
+  "columnsList",
+  "columnFieldNames",
+  "changeHandler",
+  "defaultValues",
+  "isDisabled",
+  "selectedOptions",
+  "columnStyle"
 ];
-const renderless = (props, { reactive, computed, onBeforeMount, watch }, { emit, vm }) => {
+const renderless = (props, { reactive, computed, watch, ref, toRefs }, { emit, vm }) => {
   const state = reactive({
     actionSheetVisible: false,
-    visibleOptionCount: 5,
-    selectorCount: 1,
-    selector0: {},
-    selector1: {},
-    selector2: {},
-    confirmDisabled: computed(() => api2.computedConfirmDisabled())
+    visibleOptionNum: 5
   });
+  const {
+    changeHandler,
+    defaultValues,
+    columnsList,
+    columnsType,
+    columnFieldNames,
+    selectedOptions,
+    setValue,
+    isDisabled
+  } = usePicker({ ref, reactive, watch, computed, toRefs, props, emit });
   const api2 = {
-    state,
-    styleOpt,
-    statusOpt,
-    handleTouchstart: handleTouchstart(state),
-    handleTouchend: handleTouchend(state),
-    watchActionSheetVisible: watchActionSheetVisible({ emit, state, vm }),
-    close: close(state),
-    computedConfirmDisabled: computedConfirmDisabled(state),
-    parseType: parseType(props)
+    state
   };
   Object.assign(api2, {
-    init: init({ api: api2, props, state }),
-    throttledHandleTouchmove: throttle(20, handleTouchmove({ api: api2, props, state })),
-    calcSelector: calcSelector(api2),
-    confirm: confirm({ api: api2, emit, props, state, vm })
-  });
-  onBeforeMount(() => {
-    api2.init();
+    close: close(state),
+    confirm: confirm({ api: api2, emit, props, state, defaultValues, selectedOptions, isDisabled, vm }),
+    watchActionSheetVisible: watchActionSheetVisible({ emit, api: api2, props }),
+    columnsType,
+    columnsList,
+    columnFieldNames,
+    changeHandler,
+    defaultValues,
+    selectedOptions,
+    setValue,
+    isDisabled,
+    columnStyle: columnStyle({ props, computed })
   });
   watch(
     () => props.visible,
     (value) => state.actionSheetVisible = value
   );
-  watch(
-    () => props.modelValue,
-    (value) => api2.init(value)
-  );
   watch(
     () => state.actionSheetVisible,
     (value) => api2.watchActionSheetVisible(value)

package/cell/vue.js

@@ -3,7 +3,8 @@ const api = ["state"];
 const renderless = (props, { reactive, computed, inject }, { parent }) => {
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const state = reactive({
-    isDisplayOnly: computed(() => (parent.tinyForm || {}).displayOnly)
+    isDisplayOnly: computed(() => (parent.tinyForm || {}).displayOnly),
+    isDisabled: computed(() => props.disabled || (parent.tinyForm || {}).disabled)
   });
   const api2 = {
     state

package/chart-bar/index.js

@@ -30,8 +30,7 @@ const getBarDimAxis = (args) => {
     },
     show: axisVisible,
     axisTick: { show: true, alignWithLabel: true, lineStyle: { color: "#191919", opacity: 0.1, width: 2 } },
-    axisLine: { show: true, lineStyle: { color: "#191919", opacity: 0.1, width: 2 } },
-    axisPointer: { type: "shadow", z: 1, shadowStyle: { color: "#f5f5f5" } }
+    axisLine: { show: true, lineStyle: { color: "#191919", opacity: 0.1, width: 2 } }
   }));
 };
 const factoryFmt = ({ meaAxisType, i, digit }) => (val) => getFormated(val, meaAxisType[i], digit);
@@ -74,7 +73,7 @@ const getBarTooltip = (args) => {
     });
     return tplt.join("");
   };
-  return { trigger: "axis", formatter };
+  return { trigger: "axis", formatter, axisPointer: { type: "shadow", z: 1, shadowStyle: { color: "#f5f5f5" } } };
 };
 const getValueData = (seriesTemp, dims) => {
   const max = Math.max(...dims);

package/chart-core/deps/constants.js

@@ -1,47 +1,29 @@
 import "../../chunk-G2ADBYYC.js";
-const sf = () => ({ show: false });
+const SF = () => ({ show: false });
 const DEFAULT_THEME = {
-  categoryAxis: { axisLine: sf(), axisTick: sf(), splitLine: sf() },
-  valueAxis: { axisLine: sf() },
+  categoryAxis: { axisLine: SF(), axisTick: SF(), splitLine: SF() },
+  valueAxis: { axisLine: SF() },
   line: { smooth: true },
   grid: { containLabel: true, left: 10, right: 10 }
 };
-let DEFAULT_COLORS = ["#19d4ae", "#5ab1ef", "#fa6e86", "#ffb980", "#0067a6", "#c4b4e4"];
-DEFAULT_COLORS = DEFAULT_COLORS.concat(["#d87a80", "#9cbbff", "#d9d0c7", "#87a997", "#d49ea2", "#5b4947", "#7ba3a8"]);
+const DEFAULT_COLORS = [
+  "#19d4ae",
+  "#5ab1ef",
+  "#fa6e86",
+  "#ffb980",
+  "#0067a6",
+  "#c4b4e4",
+  "#d87a80",
+  "#9cbbff",
+  "#d9d0c7",
+  "#87a997",
+  "#d49ea2",
+  "#5b4947",
+  "#7ba3a8"
+];
 const HEAT_MAP_COLOR = ["#5990FD", "#2DA769", "#EEBA18", "#F43146"];
 const HEAT_BMAP_COLOR = ["blue", "blue", "green", "yellow", "red"];
-const SAAS_DEFAULT_COLORS_10 = [
-  "#6d8ff0",
-  "#00a874",
-  "#bd72f0",
-  "#54bcce",
-  "#fdc000",
-  "#9185f0",
-  "#82dbb1",
-  "#f46087",
-  "#2070f3",
-  "#ee8ddb"
-];
-const SAAS_DEFAULT_COLORS_18 = [
-  "#2070f3",
-  "#50c291",
-  "#bd72f0",
-  "#54bcce",
-  "#fdc000",
-  "#6d8ff0",
-  "#71c14c",
-  "#87d5e5",
-  "#9185f0",
-  "#82dbb1",
-  "#ada6ed",
-  "#97da7e",
-  "#f46087",
-  "#ee8ddb",
-  "#f09596",
-  "#f36900",
-  "#daa61b",
-  "#efb9e3"
-];
+const HEAT_DEFAULT_COLOR = ["#fff", "#6D8FF0"];
 const _SAAS_DEFAULT_COLORS1 = ["#2070F3", "#55CCD9", "#715AF8", "#8AC8F3", "#EB74DF", "#87C859", "#D19F00"];
 const _SAAS_DEFAULT_COLORS2 = ["#36C18D", "#CB8EFB", "#ED448A", "#F7C45C", "#E7434A", "#2A8290", "#EE8DDB"];
 const _SAAS_DEFAULT_COLORS3 = ["#278661", "#4FA700", "#5CACFF", "#9185F0", "#B62BF7", "#26616B", "#F46465"];
@@ -108,21 +90,39 @@ const itemLabel = (seriesName, onlyLabel) => [
   `${onlyLabel ? "" : "margin-right:25px;"}`,
   `">${seriesName}</span>`
 ].join("");
-const itemContent = (content) => ['<span style="', "float:right;", "font-size:14px;", "color:#191919;", `">${content}</span>`].join("");
+const itemContent = (content) => {
+  return ['<span style="', `float:right;`, `font-size:14px;`, `color:#191919;`, `">${content}</span>`].join("");
+};
 const STATIC_PROPS = ["initOptions", "loading", "dataEmpty", "judgeWidth", "widthChangeDelay"];
-let ECHARTS_SETTINGS = ["grid", "dataZoom", "visualMap", "toolbox", "title", "legend", "xAxis"];
-ECHARTS_SETTINGS = ECHARTS_SETTINGS.concat(["yAxis", "radar", "tooltip", "axisPointer", "brush", "geo"]);
-ECHARTS_SETTINGS = ECHARTS_SETTINGS.concat(["timeline", "graphic", "series", "backgroundColor", "textStyle"]);
+const ECHARTS_SETTINGS = [
+  "grid",
+  "dataZoom",
+  "visualMap",
+  "toolbox",
+  "title",
+  "legend",
+  "xAxis",
+  "yAxis",
+  "radar",
+  "tooltip",
+  "axisPointer",
+  "brush",
+  "geo",
+  "timeline",
+  "graphic",
+  "series",
+  "backgroundColor",
+  "textStyle"
+];
 export {
   DEFAULT_COLORS,
   DEFAULT_CONFIG,
   DEFAULT_THEME,
   ECHARTS_SETTINGS,
   HEAT_BMAP_COLOR,
+  HEAT_DEFAULT_COLOR,
   HEAT_MAP_COLOR,
   SAAS_DEFAULT_COLORS,
-  SAAS_DEFAULT_COLORS_10,
-  SAAS_DEFAULT_COLORS_18,
   SAAS_DEFAULT_SAME_COLORS,
   STATIC_PROPS,
   itemContent,

package/chart-core/index.js

@@ -127,7 +127,7 @@ const dataHandler = ({ api, props, state, echartsLib, t, vm }) => () => {
   if (props.beforeConfig) {
     data = props.beforeConfig(data);
   }
-  let options = api.chartHandler(columns, rows, props.settings, extra);
+  let options = api.chartHandler(columns, rows, props.settings, extra, props.extend);
   if (options) {
     if (typeof options.then === "function") {
       options.then(api.optionsHandler);

package/chart-gauge/index.js

@@ -52,10 +52,10 @@ function getSeries(args) {
       axisLabel: { formatter: formatter2 },
       itemStyle: { color: "#6D8FF0" },
       pointer: getPoint(),
-      axisLine: { roundCap: true },
+      axisLine: { roundCap: true, lineStyle: { width: 8, color: [[1, "rgba(25,25,25,0.1)"]] } },
       progress: { show: true, roundCap: true, width: 8, color: "#6D8FF0" },
       axisTick: { show: false },
-      splitLine: { length: 8, distance: 0, lineStyle: { width: 1, color: "rgba(25,25,25,0.10)" } },
+      splitLine: { length: 8, distance: 0, lineStyle: { width: 1, color: "rgba(25,25,25,0.1)" } },
       title: { offsetCenter: [0, "25%"], color: "#191919", fontSize: 14 }
     };
     if (seriesItem) {

package/chart-heatmap/index.js

@@ -2,7 +2,7 @@ import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
 import { getFormated, getBmap, getAmap, getMapJSON } from "../chart-core/deps/utils";
-import { HEAT_MAP_COLOR, itemPoint, itemLabel, itemContent } from "../chart-core/deps/constants";
+import { HEAT_MAP_COLOR, HEAT_DEFAULT_COLOR, itemPoint, itemLabel, itemContent } from "../chart-core/deps/constants";
 const getAxisList = (rows, label) => {
   const result = [];
   rows.forEach((row) => !result.includes(row[label]) && result.push(row[label]));
@@ -20,7 +20,7 @@ const getData = (args) => {
       xIndex = innerXAxisList.indexOf(row[xDim]);
       extra = extraMetrics.map((m) => row[m] || "-");
       value = metrics ? row[metrics] : 1;
-      return { value: [xIndex, yIndex, value].concat(extra), label: { show: true, color: "#191919" } };
+      return { value: [xIndex, yIndex, value].concat(extra) };
     });
   }
   return result;
@@ -37,7 +37,7 @@ let getAxis = (list, name, type) => ({
   zlevel: 1
 });
 const getVisualMap = (args) => {
-  const { innerMin: min, innerMax: max, type, heatColor, series } = args;
+  const { innerMin: min, innerMax: max, type, heatColor, series, visualMapConfig } = args;
   let { extra } = {};
   if (type === "map") {
     extra = {};
@@ -47,8 +47,9 @@ const getVisualMap = (args) => {
   } else {
     extra = { dimension: 2 };
   }
-  const defaultColor = type === "map" || type === "bmap" || type === "amap" ? HEAT_MAP_COLOR : ["#fff", "#6D8FF0"];
-  return Object.assign(extra, {
+  const visualMapColor = visualMapConfig && visualMapConfig.color;
+  const defaultColor = type === "map" || type === "bmap" || type === "amap" ? HEAT_MAP_COLOR : visualMapColor || HEAT_DEFAULT_COLOR;
+  let result = Object.assign(extra, {
     min,
     max,
     calculable: true,
@@ -57,11 +58,16 @@ const getVisualMap = (args) => {
     orient: "vertical",
     align: "left",
     borderColor: "#6D8FF0",
-    inverse: true,
-    inRange: { color: heatColor || defaultColor }
+    inverse: true
   });
+  if (type !== "cartesian" || !visualMapColor) {
+    Object.assign(result, {
+      inRange: { color: heatColor || defaultColor }
+    });
+  }
+  return Object.assign(result, visualMapConfig);
 };
-const getSeries = (args) => [{ type: "heatmap", data: args.chartData }];
+const getSeries = (args) => [{ type: "heatmap", data: args.chartData, label: { show: true, color: "#191919" } }];
 const getTooltip = (args) => {
   const { dataType, innerXAxisList, innerYAxisList, digit, extraMetrics, metrics } = args;
   function formatter({ color, data }) {
@@ -123,7 +129,7 @@ const getResult = (args) => {
   }
   return res;
 };
-const heatmap = (columns, rows, settings, extra) => {
+const heatmap = (columns, rows, settings, extra, extend) => {
   const { type = "cartesian" } = settings;
   const { dimension = [columns[0], columns[1]] } = settings;
   const { dataType = "normal", min, max, digit, bmap, amap, geo, key, v = "2.0", url } = settings;
@@ -131,6 +137,7 @@ const heatmap = (columns, rows, settings, extra) => {
   const { heatColor, yAxisName, xAxisName, beforeRegisterMapOnce, specialAreas = {} } = settings;
   const { metrics = columns[2], mapURLProfix = "https://unpkg.com/echarts@3.6.2/map/json/" } = settings;
   const { tooltipVisible, echartsLib: echarts } = extra;
+  const visualMapConfig = extend && extend.visualMap;
   let { xAxisList: innerXAxisList, yAxisList: innerYAxisList } = settings;
   let { chartData = [], extraMetrics = [], mainColumn = dimension.concat([metrics]) } = {};
   columns.forEach((column) => !~mainColumn.indexOf(column) && extraMetrics.push(column));
@@ -145,7 +152,7 @@ const heatmap = (columns, rows, settings, extra) => {
   const xAxis = getAxis(innerXAxisList, xAxisName, "x");
   const yAxis = getAxis(innerYAxisList, yAxisName, "y");
   const series = getSeries({ chartData });
-  const visualMap = getVisualMap({ innerMin, innerMax, type, heatColor, series });
+  const visualMap = getVisualMap({ innerMin, innerMax, type, heatColor, series, visualMapConfig });
   const tooltipParams = { dataType, innerXAxisList, innerYAxisList, digit, extraMetrics, metrics };
   const tooltip = tooltipVisible && getTooltip(tooltipParams);
   const options = { visualMap, series, grid: { left: 25, right: 80, width: "auto", height: "auto" } };