React如何以Hook的方式使用Echarts
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
背景
目前组内在开发的项目使用的虽然是React,但是并不是之前的类式组件,所以写法有不少的区别
经过查阅之后,现以Hook的方式使用Echarts,在此进行总结,方便之后的学习。
步骤
安装Echarts
首先引入Echarts的模块
如果你使用的是 Typescript ,那么还需要引入 @types/echarts
代码中引入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' |
按需引入的优点是最后打包生成的文件较小,一般会采用这种方法
全部引入
使用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中代码如下
使用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 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 |
最终效果
最后的结果如下图所示
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
react router4+redux实现路由权限控制的方法
本篇文章主要介绍了react router4+redux实现路由权限控制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-05-05使用react render props实现倒计时的示例代码
这篇文章主要介绍了使用react render props实现倒计时的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论