在 React 中如何使用 Echarts

Echarts 一个基于 JavaScript 的开源可视化图表库


1、如果要在你的项目中使用 Echarts , 实现先安装对应的包,从 npm 获取

复制代码
npm install echarts

2、安装完成之后再文件内引入

js 复制代码
import * as echarts from "echarts";

3、声明一个 ref 给展示图标的元素,声明属性值

js 复制代码
     const chartRef = useRef<any>(null);

注意:展示图标的元素一定要加宽高,否则看不到图表的

html 复制代码
    <>
      <div ref={chartRef} style={{ width: "500px", height: "350px" }}></div>
    </>

属性值

js 复制代码
const optionData = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };

4、使用,在挂载阶段渲染,关闭页面后销毁,以免内存泄漏

js 复制代码
useEffect(() => {
    // 挂载阶段
    const chart = echarts.init(chartRef.current);
    chart.setOption(optionData);

    // 销毁
    return () => {
      chart.dispose();
    };
  }, []);

结果展示:

完整代码:

js 复制代码
import * as echarts from "echarts";
import { useEffect, useRef } from "react";
const EchartsPage = () => {
  const chartRef = useRef<any>(null);
  const optionData = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };

  useEffect(() => {
    // 挂载阶段
    const chart = echarts.init(chartRef.current);
    chart.setOption(optionData);

    // 销毁
    return () => {
      chart.dispose();
    };
  }, []);
  return (
    <>
      <div ref={chartRef} style={{ width: "500px", height: "350px" }}></div>
    </>
  );
};

export default EchartsPage;
相关推荐
超人不会飛7 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦10 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想13 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z21 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982426 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴32 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干35 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗37 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder42 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder1 小时前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github