@castianta/chart-lc/es/demo/line.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 { Line } 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',
    color: '#a8071a',
    thickness: 10,
    cursorEnabled: true,
    data: []
  }, {
    name: '线条2',
    color: '#3f6600',
    thickness: 5,
    cursorEnabled: false,
    data: []
  }]),
      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()
            }])
          });
        });
      });
    }, 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']
    }
  }), config && /*#__PURE__*/React.createElement(Line, _extends({}, config, {
    xAxis: {
      scrollStrategy: 'fitting',
      tickStrategy: 'DateTime'
    },
    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/2g3y8');
        }
      })),
      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
  })));
});