Umi中引入echarts图表

前言

本文将介绍如何在 Umi 中引入echarts， 在引入echarts之前首先需要安装echarts的依赖

• 安装依赖 echarts 和 echarts-for-react

npm install --save echarts     
npm install --save echarts-for-react

• 使用之前先为大家扩展一些常用的 echarts方法

echarts.init()      //创建一个Echarts实例 返回一个echartsInstance(echarts实例)
echarts.getInstanceByDom()    //获取dom容器上的实例 (里面需要传入一个dom节点)
echarts.dispose()   // 销毁创建的echarts实例
//上方三个为本文需要用到的方法

//此处的 echartsInstance 相当于下方的 myChart
//var chartDom = document.getElementById('main')!
//var myChart = echarts.init(chartDom)
echartsInstance.getWidth()    //获取Echarts实例容器的宽度
echartsInstance.getHeight()    //获取Echarts实例容器的高度
echartsInstance.getDom()    //获取Echarts实例容器的dom节点
//等等还有好多...

• 在需要用到的组件内引用 (此处为全局引用)

import * as echarts from 'echarts'
import { EChartsOption } from 'echarts-for-react'
import { Component, FC, useEffect } from 'react'     //此处引用useEffect是为了清除副作用

• 接下来进入正题了，创建一个index.tsx 此处用的是一个 散点图

函数式组件

type EChartsOptions = echarts.EChartsOption;   //定义 EChartsOption 类型
const EchartsTest: FC = () => {             //创建一个函数组件用来作为容器
  useEffect(() => {         
    //此处使用 useEffect 是为了在离开这个组件时候直接销毁掉echarts实例
    var chartDom = document.getElementById('main')!;  //获取dom
    var myChart = echarts.init(chartDom);        //初始化图表
    var option: EChartsOptions;

    option = { }; //直接无脑复制官网配置就好
    option && myChart.setOption(option);
    
    return ()=>{     // 此处返回一个回调函数 用来销毁echarts实例
      myChart.dispose()
      console.log(myChart)  //已滞空
      console.log('卸载了主页的echarts')

    }
  },[])
  // 返回一个 容器 id为 main 记得一定要给 这个容器宽高 否则控制台会有警告
   //这里的styles.echarts是自己写的标签样式 根据需求自定义
  return <div id="main" className={styles.echarts}></div>
};

export default function Home() {
  return (
    <div className='box'>
      <EchartsTest />  //直接在此渲染图表
      //下方可以写一些别的业务
      
    </div>
  )
}

类式组件

// 类式组件
class Index extends Component {
  //写一个初始化echarts函数
  newEcharts = ()=>{
    var chartDom = document.getElementById('mainss')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {} // 参数同上直接
    option && myChart.setOption(option);
  }
  //销毁echarts实例
  closeEcharts = () => {
    // 获取dom节点
    var chartDom = document.getElementById('mainss')!;
    //获取dom 实例
    var myChart = echarts.getInstanceByDom(chartDom);
    // 因为 myChart 可能为 undefined 这里做了一个判断 不做判断ts会报错
    if (myChart !== undefined) {
      // 销毁dom实例
      myChart.dispose()
      console.log('卸载了总结中心的echarts,类式组件版本')
      console.log(myChart)  //已滞空
    }
  }
  //加载完成钩子
  componentDidMount(): void {
    // 页面初始化时调用echarts
    this.newEcharts()
  }
  //组件将要卸载钩子
  componentWillUnmount(): void {
    // 页面即将卸载时 销毁echarts实例
    this.closeEcharts()
  }
  render() {
    // 返回一个 容器 id为 mainss 记得一定要给 这个容器宽高 否则控制台会有警告
    return <div id="mainss" className={styles.echarts}> </div>
  }
}
export default function Home() {
  return (
    <div className='box'>
      <Index/>
      // 下方可以写一些别的业务
    </div>
  )
}

总结

此篇是学习本人umi框架时的一些练习，也是第一次在掘金写文章哈哈，这种感觉好棒，后续会更新使用Websocket配合echarts来实现一个实时更新图表的效果，一起加油吧各位大佬们！！！！