@castianta/chart-lc/es/demo/pointLine.js

lc版图表

import _Button from "antd/es/button";
import _Tooltip from "antd/es/tooltip";
import _extends from "@babel/runtime/helpers/extends";
import { useState, useEffect, useRef } from 'react';
import { PointLine } from '../index';
import { SettingOutlined, CodeSandboxOutlined } from '@ant-design/icons';
import BaseDrawer from './baseDrawer';
export default (function () {
  var ref = useRef();

  var _useState = useState(),
      config = _useState[0],
      setConfig = _useState[1];

  var _useState2 = useState([{
    name: '点线1',
    pointColor: '#a8071a',
    color: '#6fd',
    pointSize: 20,
    pointShape: 'Square',
    data: [],
    pointRotationEnabled: true,
    pointSizeEnabled: true,
    thickness: 6
  }, {
    name: '点线2',
    pointColor: '#3f6600',
    color: '#c4d',
    pointSize: 10,
    pointShape: 'Triangle',
    data: [],
    pointRotationEnabled: true,
    pointSizeEnabled: true,
    thickness: 3
  }]),
      dataSource = _useState2[0],
      setDataSource = _useState2[1];

  useEffect(function () {
    var timer = setInterval(function () {
      setDataSource(function (source) {
        return source.map(function (item) {
          return _extends({}, item, {
            data: [].concat(item === null || item === void 0 ? void 0 : item.data, [{
              x: (item === null || item === void 0 ? void 0 : item.data.length) * 1000,
              y: Math.random(),
              rotation: Math.random() * 360,
              size: Math.random() * 30
            }])
          });
        });
      });
    }, 1000);
    return function () {
      clearInterval(timer);
    };
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseDrawer, {
    ref: ref,
    dataSource: dataSource,
    setDataSource: setDataSource,
    useConfig: setConfig,
    tab: {
      title: '点线配置',
      params: ['name', 'color', 'thickness', 'cursorEnabled', 'pointShape', 'point3DStyle', 'point3DShape', 'pointSize', 'pointColor']
    }
  }), config && /*#__PURE__*/React.createElement(PointLine, _extends({}, config, {
    card: {
      title: /*#__PURE__*/React.createElement(_Tooltip, {
        title: "\u5728 CodeSandbox \u4E2D\u6253\u5F00"
      }, /*#__PURE__*/React.createElement(CodeSandboxOutlined, {
        onClick: function onClick() {
          return window.open('https://codesandbox.io/s/qcxe5');
        }
      })),
      extra: /*#__PURE__*/React.createElement(_Button, {
        type: "primary",
        onClick: function onClick() {
          var onVisible = ref.current.onVisible;
          onVisible(true);
        },
        icon: /*#__PURE__*/React.createElement(SettingOutlined, null)
      })
    },
    dataSource: dataSource
  })));
});