React使用echarts-for-react

╰+攻爆jí腚メ 2023-01-16 14:29 288阅读 0赞

参考npm文档：\[[echarts-for-react][]\]([echarts-for-react][])

由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装

**第一步：npm安装echarts-for-react**

npm install --save echarts-for-react
    npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts'

**第二步：引入模块和组件**

import echarts from 'echarts' 
    import echarts from 'echarts/lib/echarts'
    
    <ReactEcharts option={this.getOption()} />

**第三步：参考echarts官网实例添加option参数**

参考官网：[ECharts Demo][]

getOption =()=> {
        let option = {
            title:{
              text:'用户骑行订单'
            },
            tooltip:{   //展示数据
              trigger:'axis'
            },
            xAxis:{
              data:['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis:{
              type:'value'
            },
            series:[
              {
                name:'订单量',
                type:'bar',
                data:[1000,2000,1500,3000,2000,1200,800]
              }
            ]
        }
        return option;
      }

**注意：由于引入echarts文件太大，所以一般按需引入，完整项目代码如下：**

import React from 'react';
    import {Card} from 'antd';
    import echartTheme from './../themeLight'
    //不是按需加载的话文件太大
    //import echarts from 'echarts'
    //下面是按需加载
    import echarts from 'echarts/lib/echarts'
    //导入折线图
    import 'echarts/lib/chart/line';  //折线图是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 Line extends React.Component{
      componentWillMount(){
        //主题的设置要在willmounted中设置
        echarts.registerTheme('Imooc',echartTheme);
      }
      getOption =()=> {
        let option = {
          title:{
            text:'用户骑行订单',
            x:'center'
          },
          tooltip:{
            trigger:'axis',
          },
          xAxis:{
            data:['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis:{
            type:'value'
          },
          series:[
            {
              name:'OFO订单量',
              type:'line',   //这块要定义type类型，柱形图是bar,饼图是pie
              data:[1000,2000,1500,3000,2000,1200,800]
            }
          ]
        }
       return option
      }
    
      render(){
        return(
          <div>
            <Card title="折线图表之一">
                <ReactEcharts option={this.getOption()} theme="Imooc"  style={
       {height:'400px'}}/>
            </Card>
    
          </div>
        )
      }
    }

**注意：按需加载是引入node\_modules文件夹中的js文件，所以，如果记得改import 'echarts/lib/chart/line'; 折线图不用改，饼图和柱形图line分别改为pie和bar**

**[https://github.com/topvae/echar][https_github.com_topvae_echar]**

[echarts-for-react]: https://link.zhihu.com/?target=https%3A//www.npmjs.com/package/echarts-for-react
[ECharts Demo]: https://link.zhihu.com/?target=https%3A//echarts.baidu.com/examples/
[https_github.com_topvae_echar]: https://link.zhihu.com/?target=https%3A//github.com/topvae/echarts-in-React.git