在 UMI.js 中使用 Echarts 图表

慕仲卿
249 阅读4分钟

本文对最近工作中的一个组件进行抽象，提供一个在 UMI.js 中使用 Echarts 图表的模板。使用这个模板，开发者只需要关注填写 option 部分即可，无需关注其它问题。

注意，使用额 umi.js 版本为 @umijs/max@4.0.89 ，echarts-for-react 版本为 3.0.2。

1. Echarts 模板

// 引入React库及相关hooks  
import React, { useEffect, useRef } from "react";   
  
// 引入当前目录下的样式文件  
import styles from "./index.less";  
  
// 引入ReactEcharts组件，用于在React中集成ECharts图表库  
import ReactEcharts from 'echarts-for-react';   
  
// 定义一个名为BarChart的函数组件  
const BarChart = (props) => {  
  
  // 从props中解构出timeStamp属性  
  const { timeStamp } = props;  
  
  // 使用useRef hook创建一个ref，用于引用ReactEcharts组件的实例  
  const serverChatref = useRef(null);  
  
  // 使用useEffect hook，当timeStamp变化时，会触发此hook内的函数  
  useEffect(() => {  
  
    // 从ref中获取ReactEcharts组件的实例  
    const { current } = serverChatref;  
  
    // 定义一个ECharts的配置项对象，此处为空对象，实际应用中需要具体配置  
    const option = {};  
  
    // 调用ReactEcharts实例的setOption方法，将配置项应用到图表上  
    current.getEchartsInstance().setOption(option);  
  
  }, [timeStamp]) // 依赖项数组，当timeStamp变化时，重新执行useEffect内的函数  
  
  // 组件返回的JSX  
  return (  
    <div style={{}}> {/* 此处的style为空对象，可以根据需要添加样式 */}  
  
      {/* ReactEcharts组件，用于渲染ECharts图表 */}  
      <ReactEcharts  
        className={styles.echartsContainer} {/* 应用样式类名 */}  
        ref={serverChatref} {/* 将ref绑定到ReactEcharts组件上 */}  
        notMerge={true} {/* 不合并配置项，每次setOption都会清空之前的配置项 */}  
        lazyUpdate={true} {/* 启用懒加载更新模式，提高性能 */}  
        option={{}} {/* ECharts的配置项，此处为空对象，需要具体配置 */}  
      />  
  
    </div>  
  )  
}  
  
// 导出BarChart组件，使其可以在其他文件中使用  
export default BarChart;

2. 使用示例

上述代码中通过 props 传一个时间戳进去，其目的在于保证父组件改变数据的时候，BarChart 组件一定会刷新。

调用这个 BarChart 组件的代码可以写成。

<div
  className={styles.gasChart}
>
  <BarChart data={data} timeStamp={+new Date()} />
</div>

其中的 data 用于构建 option 配置对象。

效果如下：

image.png image.png image.png

3. 细节添加

在数据可视化或者报表展示中，交互性是一个不可或缺的元素。通过为图表添加鼠标交互动作，我们可以使用户更加直观地探索和分析数据。为了实现这些交互功能，我们经常需要用到 getEchartsInstance 这个方法。该方法的重要性在于，它能够让我们获取到当前组件上的 echarts 实例，从而可以对这个实例进行各种操作。

一旦我们获取到了 echarts 实例，就可以通过其提供的 dispatchAction 方法来发起不同的交互动作。这些动作可以包括但不限于数据区域的缩放、图表的类型切换、图例的显示与隐藏等。

下面是一个具体的代码示例，展示了如何使用 getEchartsInstance 和 dispatchAction 方法来为图表添加一个交互动作：

// 假设我们已经有了一个通过ReactEcharts组件创建的图表，并且已经通过ref（这里命名为serverChatref）获取到了该组件的引用

// 首先，我们通过serverChatref获取到当前ReactEcharts组件的实例
const { current } = serverChatref;

// 在进行任何操作之前，我们先检查current是否存在，以避免因为current为null而导致的错误
if (current) {
    // 使用getEchartsInstance方法获取到echarts实例
    const echartsInstance = current.getEchartsInstance();
    
    // 定义交互的类型和名称，这里以'highlight'和'series.mySeries'为例
    // 在实际应用中，你需要根据具体的交互需求来设置这些值
    const type = 'highlight';
    const name = 'series.mySeries';
    
    // 通过dispatchAction方法发起交互动作
    // 这个方法接受一个对象作为参数，该对象包含了交互的类型和名称等信息
    echartsInstance.dispatchAction({
        type: type,
        name: name,
        // 你还可以在这里添加其他与具体交互相关的参数，比如数据索引、数据值等
    });
}

通过上述代码，我们可以为图表添加一个高亮指定系列的交互动作。当用户与图表进行交互时，比如点击某个系列，该系列就会被高亮显示，从而帮助用户更加清晰地看到该系列的数据走势和特征。当然，除了高亮显示之外，dispatchAction 方法还支持很多其他类型的交互动作，你可以根据具体的需求来选择和使用。

avatar
文章
阅读
粉丝