echarts-for-react——react项目中使用echarts

本文介绍了如何在React项目中使用echarts-for-react库创建柱状图。首先通过安装和导入echarts模块,然后设置图表配置项option,接着展示如何在组件中使用和配置图表,包括设置chart的div样式、类名以及是否启用动画效果。同时提到了组件的参数,特别是option用于定义图表的各种属性,如标题、图例、坐标轴和系列。最后,文章还提及了为图表绑定事件的可能性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近有在做的项目需要在react中使用echarts。
安装

npm install --save echarts-for-react
npm install --save echarts

然后导入echarts.js模块
引入全部的

import ReactEcharts from "echarts-for-react";

减少包的大小也可以按需引入

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';

设置option函数

getOption=(record)=> {
    return {
      title: {
        text: ''
    },
    tooltip: {},
      xAxis: {
        // axisLabel: {
        //   interval:0,
        // },//强制显示x轴所有的信息
        type: 'category',
        data: orderNumTime//x轴信息,数组
    },
    yAxis: {},
      series: [
        {
          type: 'bar',
          data: orderNum //y轴信息,数组
        },
        {
          type: 'bar',
          data: payOrderNum//y轴信息,数组
        }
      ]
   };
  }

使用

<ReactEcharts option={this.getOption(record)} />

这样一个简单的柱状图就ok啦
在这里插入图片描述

关于组件的参数简介

option (required, object)

这个是必须有的,echarts图表的配置包括渲染的数据都在其中。标题title、图例legend、提示框tooltip、x轴xAxis、y轴yAxis、series等,更多内容可以参考 echarts详细内容

notMerge (optional, object)

跟之前设置的 option是否 进行合并,默认为 false合并。

lazyUpdate (optional, object)

是否立即更新图表,默认为 false立即更新。

style (optional, object)

包含echarts图表的div的样式,默认是{height: ‘300px’}.

className (optional, string)

包含echarts图表的div的类名. 可以根据需要自行配置类名,不同类配置不同的css。

loadingOption (optional, object)

showLoading (optional, bool, default: false)

是否加载动画效果

onEvents (optional, array(string=>function) )

为图表绑定事件

let onEvents = {
  'click': this.onChartClick,
  'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactEcharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  onEvents={onEvents} />

更多内容参考 添加事件

opts (optional, object)

附加参数。有下面几个可选项:

devicePixelRatio
设备像素比,默认取浏览器的值window.devicePixelRatio。
renderer
渲染器,支持 'canvas' 或者 'svg'。参见 使用 Canvas 或者 SVG 渲染。
width
可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。
height
可显式指定实例高度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的高度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值