1.全部導(dǎo)入:

import React from 'react';
import * as echarts from 'echarts';

interface Props {
    
}

const ThirdPage = (props: Props) => {
    React.useEffect(() => {
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        const myChart = echarts.init(document.getElementById('echartsContent') as HTMLElement);
        
        const option = {
            xAxis: {},
            yAxis: {},
            series: [
                {
                type: 'scatter',
                symbolSize: 20,
                data: [
                    [10.0, 8.04],
                    [8.07, 6.95],
                ],
                }
            ]
        };
        myChart.setOption(option);
    }, [])

    return (
        <div>
            <h2>Echarts</h2>
            <div style={{ width: '100%', height: '500px' }} id='echartsContent'></div>
        </div>
        
    )
}

export default ThirdPage

2.按需導(dǎo)入:

import React from 'react';
import * as echarts from 'echarts/core';
import {
  BarChart,
  // 系列類型的定義后綴都為 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption
} from 'echarts/charts';
import {
  TitleComponent,
  // 組件類型的定義后綴都為 ComponentOption
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  // 數(shù)據(jù)集組件
  DatasetComponent,
  DatasetComponentOption,
  // 內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 通過 ComposeOption 來組合出一個(gè)只有必須組件和圖表的 Option 類型
type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;


interface Props {
    
}

const ThirdPage = (props: Props) => {
    // 注冊必須的組件
    echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        BarChart,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer
    ]);

    React.useEffect(() => {
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        const myChart = echarts.init(document.getElementById('echartsContent') as HTMLElement);
        
        const option:ECOption = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            xAxis: {
                data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
            },
            yAxis: {},
            series: [
                {
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        myChart.setOption(option);
    }, [])

    return (
        <div>
            <h2>Echarts</h2>
            {/* 這里樣式必須設(shè)置高度 */}
            <div style={{ width: '100%', height: '500px' }} id='echartsContent'></div>
        </div>
    )
}

export default ThirdPage