TCharts 图表的 React 封装

使用

安装依赖

npm install @tencent/tcharts-react

使用

import { Component } from 'react';
import TvisionCharts from '@tencent/tcharts-react';

class App extends Component {
  state = {
    chartType: 'line',
    options: {
      xAxis: {
        type: 'category',
        data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
      },
      yAxis: {
        axisLabel: { inside: false },
      },
      series: [
        {
          data: [820, 932, 901, 934, 600, 500, 700, 900, 1330, 1320, 1200, 1300, 1100],
          type: 'line',
        },
      ],
    },
  };
  render() {
    return (
      <div className="App">
        <div style={{
          width: 800,
          height: 500,
        }}>
          <TvisionTcharts
            chartType={this.state.chartType}
            options={this.state.options}
            onChartReady={() => console.log('ready')}
            onChartDestroyed={() => console.log('destroyed')}
            onChartUpdated={() => console.log('updated')}
          />
        </div>
      </div>
    );
  }
}

export default App;