React 实现 Echarts 可视化饼状图

最新推荐文章于 2024-09-15 08:13:31 发布

Mr.M .

最新推荐文章于 2024-09-15 08:13:31 发布

阅读量2.1k

点赞数 1

分类专栏： React Echart 图表文章标签： javascript reactjs html5 数据可视化可视化

本文链接：https://blog.csdn.net/weixin_45582052/article/details/105164153

版权

本文介绍如何在React应用中结合Echarts库，实现数据可视化的饼状图。首先讲解如何引入Echarts到项目中，然后详细阐述如何编写代码来展示饼状图。

摘要由CSDN通过智能技术生成

React 实现 Echarts 可视化饼状图

一、引入

import React, {
    Component } from 'react'

import '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'
import ReactEcharts from 'echarts-for-react'
//引入css样式
import styles from './Echarts.module.scss'

二、编写可视化

export default class EchartAge extends Component {
   

    getEchartAge = ()=>{
   
        let option = {
   
            backgroundColor: 'rgba(2, 36, 150, 0.1)',
 			//图表标题
            title: {
   
                text: '年龄结构',
                le