使用echarts-for-react 在react中、AntDesign中实现图表（柱状图、折线图、饼图等）

迈不过友情╰ 2023-06-13 11:25 63阅读 0赞

（1）首先安装依赖文件

> npm install --save echarts-for-react  
> npm install --save echarts

（2）在图表页面引入：

import ReactEcharts from 'echarts-for-react';

（3）页面中使用：

（4）完整的代码：

【柱状图】：

/**
     * 柱状图
     */
    import React ,{Component} from 'react';
    import {Card} from 'antd'
    import ReactEcharts from 'echarts-for-react';
    class Bar extends Component{
        constructor(props){
            super(props)
            this.state = {
                sales:[5, 20, 36, 10, 10, 20],
                stores:[15, 120, 36, 110, 110, 20]
            }
        }
        /**
         * 柱状图的配置对象
         */
        getOption = (sales,stores) =>{
            return {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量','库存']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: sales
                },
                {
                    name: '库存',
                    type: 'bar',
                    data: stores
                }]
            };
        }
        render(){
            const {sales,stores} = this.state;
            return(
                <div>
                    <Card>
                        <ReactEcharts option={this.getOption(sales,stores)} />
                    </Card>
                </div>
            )
        }
    }
    export default Bar;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

【折线图】：

/**
     * 折线图
     */
    import React ,{Component} from 'react';
    import {Card} from 'antd'
    import ReactEcharts from 'echarts-for-react';
    class Line extends Component{
        constructor(props){
            super(props)
            this.state = {
                sales:[5, 20, 36, 10, 10, 20],
                stores:[15, 120, 6, 40, 110, 20]
            }
        }
        /**
         * 折线图的配置对象
         */
        getOption = (sales,stores) =>{
            return {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量','库存']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'line',
                    data: sales
                },
                {
                    name: '库存',
                    type: 'line',
                    data: stores
                }]
            };
        }
        render(){
            const {sales,stores} = this.state;
            return(
                <div>
                    <Card>
                        <ReactEcharts option={this.getOption(sales,stores)} />
                    </Card>
                </div>
            )
        }
    }
    export default Line;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1][]

【饼状图】：

/**
     * 饼图
     */
    import React ,{Component} from 'react';
    import {Card} from 'antd'
    import ReactEcharts from 'echarts-for-react';
    class Pie extends Component{
        constructor(props){
            super(props)
            this.state = {
                sales:[5, 20, 36, 10, 10, 20],
                stores:[15, 120, 6, 40, 110, 20]
            }
        }
        /**
         * 饼图的配置对象
         */
        getOption = (sales,stores) =>{
            return {
                title : {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }
        render(){
            const {sales,stores} = this.state;
            return(
                <div>
                    <Card>
                        <ReactEcharts option={this.getOption()} />
                    </Card>
                </div>
            )
        }
    }
    export default Pie;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 2][]

（5）可以根据自己的需要，配置相关信息：

[相关配置，详见][Link 1]

\-----------以上是使用  echarts-for-react  在react中实现图表的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191117122557336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191117123212772.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191117123305888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[Link 1]: https://www.echartsjs.com/zh/option.html#title