react+typescript中如何使用echarts

React + TypeScript 中如何使用 ECharts

ECharts 是一個由百度開源的強大的數據可視化庫，廣泛應用于各種數據展示場景。結合 React 和 TypeScript，我們可以構建出類型安全、可維護性高的數據可視化應用。本文將詳細介紹如何在 React + TypeScript 項目中使用 ECharts。

1. 環境準備

在開始之前，確保你已經安裝了 Node.js 和 npm（或 yarn）。接下來，我們需要創建一個新的 React 項目，并安裝必要的依賴。

1.1 創建 React 項目

使用 create-react-app 創建一個新的 React 項目：

npx create-react-app my-echarts-app --template typescript

進入項目目錄：

cd my-echarts-app

1.2 安裝 ECharts

安裝 ECharts 和相關的 TypeScript 類型定義：

npm install echarts
npm install @types/echarts --save-dev

2. 基本使用

2.1 創建一個簡單的 ECharts 圖表

首先，在 src 目錄下創建一個新的組件 EChartsComponent.tsx：

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const EChartsComponent: React.FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const myChart = echarts.init(chartRef.current);

      const option = {
        title: {
          text: 'ECharts 入門示例'
        },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      myChart.setOption(option);
    }
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }}></div>;
};

export default EChartsComponent;

2.2 在 App 組件中使用 EChartsComponent

在 App.tsx 中引入并使用 EChartsComponent：

import React from 'react';
import './App.css';
import EChartsComponent from './EChartsComponent';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <h1>React + TypeScript + ECharts</h1>
        <EChartsComponent />
      </header>
    </div>
  );
};

export default App;

2.3 運行項目

啟動項目：

npm start

打開瀏覽器，訪問 http://localhost:3000，你應該會看到一個簡單的柱狀圖。

3. 高級用法

3.1 動態更新圖表數據

在實際應用中，圖表的數據通常是動態變化的。我們可以通過 React 的狀態管理來實現數據的動態更新。

3.1.1 修改 EChartsComponent

修改 EChartsComponent.tsx，使其能夠接收外部數據并動態更新圖表：

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

interface EChartsComponentProps {
  data: number[];
}

const EChartsComponent: React.FC<EChartsComponentProps> = ({ data }) => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const myChart = echarts.init(chartRef.current);

      const option = {
        title: {
          text: 'ECharts 動態數據示例'
        },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: data
          }
        ]
      };

      myChart.setOption(option);
    }
  }, [data]);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }}></div>;
};

export default EChartsComponent;

3.1.2 修改 App 組件

在 App.tsx 中，添加狀態管理來動態更新數據：

import React, { useState, useEffect } from 'react';
import './App.css';
import EChartsComponent from './EChartsComponent';

const App: React.FC = () => {
  const [data, setData] = useState<number[]>([5, 20, 36, 10, 10, 20]);

  useEffect(() => {
    const interval = setInterval(() => {
      setData(prevData => prevData.map(value => value + Math.floor(Math.random() * 10)));
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <h1>React + TypeScript + ECharts</h1>
        <EChartsComponent data={data} />
      </header>
    </div>
  );
};

export default App;

3.2 使用 ECharts 的主題

ECharts 提供了多種內置主題，我們可以通過 echarts.init 的第二個參數來指定主題。

3.2.1 安裝主題

首先，安裝 ECharts 的主題包：

npm install echarts-theme

3.2.2 使用主題

在 EChartsComponent.tsx 中，引入并使用主題：

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import 'echarts-theme/macarons';

const EChartsComponent: React.FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const myChart = echarts.init(chartRef.current, 'macarons');

      const option = {
        title: {
          text: 'ECharts 主題示例'
        },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      myChart.setOption(option);
    }
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }}></div>;
};

export default EChartsComponent;

3.3 處理窗口大小變化

當窗口大小變化時，ECharts 圖表可能需要重新調整大小。我們可以通過監聽 resize 事件來實現這一點。

3.3.1 修改 EChartsComponent

在 EChartsComponent.tsx 中，添加窗口大小變化的監聽：

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const EChartsComponent: React.FC = () => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const myChart = echarts.init(chartRef.current);

      const option = {
        title: {
          text: 'ECharts 窗口大小變化示例'
        },
        tooltip: {},
        xAxis: {
          data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
          {
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      myChart.setOption(option);

      const handleResize = () => {
        myChart.resize();
      };

      window.addEventListener('resize', handleResize);

      return () => {
        window.removeEventListener('resize', handleResize);
      };
    }
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }}></div>;
};

export default EChartsComponent;

4. 總結

通過本文的介紹，你應該已經掌握了如何在 React + TypeScript 項目中使用 ECharts。我們從基本的使用開始，逐步介紹了動態數據更新、主題應用以及窗口大小變化的處理。ECharts 提供了豐富的配置項和強大的功能，結合 React 和 TypeScript，你可以構建出高效、可維護的數據可視化應用。

希望本文對你有所幫助，祝你在數據可視化的道路上越走越遠！