【React】react项目引入echarts插件 K线图

 

 

参考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/

  配置 option   =>>>

 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://www.jianshu.com/p/9d97e5cdf486

 

查看更多关于【React】react项目引入echarts插件 K线图的详细内容...