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

🌈 🚀lm组件库。🚀

import React, { useMemo, useRef, useEffect } from 'react';
import Modal from "../../modal";
// import type { ILMModalProps } from 'linkmore-design'

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart, PieChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import { TitleComponent, TooltipComponent, GridComponent,
// 数据集组件
DatasetComponent,
// 内置数据转换器组件 (filter, sort)
TransformComponent } from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
import { getBarOption, getLineOption, getPieOption } from "../chartUtil";

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

// interface IProps extends ILMModalProps {

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

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