【React】echarts-for-react 的使用

最新推荐文章于 2025-02-25 09:54:44 发布

一颗不甘坠落的流星

最新推荐文章于 2025-02-25 09:54:44 发布

阅读量3.7k

点赞数 8

分类专栏：前端工具库文章标签： react.js echarts 前端

本文链接：https://blog.csdn.net/qq_45677671/article/details/135217200

版权

前端工具库专栏收录该内容

27 篇文章

订阅专栏

文章目录

echarts-for-react ：一个简单的 Apache echarts 的 React 封装
配置项手册：https://echarts.apache.org/zh/option.html#title

安装依赖

$ npm install --save echarts-for-react

# `echarts` 是 `echarts-for-react`的对等依赖,您可以使用自己的版本安装echarts。
$ npm install --save echarts

示例展示

在这里插入图片描述

示例代码：

import ReactECharts from 'echarts-for-react';
import { useEffect,  useState } from 'react';

export default function () {
  const [names, setNames] = useState([]);
  const [topCounts, setTopCounts] = useState([]);
  // 配置对象
  const getTopViewOption = () => ({
    title: {
      subtext: '成员读取次数',
    },
    tooltip: {},
    legend: {
      borderWidth: 1,
      borderColor: 'rgb(229, 231, 235)',
    },
    yAxis: {
      data: names,
    },
    grid: {
      left: 110,
    },
    xAxis: {},
    series: [
      {
        type: 'bar',
        data: topCounts,
      },
    ],
  });
  function transferListDataToChart(list) {
    const xArrays = [];
    const yArrays = [];
    list.forEach((item) => {
      xArrays.push(item.query_user);
      yArrays.push(item.count);
    });
    setNames(xArrays);
    setTopCounts(yArrays);
  }
  useEffect(() => {
    async function fetchData() {
      try {
        const mock = [
          {
            query_user: 'zhangsan',
            count: 7,
          },
          {
            query_user: 'lisi',
            count: 6,
          },
          {
            query_user: 'wangwu',
            count: 9,
          },
        ];
        transferListDataToChart(mock);
      } catch (err) {
        transferListDataToChart([]);
        console.log(err);
      }
    }
    fetchData();
  }, []);
  return (
    <div style={{ width: '100%' }}>
      <ReactECharts option={getTopViewOption()} />
    </div>
  );
}