react 中渲染 echarts (hooks+ts)

1.全部导入:

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

interface Props {
    
}

const ThirdPage = (props: Props) => {
    React.useEffect(() => {
        // 基于准备好的dom，初始化echarts实例
        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.按需导入:

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,
  // 数据集组件
  DatasetComponent,
  DatasetComponentOption,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 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(() => {
        // 基于准备好的dom，初始化echarts实例
        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>
            {/* 这里样式必须设置高度 */}
            <div style={{ width: '100%', height: '500px' }} id='echartsContent'></div>
        </div>
    )
}

export default ThirdPage