【无标题】

最新推荐文章于 2024-08-07 16:55:16 发布

張bh吖

最新推荐文章于 2024-08-07 16:55:16 发布

阅读量62

点赞数

分类专栏： react 文章标签： echarts javascript react

本文链接：https://blog.csdn.net/m0_46590655/article/details/129236791

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该文章展示了如何在React的函数式组件中使用Echarts库创建图表。通过`useEffect`和`useRef`Hook来初始化和销毁Echarts实例，配置包括柱状图和折线图的数据及选项。

摘要由CSDN通过智能技术生成

React函数式组件中Echarts的应用

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

export default function NewEcharts(){
    const charfRef: any = useRef();
    const options = {
        title: {  text: "ECharts",  },
        tooltip: {},
        legend: {
            data: ["销量", '销量1'],
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
            },
            {
                name: "销量1",
                type: 'line',
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    };

    useEffect(() => {
        const chart = echarts.init(charfRef.current);
        chart.setOption(options);
        return () => {
            chart.dispose()
        }
    }, [])

    return <div ref={charfRef} style={{ width: 600, height: 400, margin: 100 }}></div>
}