How to add echarts pie chart to react project

How to add echarts pie chart to react project: 1. Install "echarts" through "npm install echarts --save" command; 2. Use import to introduce "echarts/lib/echarts"; 3. Through "componentDidMount" () {...}" to add echarts pie chart.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to add echarts pie chart to react project?

#Using echarts pie chart in React project

1. Installation

npm install echarts --save

2. Introduction

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'

3. Use

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>
	)}

4. Results

Recommended learning: "

react video tutorial"

The above is the detailed content of How to add echarts pie chart to react project. For more information, please follow other related articles on the PHP Chinese website!