react中如何引入echarts插件?

react中如何引入echarts插件?下面本篇文章给大家介绍一下react项目引入echarts插件的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

1.webp.jpg

更多web前端知识,请查阅 HTML中文网 !!

以上就是react中如何引入echarts插件?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏