react插件-圖表echarts

1. 安裝

npm i echarts
           

2. 頁面使用

import React, { useEffect, useRef, useState } from "react";
import { Card, Row, Col, List, Avatar, Button, Drawer } from "antd";
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
} from "@ant-design/icons";
import axios from "axios";
import * as Echarts from "echarts";
//lodash-工具庫，内部封裝了很多字元串、數組、對象等常見資料類型的處理函數
import _ from "lodash";

const { Meta } = Card;
export default function Home() {
  const [viewList, setViewList] = useState([]);
  const [starList, setStarList] = useState([]);
  const [allList, setAllList] = useState([]);
  const barRef = useRef();
  const pieRef = useRef();
  const [visible, setVisible] = useState(false);
  const [pieChart, setPieChart] = useState(null);

  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    setVisible(false);
  };
  useEffect(() => {
    axios
      .get(
        "/news?publishState=2&_expand=category&_sort=view&_order=desc&_limit=60"
      )
      .then((res) => {
        setViewList(res.data);
      });
    axios
      .get(
        "/news?publishState=2&_expand=category&_sort=star&_order=desc&_limit=6"
      )
      .then((res) => {
        setStarList(res.data);
      });

    axios.get("/news?publishState=2&_expand=category").then((res) => {
      //根據類目名稱，對資料進行分組
      renderBarView(_.groupBy(res.data, (item) => item.category.title));
      // console.log(_.groupBy(res.data, (item) => item.category.title));
      setAllList(res.data);
    });

    return () => {
      //元件銷毀時，删除onresize事件
      window.onresize = null;
    };
  }, []);

  const renderBarView = (obj) => {
    // 基于準備好的dom，初始化echarts執行個體
    var myChart = Echarts.init(barRef.current);
    // 指定圖表的配置項和資料
    var option = {
      title: {
        text: "ECharts 入門示例",
      },
      tooltip: {},
      legend: {
        data: ["銷量"],
      },
      xAxis: {
        data: Object.keys(obj),
        axisLabel: {
          rotate: "45",
        },
      },
      yAxis: { minInterval: 1 },
      series: [
        {
          name: "數量",
          type: "bar",
          data: Object.values(obj).map((item) => item.length),
        },
      ],
    };

    // 使用剛指定的配置項和資料顯示圖表。
    myChart.setOption(option);
    window.onresize = () => {
      myChart.resize();
    };
  };

  const renderPieView = () => {
    let currentList = allList.filter((data) => data.author === username);
    let groupObj = _.groupBy(currentList, (item) => item.category.title);

    let list = [];
    for (let i in groupObj) {
      list.push({
        name: i,
        value: groupObj[i].length,
      });
    }

    var myChart;
    if (!pieChart) {
      myChart = Echarts.init(pieRef.current);
      setPieChart(myChart);
    } else {
      myChart = pieChart;
    }
    var option = {
      title: {
        text: "目前使用者新聞分類圖示",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "釋出數量",
          type: "pie",
          radius: "50%",
          data: list,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);
  };

  const {
    region,
    username,
    role: { roleName },
  } = JSON.parse(localStorage.getItem("token"));

  return (
    <div>
      <div className="site-card-wrapper">
        <Row gutter={16}>
          <Col span={8}>
            <Card title="使用者最常浏覽" bordered={true}>
              <List
                bordered
                dataSource={viewList}
                renderItem={(item) => (
                  <List.Item>
                    <a href={`#/news-manage/preview/${item.id}`}>
                      {item.title}
                    </a>
                  </List.Item>
                )}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card title="使用者點贊最多" bordered={true}>
              <List
                bordered
                dataSource={starList}
                renderItem={(item) => (
                  <List.Item>
                    <a href={`#/news-manage/preview/${item.id}`}>
                      {item.title}
                    </a>
                  </List.Item>
                )}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card
              cover={
                <img
                  alt="example"
                  src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                />
              }
              actions={[
                <SettingOutlined
                  key="setting"
                  onClick={() => {
                    
                    showDrawer();
                    setTimeout(() => {
                      //初始化
                      renderPieView();
                    }, 0);
                  }}
                />,
                <EditOutlined key="edit" />,
                <EllipsisOutlined key="ellipsis" />,
              ]}
            >
              <Meta
                avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                title={username}
                description={
                  <div>
                    <b style={{ marginRight: "10px" }}>
                      {region === "" ? "全球" : region}
                    </b>
                    <span>{roleName}</span>
                  </div>
                }
              />
            </Card>
          </Col>
        </Row>
        <Button type="primary" onClick={showDrawer}>
          Open
        </Button>
        <Drawer
          title="Basic Drawer"
          placement="right"
          onClose={onClose}
          open={visible}
          width={"500px"}
        >
          <div
            ref={pieRef}
            style={{ marginTop: "30px", width: "100%", height: "400px" }}
          ></div>
        </Drawer>
        <div
          ref={barRef}
          style={{ marginTop: "30px", width: "100%", height: "400px" }}
        ></div>
      </div>
    </div>
  );
}
           

lodash-工具庫内部封裝了很多字元串、數組、對象等常見資料類型的處理函數。

_.groupBy(res.data, (item) => item.category.title獲得的資料結構見下圖：