echars图表

最新推荐文章于 2024-11-08 16:09:18 发布

天不生我鹤暮辞

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量43

点赞数

文章标签： echarts javascript react.js

本文链接：https://blog.csdn.net/userning/article/details/129040259

版权

import React, { useEffect, useRef, useState } from 'react'
import * as echarts from 'echarts';
import './style.less'
export default function Echarts() {
    const ref = useRef()
    useEffect(() => {
        const myChart = echarts.init(ref.current);

        // 指定图表的配置项和数据
        const option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }, [])
    return (
        <div styleName="box" ref={ref}></div>
    )
}