美文网首页让前端飞
【React】react项目引入echarts插件

【React】react项目引入echarts插件

作者: 废柴码农 | 来源:发表于2019-02-20 18:05 被阅读1次
    屏幕快照 2019-02-20 下午6.02.46.png
    参考npm文档:https://www.npmjs.com/package/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参数

    参考官网:https://echarts.baidu.com/examples/

    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
    完整的代码可以看一下我上传在github上的项目https://github.com/topvae/echarts-in-React.git

    相关文章

      网友评论

        本文标题:【React】react项目引入echarts插件

        本文链接:https://www.haomeiwen.com/subject/emzhyqtx.html