3.5.3代码实战2：Echarts

Echarts图表组件开发实战

本章节中将引导实现一个Echarts图表组件

初始化组件

首先在 /src/@remote 目录下新建文件夹，命名为ChartsDemo

文件夹下新建 index.tsx 文件

import React from 'react';

export default function ChartsDemo() {
  return (
    <div>Hello world</div>
  );
};

此时一个空白的组件已经创建完成，下面我们将实现组件逻辑

实现组件逻辑

  • 引入 Echarts import {init} from 'echarts'
  • 使用 useRef 创建引用 const chartRef = React.useRef();
  • 调整组件样式，并将上一步创建的引用挂在到组件上 <div ref={chartRef} style={{width: '100%', height: '100%'}} className="chart"></div>
  • 使用 useEffect 初始化 Echarts

Tips：如果我们想要根据应用主题颜色来改变图表的颜色，我们可以使用 useSelector 来获取存放于Redux全局状态中的主题颜色变量

获取主题颜色

// 引入 useSelector
import { useSelector } from 'react-redux';

// 获取主题颜色
const theme = useSelector((state: any) => state.setting.appTheme);

// 设置echarts图表主题颜色
const chart = init(chartRef.current, theme)

完整代码如下

import { useEffect, useRef } from 'react'

import { init ,getInstanceByDom } from 'echarts'
import { useSelector } from 'react-redux'

export default function ChartsDemo (props) {
  const chartRef: any = useRef() // 拿到DOM容器

  const theme = useSelector((state: any) => state.setting.appTheme)

  // 每当props改变的时候就会实时重新渲染
  useEffect(() => {
    const chatInstance = getInstanceByDom(chartRef.current) // 拿到实例
    const chart = chatInstance ? chatInstance : init(chartRef.current, theme) // 避免开发热更过程的 `There is a chart instance already initialized on the dom.` 的报错
    
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    }

    chart.setOption(option)
  }, [props])

  return <div ref={chartRef} style={{
    height: 200,
    width: '100%'
  }} className="chart"></div>
}

使用组件

在 .config/mock/devMap.js中添加 远程组件 意图的本地路由映射

module.exports = {
  '1737189330811617283': '其他组件本地的路径',
  'xxx': 'src/@remote/demos/ChartsDemo'
}

发送 远程组件 意图，就可以看到我们的组件了

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18