React中如何使用Echarts（饼、折线、柱）

冷七七-

已于 2023-09-12 15:56:43 修改

阅读量1.4k

点赞数 1

文章标签： react.js echarts 前端

于 2023-08-02 10:39:24 首次发布

本文链接：https://blog.youkuaiyun.com/m0_64373473/article/details/132056400

版权

下载Echarts插件

npm i echarts-for-react

引入模块

import ReactEcharts from 'echarts-for-react';

一、饼状图

import React, { useState } from 'react';
import { Card, Row, Col, } from 'antd';
import ReactEcharts from 'echarts-for-react';

const BingEch = (props) => {
    const [sales, setSales] = useState([5, 20, 36, 10, 10, 20]);
    const [stores, setStores] = useState([15, 120, 36, 110, 110, 20]);
    // 配置对象
    const getOption = (sal, sto) => {
        return {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    fontSize: 13,
                    color: '#FFFFFF',
                },
                data: ['重启', '找人帮忙', '放弃使用', '想法修复']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 1835, name: '重启' },
                        { value: 310, name: '找人帮忙' },
                        { value: 234, name: '放弃使用' },
                        { value: 135, name: '想法修复' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
    };

    return (
        <div>
            <Row gutter={24}>
                <Col span={24}>
                    <ReactEcharts option={getOption(sales, stores)} style={{marginTop:"30px"}} />

                </Col>
            </Row>
        </div>
    )
}

export default BingEch

效果实现

二、折线图

import React, { useState } from 'react';
import { Card, Row, Col, } from 'antd';
import ReactEcharts from 'echarts-for-react';
const HomePage = (props) => {
    const [sales, setSales] = useState([5, 20, 36, 10, 10, 20,158]);
    const [stores, setStores] = useState([15, 120, 36, 110, 110, 20,50]);
    const [ccc ,setccc] = useState([150,105,30,64,85,154,36])
    const [Visual ,setVisual] = useState([130,148,60,64,59,160,180])
    const [cc3 ,setcc3] = useState([140,50,80,64,25,184,180])
    const [Javascript ,setJavascript] = useState([160,60,180,64,45,134,180])
    const [PHP ,setPHP] = useState([170,80,160,94,75,144,80])
    const [Python ,setPython] = useState([170,80,160,94,75,144,80])
    // 配置对象
    const getOption = (sal, sto) => {
        return {
            tooltip: {},
            legend: {
                data: ['Java', 'C',"C++","Python","Visual Basic NET","C#","Javascript","PHP","SQL","Objective-C"]
            },
            xAxis: {
                data: ["1989", "1994", "1999", "2004", "2009", "2014","2019"],

            },
            yAxis: {},
            series: [{
                name: 'Java',
                type: 'line',
                data: sales,
            },
            {
                name: 'C',
                type: 'line',
                data: stores
            },
            {
                name: 'C++',
                type: 'line',
                data: ccc
            },
            {
                name: 'Python',
                type: 'line',
                data: Python
            },
            {
                name: 'Visual Basic NET',
                type: 'line',
                data: Visual
            },
            {
                name: 'C#',
                type: 'line',
                data: cc3
            },
            {
                name: 'Javascript',
                type: 'line',
                data: Javascript
            },
            {
                name: 'PHP',
                type: 'line',
                data: PHP
            },
            {
                name: 'SQL',
                type: 'line',
                data: stores
            },
            {
                name: 'Objective-C',
                type: 'line',
                data: stores
            },

            ],
            legend:{
                textStyle: {
                    fontSize: 13,
                    color: '#FFFFFF',
                  }
            }
        }
    };

    return (
        <div id='zhexian'>
            <Row gutter={14} >
                <Col span={24} Col={25} style={{marginTop:"30px"}}>
                    <ReactEcharts option={getOption(sales, stores,ccc,Visual)} />
                </Col>
            </Row>
        </div>
    )
}

export default HomePage

效果展示

三、柱状图

import React, { useState } from 'react';
import { Card, Row, Col, } from 'antd';
import ReactEcharts from 'echarts-for-react';
const ZhuEch = (props) => {
    const [sales, setSales] = useState([25, 50, 80, 50, 30, 10]);
    const [work, setwork] = useState([36, 120, 30, 105, 80, 20]);
    const [study, setstudy] = useState([66, 80, 36, 100, 30, 60]);
    const [qita, setqita] = useState([39, 120, 36, 11, 80, 70]);
    const [stores, setstores] = useState([16, 125, 36, 110, 60, 40]);
    // 配置对象
    const getOption = (sal, sto) => {
        return {
            tooltip: {},
            legend: {
                data: ['吃饭', '睡觉',"工作","学习","其他"]
            },
            xAxis: {
                data: ["周日", "周一", "周二", "周三", "周四", "周五","周六"]
            },
            yAxis: {},
            series: [{
                name: '吃饭',
                type: 'bar',
                data: sales
            },
            {
                name: '睡觉',
                type: 'bar',
                data: stores
            },{
                name: '工作',
                type: 'bar',
                data: work
            },{
                name: '学习',
                type: 'bar',
                data: study
            },{
                name: '其他',
                type: 'bar',
                data:qita
            }],
            legend:{
                textStyle: {
                    fontSize: 13,
                    color: '#FFFFFF',
                  }
            }
        }
    };

    return (
        <div>
            <Row gutter={30}>
                <Col span={24} >
                    <ReactEcharts option={getOption(sales, stores)} style={{marginTop:"30px"}} />
                </Col>
            </Row>
        </div>
    )
}

export default ZhuEch

效果展示