chart

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Chart from '@baishan/chart-line';

const option = {
  grid: {
    left: 40,
    right: 40,
    top: 40,
    bottom: 40,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      interval: 10,
    },
    data: ["1", "2", "3"],
    axisLine: {
      show: false,
    },
  },
  axisTick: {
    lineStyle: {
      color: 'rgba(235, 237, 244, 1)',
    },
  },
  yAxis: {
    name: `2：Mbps`,
    nameTextStyle: {
      color: '#6B7586',
      align: 'left',
    },
    nameGap: 20,
    type: 'value',
  },
  series: [
    {
      symbol: 'none',
      data: [1, 2, 3],
      type: 'line',
      lineStyle: {
        color: '#137CFB',
        shadowColor: 'blue',
        shadowBlur: 30,
        shadowOffsetY: 10,
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.5,
              color: 'rgba(23, 128, 255, 0.4)',
            },
            {
              offset: 1,
              color: 'rgba(19, 124, 251, 0.1)', // #1780FF'
            },
          ],
          global: false,
        },
      },
    },
  ],
};

const style= {
  height: '400px',
  width: '1000px'
};

class App extends Component {
  render() {
    return (
      <div id="demo" style={style}>
        <Chart id={"demo"} option={option} />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);