Basic.tsx

import React from 'react';
import BasicChart from '../index';

const Demo = () => {
  return (
    <div>
      <h3>折线图</h3>
      <div style={{ height: '600px' }}>
        <BasicChart chartOptions={chartOptions1} />
      </div>
      <h3 style={{ marginTop: '40px' }}>曲线面积图</h3>
      <div style={{ height: '600px' }}>
        <BasicChart chartOptions={chartOptions2} />
      </div>
      <h3 style={{ marginTop: '40px' }}>带滚动条曲线图</h3>
      <div style={{ height: '600px' }}>
        <BasicChart chartOptions={chartOptions3} constructorType={'stockChart'} />
      </div>
    </div>
  );
};

export default Demo;

const chartOptions1 = {
  // ...
  series: [
    {
      name: '今日供水量',
      color: '#1884EC',
      data: [
        [1620720173000, 122],
        [1620720473000, 122],
        [1620720773000, 122],
        [1620721073000, 123],
        [1620721373000, 123],
        [1620721673000, 123],
        [1620721973000, 124],
        [1620722274000, 124],
        [1620722724000, 125],
        [1620723024000, 125],
        [1620723324000, 125],
      ],
    },
  ],
};

const chartOptions2 = {
  // ...
  series: [
    {
      type: 'areaspline',
      name: '出水瞬时流量',
      color: '#68cbd1',
      data: [
        [1620720173000, 1.85],
        [1620720473000, 8.22],
        [1620720773000, 2.83],
        [1620721073000, 2.62],
        [1620721373000, 2.05],
        [1620721673000, 8.7],
        [1620721973000, 2.38],
        [1620722274000, 3.31],
        [1620722724000, 2.36],
        [1620723024000, 2.98],
        [1620723324000, 2.58],
      ],
      marker: {
        enabled: false,
      },
    },
  ],
  plotOptions: {
    areaspline: {
      fillOpacity: 0.5,
    },
  },
};

const chartOptions3 = {
  // ...
  series: [
    {
      type: 'spline',
      name: '进水压力',
      color: '#1884EC',
      data: [
        [1620720173000, 0.08],
        [1620720473000, 0.09],
        [1620720773000, 0.09],
        [1620721073000, 0.09],
        [1620721373000, 0.09],
        [1620721673000, 0.08],
        [1620721973000, 0.09],
        [1620722274000, 0.09],
        [1620722724000, 0.09],
        [1620723024000, 0.08],
        [1620723324000, 0.08],
      ],
    },
  ],
};