@opentinyvue/vue-renderless 3.21.0

package/chart-funnel/index.js

@@ -0,0 +1,76 @@
+import "../chunk-G2ADBYYC.js";
+import { getFormated } from "../chart-core/deps/utils";
+import { itemPoint, itemLabel, itemContent } from "../chart-core/deps/constants";
+import { isNull } from "../common/type";
+const getFunnelTooltip = (dataType, digit) => {
+  function formatter(item) {
+    let tpl = [];
+    tpl.push(itemPoint(item.color));
+    tpl.push(`${itemLabel(item.name)}${itemContent(getFormated(item.data.realValue, dataType, digit))}`);
+    return tpl.join("");
+  }
+  return { trigger: "item", formatter };
+};
+const getFunnelLegend = (args) => {
+  const { data, legendName } = args;
+  function formatter(name) {
+    return isNull(legendName[name]) ? name : legendName[name];
+  }
+  return { data, formatter };
+};
+const getFunnelSeries = (args) => {
+  const { ascending, dimension, itemStyle, label, labelLine, metrics, rows, sequence, useDefaultOrder } = args;
+  let { series = { type: "funnel" }, falseFunnel = false } = {};
+  series.minSize = 8;
+  let innerRows = rows.sort((a, b) => sequence.indexOf(a[dimension]) - sequence.indexOf(b[dimension]));
+  innerRows.some((row, index) => index && row[metrics] > innerRows[index - 1][metrics] && (falseFunnel = true));
+  const step = 100 / innerRows.length;
+  if (falseFunnel && !useDefaultOrder) {
+    const handler = (row, index) => ({ name: row[dimension], value: (index + 1) * step, realValue: row[metrics] });
+    series.data = innerRows.slice().reverse().map(handler);
+  } else {
+    series.data = innerRows.map((row) => ({ name: row[dimension], value: row[metrics], realValue: row[metrics] }));
+  }
+  let total = 0;
+  rows.forEach((row) => {
+    total += row[metrics];
+  });
+  series.label = {
+    position: "inside",
+    color: "#fff",
+    formatter(item) {
+      let { value } = item;
+      return `${Number(value / total).toFixed(2) * 100}%`;
+    }
+  };
+  ascending && (series.sort = "ascending");
+  label && (series.label = label);
+  labelLine && (series.labelLine = labelLine);
+  itemStyle && (series.itemStyle = itemStyle);
+  return series;
+};
+const funnel = (outerColumns, outerRows, settings, extra) => {
+  const { columns = outerColumns.slice(), rows = outerRows.slice() } = {};
+  const { dataType = "normal", dimension = columns[0], sequence = rows.map((row) => row[dimension]) } = settings;
+  const { digit = 2, ascending, label, labelLine, legendName = {}, itemStyle, filterZero, useDefaultOrder } = settings;
+  const { tooltipVisible, legendVisible } = extra;
+  let metrics;
+  if (settings.metrics) {
+    metrics = settings.metrics;
+  } else {
+    let temp = columns.slice();
+    temp.splice(columns.indexOf(dimension), 1);
+    metrics = temp[0];
+  }
+  let innerRows = rows.sort((a, b) => sequence.indexOf(a[dimension]) - sequence.indexOf(b[dimension]));
+  filterZero && (innerRows = innerRows.filter((row) => row[metrics]));
+  const tooltip = tooltipVisible && getFunnelTooltip(dataType, digit);
+  const legend = legendVisible && getFunnelLegend({ data: innerRows.map((row) => row[dimension]), legendName });
+  const seriesParam = { dimension, metrics, rows: innerRows, sequence, ascending };
+  Object.assign(seriesParam, { label, labelLine, itemStyle, filterZero, useDefaultOrder });
+  const series = getFunnelSeries(seriesParam);
+  return { tooltip, legend, series };
+};
+export {
+  funnel
+};

package/chart-gauge/index.js

@@ -0,0 +1,81 @@
+import "../chunk-G2ADBYYC.js";
+import { getFormated, isObject } from "../chart-core/deps/utils";
+import { isNull } from "../common/type";
+import { itemLabel, itemContent } from "../chart-core/deps/constants";
+const getTooltip = (args) => {
+  const { dataType, digit, tooltipFormatter } = args;
+  return {
+    formatter(options) {
+      if (tooltipFormatter) {
+        return tooltipFormatter.apply(null, arguments);
+      }
+      const tpl = [];
+      const { seriesName, data } = options;
+      const { value, name } = data;
+      tpl.push(`${itemLabel(seriesName)}`);
+      tpl.push(`${itemContent(getFormated(value, dataType[seriesName], digit))} ${name}`);
+      return tpl.join("");
+    }
+  };
+};
+const getPoint = () => ({
+  show: false,
+  width: 10,
+  length: 10,
+  icon: "path://M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z",
+  offsetCenter: [0, "-106%"],
+  itemStyle: { color: "auto" }
+});
+function getSeries(args) {
+  const { dataName, dataType, digit, dimension, labelMap, metrics, rows, seriesMap } = args;
+  const series = rows.map((row) => {
+    const label = row[dimension];
+    const seriesItem = seriesMap[label];
+    const formatter2 = function(value) {
+      return getFormated(value, dataType[label], digit);
+    };
+    const result = {
+      type: "gauge",
+      name: !isNull(labelMap[label]) ? labelMap[label] : label,
+      data: [{ name: dataName[label] || "", value: row[metrics] }],
+      detail: {
+        fontSize: 60,
+        color: "#191919",
+        offsetCenter: [0, 0],
+        valueAnimation: true,
+        formatter: !dataType ? "{value}" : (value) => {
+          const res = getFormated(value, dataType[label], digit);
+          return dataType[label] === "percent" ? res.split("%")[0] + "{percent|%}" : res;
+        },
+        rich: { percent: { fontSize: 12, color: "#4e4e4e", padding: [0, 0, -20, 0] } }
+      },
+      axisLabel: { formatter: formatter2 },
+      itemStyle: { color: "#6D8FF0" },
+      pointer: getPoint(),
+      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.1)" } },
+      title: { offsetCenter: [0, "25%"], color: "#191919", fontSize: 14 }
+    };
+    if (seriesItem) {
+      Object.keys(seriesItem).forEach(
+        (key) => isObject(result[key]) ? Object.assign(result[key], seriesItem[key]) : result[key] = seriesItem[key]
+      );
+    }
+    return result;
+  });
+  return series;
+}
+const gauge = (columns, rows, settings, extra) => {
+  const { dataName = {}, dataType = {}, digit = 2, labelMap = {} } = settings;
+  const { dimension = columns[0], metrics = columns[1], seriesMap = {} } = settings;
+  const { tooltipFormatter, tooltipVisible } = extra;
+  const tooltip = tooltipVisible && getTooltip({ tooltipFormatter, dataType });
+  const seriesParams = { rows, dimension, metrics, digit, dataType, labelMap, seriesMap, dataName };
+  const series = getSeries(seriesParams);
+  return { tooltip, series };
+};
+export {
+  gauge
+};

package/chart-graph/index.js

@@ -0,0 +1,27 @@
+import "../chunk-G2ADBYYC.js";
+import { itemPoint, itemLabel, itemContent } from "../chart-core/deps/constants";
+const getTooltip = () => ({
+  trigger: "item",
+  formatter(item) {
+    const tpl = [];
+    const { name, value, color, dataType } = item;
+    color && tpl.push(itemPoint(color));
+    tpl.push(itemLabel(`${name}`, !value));
+    if (dataType === "node") {
+      value && tpl.push(`${itemContent(value)}<br />`);
+    }
+    return tpl.join("");
+  }
+});
+const getGraphSeries = () => [
+  { type: "graph", label: { textBorderWidth: 1, color: "#fff", textBorderColor: "inherit" } }
+];
+const graph = (columns, rows, settings, extra) => {
+  const { tooltipVisible } = extra;
+  const tooltip = tooltipVisible && getTooltip({});
+  const series = getGraphSeries();
+  return { tooltip, series };
+};
+export {
+  graph
+};

package/chart-heatmap/index.js

@@ -0,0 +1,168 @@
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { getFormated, getBmap, getAmap, getMapJSON } from "../chart-core/deps/utils";
+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]));
+  return result;
+};
+const getData = (args) => {
+  const { extraMetrics, innerXAxisList, innerYAxisList, metrics, rows, type, xDim, yDim } = args;
+  let result = null;
+  if (type !== "cartesian") {
+    result = rows.map((row) => ({ value: [row[xDim], row[yDim], metrics ? row[metrics] : 1] }));
+  } else {
+    result = rows.map((row) => {
+      let { xIndex, yIndex, value, extra } = {};
+      yIndex = innerYAxisList.indexOf(row[yDim]);
+      xIndex = innerXAxisList.indexOf(row[xDim]);
+      extra = extraMetrics.map((m) => row[m] || "-");
+      value = metrics ? row[metrics] : 1;
+      return { value: [xIndex, yIndex, value].concat(extra) };
+    });
+  }
+  return result;
+};
+let getAxis = (list, name, type) => ({
+  data: list,
+  name,
+  nameLocation: "end",
+  type: "category",
+  splitArea: { show: false },
+  splitLine: { show: true, lineStyle: { color: "#6d8ff0" } },
+  axisLabel: { show: true, color: "#4E4E4E" },
+  offset: type === "y" ? 25 : 5,
+  zlevel: 1
+});
+const getVisualMap = (args) => {
+  const { innerMin: min, innerMax: max, type, heatColor, series, visualMapConfig } = args;
+  let { extra } = {};
+  if (type === "map") {
+    extra = {};
+    !series[0].data.length && (extra.show = false);
+  } else if (type === "bmap" || type === "amap") {
+    extra = { show: false };
+  } else {
+    extra = { dimension: 2 };
+  }
+  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,
+    left: "right",
+    bottom: "center",
+    orient: "vertical",
+    align: "left",
+    borderColor: "#6D8FF0",
+    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, label: { show: true, color: "#191919" } }];
+const getTooltip = (args) => {
+  const { dataType, innerXAxisList, innerYAxisList, digit, extraMetrics, metrics } = args;
+  function formatter({ color, data }) {
+    let { value: dataVal } = data;
+    let [xDim, yDim, value, ...extraData] = dataVal;
+    const tplt = [itemContent(`${innerXAxisList[xDim]} ~ ${innerYAxisList[yDim]}<br>`)];
+    extraMetrics.forEach((m, index) => tplt.push(`${m}: ${extraData[index]}<br>`));
+    tplt.push(`${itemPoint(color)}${itemLabel(metrics)}${itemContent(getFormated(value, dataType, digit))}<br>`);
+    return tplt.join("");
+  }
+  return { trigger: "item", formatter };
+};
+const fixParam = ({ type, rows, dimension, metrics, extraMetrics, chartData, innerXAxisList, innerYAxisList }) => {
+  let chartDataParams;
+  if (type !== "cartesian") {
+    chartDataParams = { rows, xDim: dimension[0], yDim: dimension[1] };
+    Object.assign(chartDataParams, { metrics, type, extraMetrics });
+    chartData = getData(chartDataParams);
+  } else {
+    let flag = !innerXAxisList || !innerXAxisList.length;
+    flag && (innerXAxisList = getAxisList(rows, dimension[0]));
+    flag = !innerYAxisList || !innerYAxisList.length;
+    flag && (innerYAxisList = getAxisList(rows, dimension[1]));
+    chartDataParams = { xDim: dimension[0], yDim: dimension[1], rows };
+    Object.assign(chartDataParams, { innerXAxisList, innerYAxisList, metrics, type, extraMetrics });
+    chartData = getData(chartDataParams);
+  }
+  return { chartData, innerXAxisList, innerYAxisList };
+};
+const getResult = (args) => {
+  let { type, options, pointSize, blurSize, res, key, v, url, bmap, mapOrigin, geo, beforeRegisterMap } = args;
+  let { echarts, specialAreas, position, positionJsonLink, beforeRegisterMapOnce } = args;
+  let { mapURLProfix, amap, tooltip, xAxis, yAxis } = args;
+  if (type === "bmap") {
+    Object.assign(options.series[0], { coordinateSystem: "bmap", pointSize, blurSize });
+    res = getBmap({ key, version: v, url }).then(() => __spreadValues({ bmap }, options));
+  } else if (type === "map") {
+    options.series[0].coordinateSystem = "geo";
+    let jsonStr = JSON.stringify(mapOrigin);
+    if (jsonStr) {
+      const geoAttr = __spreadValues({ map: jsonStr }, geo);
+      beforeRegisterMap && (jsonStr = beforeRegisterMap(mapOrigin));
+      echarts.registerMap(jsonStr, { geoJSON: mapOrigin }, specialAreas);
+      res = new Promise((resolve) => resolve(__spreadValues({ geo: geoAttr }, options)));
+    } else {
+      let params = { position, positionJsonLink, beforeRegisterMapOnce, mapURLProfix };
+      res = getMapJSON(params).then((json) => {
+        const geoAttr = __spreadValues({ map: position }, geo);
+        beforeRegisterMap && (json = beforeRegisterMap(json));
+        echarts.registerMap(position, { geoJSON: json }, specialAreas);
+        return __spreadValues({ geo: geoAttr }, options);
+      });
+    }
+  } else if (type === "amap") {
+    Object.assign(options.series[0], { coordinateSystem: "amap", pointSize, blurSize });
+    res = getAmap(key, v).then(() => __spreadValues({ amap }, options));
+  } else {
+    res = __spreadValues({ tooltip, xAxis, yAxis }, options);
+  }
+  return res;
+};
+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;
+  const { position, mapOrigin, positionJsonLink, beforeRegisterMap, pointSize = 10, blurSize = 5 } = settings;
+  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));
+  let ret = fixParam({ type, rows, dimension, metrics, extraMetrics, chartData, innerXAxisList, innerYAxisList });
+  chartData = ret.chartData;
+  innerXAxisList = ret.innerXAxisList;
+  innerYAxisList = ret.innerYAxisList;
+  let metricsList = metrics ? rows.map((row) => row[metrics]) : [0, 5];
+  !metricsList.length && (metricsList = [0]);
+  const innerMin = min || Math.min.apply(null, metricsList);
+  const innerMax = max || Math.max.apply(null, metricsList);
+  const xAxis = getAxis(innerXAxisList, xAxisName, "x");
+  const yAxis = getAxis(innerYAxisList, yAxisName, "y");
+  const series = getSeries({ chartData });
+  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" } };
+  let res;
+  let args = { type, options, pointSize, blurSize, res, key, v, url, bmap, mapOrigin, geo, beforeRegisterMap };
+  Object.assign(args, { echarts, specialAreas, position, positionJsonLink, beforeRegisterMapOnce });
+  Object.assign(args, { mapURLProfix, amap, tooltip, xAxis, yAxis });
+  res = getResult(args);
+  return res;
+};
+export {
+  heatmap
+};

package/chart-line/index.js

@@ -0,0 +1,166 @@
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { getFormated, getStackMap, getLegend, hexToRgb, set } from "../chart-core/deps/utils";
+import { isNull } from "../common/type";
+import { itemPoint, itemLabel, itemContent, SAAS_DEFAULT_COLORS } from "../chart-core/deps/constants";
+const getLineXAxis = (args) => {
+  const { xAxisType, dimension, rows, xAxisName, axisVisible } = args;
+  return dimension.map((item, idx) => ({
+    nameLocation: "middle",
+    type: xAxisType,
+    name: xAxisName[idx] || "",
+    nameGap: 22,
+    show: axisVisible,
+    data: rows.map((row) => row[item]),
+    axisTick: { show: true, lineStyle: { color: "#191919", opacity: 0.1, width: 2 }, alignWithLabel: true },
+    axisLine: { show: true, lineStyle: { color: "#191919", opacity: 0.1, width: 2 } },
+    axisPointer: { show: true, type: "line", lineStyle: { color: "#191919", opacity: 0.3, type: "solid" } }
+  }));
+};
+const getAreaSeries = ({ color, seriesItem }) => {
+  const colorStops = [
+    { offset: 0, color: `rgba(${hexToRgb(color)}, 0.5)` },
+    { offset: 1, color: `rgba(${hexToRgb(color)}, 0.1)` }
+  ];
+  seriesItem.areaStyle = { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops } };
+};
+const setSingLineSeries = ({ defaultSeriesItem, seriesItem }) => {
+  defaultSeriesItem.showSymbol = true;
+  set(defaultSeriesItem, "emphasis.itemStyle.color", SAAS_DEFAULT_COLORS[0]);
+  seriesItem.label = __spreadValues({ show: true }, seriesItem.label);
+  seriesItem.itemStyle = __spreadValues({ color: "transparent" }, seriesItem.itemStyle);
+  seriesItem.lineStyle = __spreadValues({ color: SAAS_DEFAULT_COLORS[0] }, seriesItem.lineStyle);
+  seriesItem.animation = seriesItem.animation || false;
+};
+const getLineSeries = (args) => {
+  const { areaStyle, axisSite, area, dimension, itemStyle, label } = args;
+  const { labelMap, lineStyle, metrics, nullAddZero, rows, stack, color, smooth } = args;
+  const dataTempObj = {};
+  const stackMapData = stack && getStackMap(stack);
+  let series = [];
+  metrics.forEach((item) => dataTempObj[item] = []);
+  rows.forEach((row) => {
+    metrics.forEach((item) => {
+      let value = null;
+      if (!isNull(row[item])) {
+        value = row[item];
+      } else if (nullAddZero) {
+        value = 0;
+      }
+      dataTempObj[item].push([row[dimension[0]], value]);
+    });
+  });
+  metrics.forEach((item, i) => {
+    let name = !isNull(labelMap[item]) ? labelMap[item] : item;
+    const isSmooth = !(smooth === false);
+    let seriesItem = { smooth: isSmooth, name, type: "line", data: dataTempObj[item] };
+    const emphasis = { itemStyle: { borderColor: "#fff", borderWidth: 2 } };
+    let defaultSeriesItem = { symbol: "circle", symbolSize: 8, showSymbol: false, emphasis };
+    area && getAreaSeries({ color: color[i], seriesItem });
+    metrics.length === 1 && !isSmooth && setSingLineSeries({ defaultSeriesItem, seriesItem });
+    seriesItem = Object.assign(defaultSeriesItem, seriesItem);
+    axisSite.right && (seriesItem.yAxisIndex = ~axisSite.right.indexOf(item) ? 1 : 0);
+    stack && stackMapData[item] && (seriesItem.stack = stackMapData[item]);
+    label && (seriesItem.label = label);
+    itemStyle && (seriesItem.itemStyle = itemStyle);
+    lineStyle && (seriesItem.lineStyle = lineStyle);
+    areaStyle && (seriesItem.areaStyle = areaStyle);
+    series.push(seriesItem);
+  });
+  return series;
+};
+const getLineYAxis = (args) => {
+  const { yAxisType, yAxisName, scale, axisVisible, max, min, digit } = args;
+  const yAxisBase = {
+    type: "value",
+    show: axisVisible,
+    axisTick: {
+      show: false
+    }
+  };
+  let yAxis = [];
+  for (let k = 0; k < 2; k++) {
+    if (yAxisType[k]) {
+      yAxis[k] = Object.assign({}, yAxisBase, {
+        axisLabel: {
+          formatter(val) {
+            return getFormated(val, yAxisType[k], digit);
+          }
+        }
+      });
+    } else {
+      yAxis[k] = Object.assign({}, yAxisBase);
+    }
+    yAxis[k].name = yAxisName[k] || "";
+    yAxis[k].scale = scale[k] || false;
+    yAxis[k].min = min[k] || null;
+    yAxis[k].max = max[k] || null;
+  }
+  return yAxis;
+};
+const getLineTooltip = (args) => {
+  const { axisSite, yAxisType, digit, labelMap, tooltipFormatter } = args;
+  const rightItemsArr = axisSite.right || [];
+  const rightListArr = labelMap ? rightItemsArr.map((item) => labelMap[item] === void 0 ? item : labelMap[item]) : rightItemsArr;
+  return {
+    formatter(items) {
+      if (tooltipFormatter) {
+        return tooltipFormatter.apply(null, arguments);
+      }
+      let template = [];
+      const { name, axisValueLabel } = items[0];
+      const title = name || axisValueLabel;
+      template.push(`${title}<br>`);
+      items.forEach(({ seriesName, data, color }) => {
+        if (color === "transparent" && items.length === 1) {
+          color = SAAS_DEFAULT_COLORS[0];
+        }
+        let showData = null;
+        const type = ~rightListArr.indexOf(seriesName) ? yAxisType[1] : yAxisType[0];
+        const itemData = Array.isArray(data) ? data[1] : data;
+        showData = getFormated(itemData, type, digit);
+        template.push(itemPoint(color));
+        template.push(`${itemLabel(seriesName)}${itemContent(showData)}`);
+        template.push("<br>");
+      });
+      return template.join("");
+    },
+    trigger: "axis"
+  };
+};
+const line = (columns, rows, settings, extra) => {
+  rows = Array.isArray(rows) ? rows : [];
+  columns = Array.isArray(columns) ? columns : [];
+  const { axisSite = {}, yAxisType = ["normal", "normal"], xAxisType = "category", yAxisName = [] } = settings;
+  const { dimension = [columns[0]], xAxisName = [], axisVisible = true, area, stack } = settings;
+  const { scale = [false, false], min = [null, null], max = [null, null], nullAddZero = false, digit = 2 } = settings;
+  const { legendName = {}, labelMap = {}, label, itemStyle, lineStyle, areaStyle, smooth } = settings;
+  const { tooltipVisible, legendVisible, tooltipFormatter, color } = extra;
+  let metrics = columns.slice();
+  if (axisSite.right && axisSite.left) {
+    metrics = axisSite.left.concat(axisSite.right);
+  } else if (settings.metrics) {
+    metrics = settings.metrics;
+  } else if (axisSite.left && !axisSite.right) {
+    metrics = axisSite.left;
+  } else {
+    metrics.splice(columns.indexOf(dimension[0]), 1);
+  }
+  let legendItemStyle;
+  if (metrics.length === 1) {
+    legendItemStyle = { itemStyle: { color: SAAS_DEFAULT_COLORS[0] } };
+  }
+  const legend = legendVisible && getLegend({ legendName, metrics, labelMap, legendItemStyle });
+  const tooltip = tooltipVisible && getLineTooltip({ axisSite, digit, labelMap, tooltipFormatter, xAxisType, yAxisType });
+  const xAxis = getLineXAxis({ axisVisible, dimension, xAxisName, xAxisType, rows });
+  const yAxis = getLineYAxis({ axisVisible, digit, max, min, scale, yAxisType, yAxisName });
+  const seriesParam = { areaStyle, area, axisSite, dimension, itemStyle, lineStyle };
+  Object.assign(seriesParam, { label, labelMap, metrics, nullAddZero, rows, xAxisType, stack, color, smooth });
+  const series = getLineSeries(seriesParam);
+  let options = { legend, xAxis, series, yAxis, tooltip };
+  return options;
+};
+export {
+  line
+};

package/chart-liquidfill/index.js

@@ -0,0 +1,54 @@
+import "../chunk-G2ADBYYC.js";
+import { getFormated, isObject } from "../chart-core/deps/utils";
+import { itemLabel, itemContent } from "../chart-core/deps/constants";
+const isArr = Array.isArray;
+const getTooltip = (args) => {
+  const { tooltipFormatter, dataType, digit } = args;
+  function formatter(options) {
+    const { seriesName, value } = options;
+    if (!tooltipFormatter) {
+      return [`${itemLabel(seriesName)}`, itemContent(getFormated(value, dataType, digit))].join("");
+    }
+    return tooltipFormatter.apply(null, arguments);
+  }
+  return { show: true, formatter };
+};
+const getSeries = (args) => {
+  const { dimension, metrics, rows, seriesMap, wave } = args;
+  let itemWave = wave;
+  let len = isArr(seriesMap) ? seriesMap.length : 0;
+  return rows.slice().map((item, index) => {
+    let { data = [], result = { type: "liquidFill" }, name = item[dimension] } = {};
+    let { val = Number(item[metrics]), itemMap = {} } = {};
+    if (isArr(seriesMap)) {
+      itemMap = seriesMap[index] ? seriesMap[index] : seriesMap[len - 1];
+    } else if (isObject(seriesMap[name])) {
+      itemMap = seriesMap[name];
+    }
+    if (isArr(wave) && isArr(wave[0])) {
+      itemWave = !isArr(wave[index]) ? wave[wave.length - 1] : wave[index];
+    }
+    data.push({ value: val });
+    if (itemWave.length && itemWave) {
+      data = data.concat(itemWave.map((val2) => ({ value: val2 })));
+    }
+    result.itemStyle = { shadowBlur: 0 };
+    result.label = { color: "#6D8FF0" };
+    result.backgroundStyle = { color: "#F4F3F9" };
+    result.outline = { itemStyle: { borderColor: "#6D8FF0", shadowBlur: 0 } };
+    !itemMap.color && (result.itemStyle = Object.assign(result.itemStyle, { color: "#6D8FF0" }));
+    result = Object.assign(result, { data, name }, itemMap);
+    return result;
+  });
+};
+const liquidfill = (columns, rows, settings, extra) => {
+  const { dimension = columns[0], metrics = columns[1] } = settings;
+  const { seriesMap = {}, dataType = "percent", digit = 2, wave = [] } = settings;
+  const { tooltipVisible, tooltipFormatter } = extra;
+  const tooltip = tooltipVisible && getTooltip({ tooltipFormatter, dataType, digit });
+  const series = getSeries({ rows, columns, dimension, metrics, seriesMap, wave });
+  return { tooltip, series };
+};
+export {
+  liquidfill
+};