React：Hooks中如何引入Echarts

最新推荐文章于 2023-01-30 19:02:25 发布

张开心

最新推荐文章于 2023-01-30 19:02:25 发布

阅读量484

点赞数 1

分类专栏：屠龙文章标签： echarts react.js javascript

本文链接：https://blog.csdn.net/qy_99/article/details/128724617

版权

屠龙专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.下载Echarts依赖

npm install echarts -s
//
yarn add echarts -s

安装依赖到node_modules目录下，写入dependencies节点，为生产环境依赖。

2.项目中引入

在Echarts图形示例上，找到想要的示例，直接复制代码中的Option就ok。

import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";

const MyCharts= (props) => {
  const chartRef = useRef(); //拿到标记DOM容器，文档中是使用document获取dom。

  // 监听props，props更换时重新绘制。
  useEffect(() => {
    const chart = echarts.init(chartRef.current); //echart初始化容器
    let option = {
      //标题
      title: {
         text: "Referer of a Website",
         subtext: "Fake Data",
         left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      //图例
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",

          //可以传字符串，相当于饼图，可以传数组，相当于环状图
          radius: [20, 50],

          //一般从props中解构出Data
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    //将option放进 chart中
    chart.setOption(option);
  }, [props]);

  return (
    <div
      ref={chartRef}
      className="chart"
      //目标dom中要记得写宽高
      style={{ height: "100%", width: "100%" }}
    ></div>
  );
};

export default MyCharts;