react如何添加echarts饼图

发布时间：2023-07-04 10:39:05 所属栏目：教程来源：互联网

导读： 　　这篇“react如何增加echarts饼图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所

　　这篇“react如何增加echarts饼图”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“react如何增加echarts饼图”文章吧。

　　react项目增加echarts饼图的方法：1、通过“npm install echarts --save”命令安装“echarts”；2、使用import引入“echarts/lib/echarts”；3、通过“componentDidMount() {...}”实现增加echarts饼图即可。

　　在React项目中使用echarts饼状图

　　一、安装

　　npm install echarts --save

　　二、引入

　　import echarts from 'echarts/lib/echarts';

　　import 'echarts/lib/chart/pie'; //饼状图

　　import 'echarts/lib/component/tooltip';

　　import 'echarts/lib/component/title';

　　import 'echarts/lib/component/legend'

　　import 'echarts/lib/component/markPoint'

　　三、使用

　　componentDidMount() {

　　        //环形图百分比

　　        var huan_val = document.getElementsByClassName("huan")[0];

　　        var chart = echarts.init(huan_val);

　　        let option = {

　　            color: ["#f8e367", "#99dfff", "#58c0f0", "#5ea6ff", "#ff9e48", "#bcbcbc"],

　　            series: [{

　　                name: "驾驶分析",

　　                type: "pie",

　　                radius: ['60%', '80%'],

　　                avoidLabelOverlap: false,

　　                label: {

　　                    normal: {

　　                        show: false,

　　                        position: 'center'

　　                    },

　　                    emphasis: {

　　                        show: true,

　　                        textStyle: {

　　                            fontSize: '30',

　　                            fontWeight: 'bold'

　　                        }

　　                    }

　　                },

　　                labelLine: {

　　                    normal: {

　　                        show: false

　　                    }

　　                },

　　                data: [{

　　                    value: 33,

　　                    name: '慢速'

　　                }, {

　　                    value: 26,

　　                    name: '低速'

　　                }, {

　　                    value: 6,

　　                    name: '中速'

　　                }, {

　　                    value: 2,

　　                    name: '高速'

　　                }, {

　　                    value: 3,

　　                    name: '超速'

　　                }, {

　　                    value: 30,

　　                    name: '怠速'

　　                }]

　　            }]

　　        };

　　        chart.setOption(option);

　　    }

　　render(){

　　 return(

　　        <div className="huan"></div>

　　 )}

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!