React如何以Hook的方式使用Echarts

 更新时间:2024年03月14日 09:04:51   作者:tygkking  
这篇文章主要介绍了React如何以Hook的方式使用Echarts问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

背景

目前组内在开发的项目使用的虽然是React,但是并不是之前的类式组件,所以写法有不少的区别

经过查阅之后,现以Hook的方式使用Echarts,在此进行总结,方便之后的学习。

步骤

安装Echarts

首先引入Echarts的模块

1
npm install echarts --save

如果你使用的是 Typescript ,那么还需要引入 @types/echarts

1
npm install @types/echarts --save

代码中引入Echarts

有两种方式,二选其一,按需引入全部引入,各有优劣,各位可自行选择

按需引入

代码如下,使用了echarts,line,tooltip,legend

1
2
3
4
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'

按需引入的优点是最后打包生成的文件较小,一般会采用这种方法

全部引入

1
import echarts from 'echarts'

使用Echarts

React自从新增了Hook特性以后,使用函数式组件,需要改动一定的地方。

使用useEffect代替之前的初始化函数

提示

  • 如果你熟悉 React class 的生命周期函数
  • 你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

初始化图表

使用getElementById初始化

综上,可以在 useEffect 中写原先在 componentDidMount() 的初始化图表的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
let element = document.getElementById('main');
let myChart = echarts.init(element as HTMLDivElement);
let option = {
    title: {
        text: 'ECharts 入门示例',
    },
    tooltip: {
    },
    legend: {
        data:['销量', '利润', '比率']
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {
    },
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },
        {
            name: '利润',
            type: 'bar',
            data: [30, 25, 15, 20, 20, 35]
        },
        {
            name: '比率',
            type: 'line',
            data: [35, 30, 20, 25, 25, 40]
        }]
    };
myChart.setOption(option);

DOM中代码如下

1
2
3
<div>
    <div id={'main'} style={{height: 400}}/>
</div>

使用Ref引用初始化

除了上述的使用getElementById的方法以外,还可以使用ref引用的方式,如以下代码所示,最后在useEffect里调用renderChart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const main2 = useRef(null);
let chartInstance = null;
 
let renderChart = () => {
    const myChart = echarts.getInstanceByDom(main2.current as unknown as HTMLDivElement);
    if(myChart)
        chartInstance = myChart;
    else
        chartInstance = echarts.init(main2.current as unknown as HTMLDivElement);
    chartInstance.setOption({
        title: {
            text: '燃尽图'
        },
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        legend: {
            data: ['Remain', 'Ideal']
        },
        xAxis: {
            boundaryGap: false,
            type: 'category',
            data: ['1-1', '1-2', '1-3', '1-5', '1-6', '1-7', '1-8', '1-9']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Remain',
                data: [140, 110, 100, 90, 70, 30, 10, 0],
                type: 'line'
            },
            {
                name: 'Ideal',
                data: [140, 120, 100, 80, 60, 40, 20, 0],
                type: 'line'
            }
        ]
    })
};

DOM中代码如下

1
2
3
<div>
    <div style={{height: 400}} ref={main2}/>
</div>

整体代码

整体的代码如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React, {useEffect, useRef, useState} from "react";
import echarts from 'echarts';
 
const Test: React.FC =  () => {
    const main2 = useRef(null);
    let chartInstance = null;
 
    let renderChart = () => {
        const myChart = echarts.getInstanceByDom(main2.current as unknown as HTMLDivElement);
        if(myChart)
            chartInstance = myChart;
        else
            chartInstance = echarts.init(main2.current as unknown as HTMLDivElement);
        chartInstance.setOption({
            title: {
                text: '燃尽图'
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['Remain', 'Ideal']
            },
            xAxis: {
                boundaryGap: false,
                type: 'category',
                data: ['1-1', '1-2', '1-3', '1-5', '1-6', '1-7', '1-8', '1-9']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Remain',
                    data: [140, 110, 100, 90, 70, 30, 10, 0],
                    type: 'line'
                },
                {
                    name: 'Ideal',
                    data: [140, 120, 100, 80, 60, 40, 20, 0],
                    type: 'line'
                }
            ]
        })
    };
 
    let initChart = () => {
        let element = document.getElementById('main');
        let myChart = echarts.init(element as HTMLDivElement);
        let option = {
            title: {
                text: 'ECharts 入门示例',
            },
            tooltip: {
            },
            legend: {
                data:['销量', '利润', '比率']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                },
                {
                    name: '利润',
                    type: 'bar',
                    data: [30, 25, 15, 20, 20, 35]
                },
                {
                    name: '比率',
                    type: 'line',
                    data: [35, 30, 20, 25, 25, 40]
                }]
        };
        myChart.setOption(option);
    };
     
    useEffect(() => {
        initChart();
        renderChart();
    });
 
    return(
        <div>
            <div id={'main'} style={{height: 400}}/>
            <div style={{height: 400}} ref={main2}/>
        </div>
    );
};
 
export default Test

最终效果

最后的结果如下图所示

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/tygkking/article/details/103990048

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 作为老司机使用 React 总结的 11 个经验教训

    作为老司机使用 React 总结的 11 个经验教训

    这篇文章主要介绍了作为老司机使用 React 总结的 11 个经验教训,需要的朋友可以参考下
    2017-04-04
  • 阿里低代码框架lowcode-engine自定义设置器详解

    阿里低代码框架lowcode-engine自定义设置器详解

    这篇文章主要为大家介绍了阿里低代码框架lowcode-engine自定义设置器示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • react之umi配置国际化语言locale的踩坑记录

    react之umi配置国际化语言locale的踩坑记录

    这篇文章主要介绍了react之umi配置国际化语言locale的踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • react router4+redux实现路由权限控制的方法

    react router4+redux实现路由权限控制的方法

    本篇文章主要介绍了react router4+redux实现路由权限控制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Rect Intersection判断两个矩形是否相交

    Rect Intersection判断两个矩形是否相交

    这篇文章主要为大家介绍了Rect Intersection判断两个矩形是否相交的算法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • react中的axios模块你了解吗

    react中的axios模块你了解吗

    这篇文章主要为大家详细介绍了react中的axios模块,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • react实现简单的拖拽功能

    react实现简单的拖拽功能

    这篇文章主要为大家详细介绍了react实现简单的拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 使用react render props实现倒计时的示例代码

    使用react render props实现倒计时的示例代码

    这篇文章主要介绍了使用react render props实现倒计时的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 详解React Native 屏幕适配(炒鸡简单的方法)

    详解React Native 屏幕适配(炒鸡简单的方法)

    React Native 可以开发 ios 和 android 的 app,在开发过程中,势必会遇上屏幕适配,这篇文章主要介绍了详解React Native 屏幕适配(炒鸡简单的方法),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • react-three-fiber实现炫酷3D粒子效果首页

    react-three-fiber实现炫酷3D粒子效果首页

    这篇文章主要介绍了react-three-fiber实现3D粒子效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08

最新评论