初识echarts（5）：饼图示例

心已赠人 2022-12-03 09:51 121阅读 0赞

#### 一、npm安装 echarts 、echarts-for-react： ####

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

#### 二、引入模块（这里最好按需引入）： ####

//按需导入
    import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块
    import 'echarts/lib/chart/bar';  //引入柱状图 折线图是line,饼图改为pie,柱形图改为bar
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
    import 'echarts/lib/component/markPoint';
    import ReactEcharts from 'echarts-for-react';

#### 三、完整代码： ####

import React,{ Component}from 'react'
    import { Card} from 'antd';
    
    //按需导入
    import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块
    import 'echarts/lib/chart/pie';  //引入饼图 折线图是line,饼图改为pie,柱形图改为bar
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
    import 'echarts/lib/component/markPoint';
    import ReactEcharts from 'echarts-for-react';
    
    export default class Pie extends Component { 
    
        getOption = ()=>{ 
            let option = { 
                title: { 
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    left: 'left'
                },
                tooltip: { 
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: { 
                    orient: 'vertical', /*设定垂直排列*/
                    left: 'right',
                    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: '搜索引擎'}
                        ],
                        emphasis: { 
                            itemStyle: { 
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'/*鼠标滑过饼状图区域的阴影*/
                            }
                        }
                    }
                ]
            };
            return option;
        };
        render() { 
            return (
                <Card title="我是标题">
                    <ReactEcharts option={ this.getOption()}/>
                </Card>
            )
        }
    }

#### 运行结果： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/67c8343988b644408c77629a0a8b13cd.png