【React】echarts-for-react 的使用

• 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>
  );
}