注：这里只是为了记录自己开发过程中遇到的问题

为了熟悉react各类技术栈，这里使用的ref来实现的折线图加载

下面是代码概要：

// 引入相关依赖

import React, { useEffect, useState, useRef } from 'react'；?

import echarts from 'echarts/lib/echarts'?

import?'echarts/lib/component/title';

import?'echarts/lib/chart/line';

import?'echarts/lib/component/tooltip';

import?'echarts/lib/component/legend';? ?

// 声明使用ref

const echart1Div = useRef(null)

const echart2Div = useRef(null)

// 多表联动?

useEffect(() => {

? ? ? ? if (echartData1 &&?echartData2) {

? ? ? ? ? ? ? ? let echart1 = echarts.init((ehcart1Div.current as unknown) as HTMLDivElement)

????????????????let echart2?= echarts.init((ehcart2Div.current as unknown) as HTMLDivElement)

? ? ? ? ? ? ? ? // 上边处理时因为使用的TS，不处理会报错unknown

? ? ? ? ? ? ? ? ehcarts.connect([echart1 ,echart2?]) // 多表联动

? ? ? ? ? ? ? ? ehcart1.setOption(option1, true)?

????????????????ehcart1.setOption(option2, true)

????????????????// 这里的true是重绘echarts图时是否与前边折线图合并，true为不合并；默认为false合并

????????}

}, [ echartData1, echartData2?])

// 折线图渲染

{ehcart1判断条件 && (

? ? ? ? <div style={{ width: '100%', height: '200px' }} ref={ehcart1Div} />

)}

{ehcart2判断条件 && (

? ? ? ? <div style={{ width: '100%', height: '200px' }} ref={ehcart2Div} />

)}

好了，记录完毕~

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。