linkmore-design/lib/lm-table/components/tableChartsModal.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _modal = _interopRequireDefault(require("../../modal"));
var echarts = _interopRequireWildcard(require("echarts/core"));
var _charts = require("echarts/charts");
var _components = require("echarts/components");
var _features = require("echarts/features");
var _renderers = require("echarts/renderers");
var _chartUtil = require("../chartUtil");
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。

// 引入柱状图图表，图表后缀都为 Chart

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component

// 标签自动布局，全局过渡动画等特性

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步

// 注册必须的组件
echarts.use([_components.TitleComponent, _components.TooltipComponent, _components.GridComponent, _components.DatasetComponent, _components.TransformComponent, _charts.BarChart, _charts.LineChart, _charts.PieChart, _features.LabelLayout, _features.UniversalTransition, _renderers.CanvasRenderer]);

// interface IProps extends ILMModalProps {

function getSelectRange(data, start, end) {
  const max = Math.max(start, end);
  const min = Math.min(start, end);
  const result = data?.filter((item, index) => {
    if (index >= min && index <= max) {
      return true;
    }
    return false;
  });
  return result;
}

/** i 是行  j 是列 */
const TableChartsModal = props => {
  const chartRef = (0, _react.useRef)(null);
  let chart;
  const {
    type,
    onCancel,
    data,
    columns,
    selectInfo,
    rowKey,
    deepDataSource
  } = props;
  console.log(data, columns, '---props---', rowKey);
  const resultData = (0, _react.useMemo)(() => {
    const {
      start,
      end
    } = selectInfo;
    const cols = getSelectRange(columns, start.j, end.j);
    const source = getSelectRange(deepDataSource || data, start.i, end.i);
    let option;
    if (type === 'bar') {
      option = (0, _chartUtil.getBarOption)(cols, source);
    }
    if (type === 'line') {
      option = (0, _chartUtil.getLineOption)(cols, source);
    }
    if (type === 'pie') {
      option = (0, _chartUtil.getPieOption)(cols, source);
    }
    return {
      source,
      cols,
      option
    };
  }, [data, columns, selectInfo]);
  (0, _react.useEffect)(() => {
    chart = echarts.init(chartRef.current);
    chart.setOption(resultData.option);
  }, []);
  return /*#__PURE__*/_react.default.createElement(_modal.default, {
    visible: !!type,
    title: "\u667A\u80FD\u62A5\u8868",
    onOk: onCancel,
    onCancel: onCancel
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "xiaoming",
    ref: chartRef,
    style: {
      width: 500,
      height: 400
    }
  }));
};
var _default = TableChartsModal;
exports.default = _default;