在react项目中使用ECharts

在react项目中使用ECharts，建议多看几遍官网，从官网的示例中复制代码即可实现简单的图形。

官网地址：https://echarts.apache.org/zh/index.html

1、下载echarts

npm install echarts --save

 

 

2、在需要的页面引入或者可以封装成单独的组件，这里直接展示代码啦

import React, { Component } from 'react'                                                       

import * as echarts from 'echarts';                                                                  

import 'zrender/lib/svg/svg';                                                                            

export default class Dashboard extends Component {                                  

                                                                                                                       

componentDidMount(){                                                                                  

  var mychart = echarts.init(document.getElementById('main'))                    

  var option = {                                                                                               

    title: {                                                                                                         

      text: '某站点用户访问来源',                                                                     

      subtext: '纯属虚构',                                                                                 

      left: 'center'                                                                                             

  },                                                                                                                 

  tooltip: {                                                                                                       

      trigger: 'item'                                                                                           

  },                                                                                                                 

  legend: {                                                                                                     

      orient: 'vertical',                                                                                      

      left: 'left',                                                                                                 

  },                                                                                                                 

  series: [                                                                                                      

      {                                                                                                             

          name: '访问来源',                                                                               

          type: 'pie',                                                                                           

          radius: '50%',                                                                                     

          data: [                                                                                                

              {value: 1048, name: '搜索引擎'},                                                   

              {value: 735, name: '直接访问'},                                                     

              {value: 580, name: '邮件营销'},                                                     

              {value: 484, name: '联盟广告'},                                                     

              {value: 300, name: '视频广告'}                                                      

          ],                                                                                                        

          emphasis: {                                                                                       

              itemStyle: {                                                                                    

                  shadowBlur: 10,                                                                        

                  shadowOffsetX: 0,                                                                    

                  shadowColor: 'rgba(0, 0, 0, 0.5)'                                              

              }                                                                                                    

          }                                                                                                        

      }                                                                                                            

  ]                                                                                                                

    }                                                                                                              

  option && mychart.setOption(option)                                                       

}                                                                                                                  

  render() {                                                                                                  

    return (                                                                                                   

      <div id='main' style={{width:'800px',height:'400px'}}>                          

    )                                                                                                             

  }                                                                                                               

}                                                                                                                 

 好啦，来看看效果吧😊

 

关键部分就是 代码中的 option ，这个可以从官网中的示例找需要的图形代码复制过来，就可以啦

 

 

如果需要单独封装，通过axios向后端请求数据渲染可以参考一下链接。

https://blog.csdn.net/hahahhahahahha123456/article/details/80390151