在react中使用echarts，echarts-for-react

最新推荐文章于 2024-05-09 08:34:54 发布

墨语轩

最新推荐文章于 2024-05-09 08:34:54 发布

阅读量1.1w

点赞数 2

分类专栏： React相关文章标签：在react中使用echarts echarts-for-react react echarts

本文链接：https://blog.csdn.net/MFWSCQ/article/details/101365066

版权

React相关专栏收录该内容

8 篇文章 1 订阅

订阅专栏

我们在做项目的时候经常会遇到会使用各种各样的图表，在react项目中处理图标时使用echart-for-react包，他依赖于echarts包

安装：

npm install --save echarts

npm install --save echarts-for-react

引入并使用：

import ReactEcharts from 'echarts-for-react';
 
// render echarts option.
<ReactEcharts option={this.getOption()} />

options参数时必要的，就是你使用的echarts.setOption(option)中的配置参数。

首先举个栗子，我们的js文件：

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import S from './style.scss';
import PointLineTitle from 'layout/ui_components/pointLineTitle/PointLineTitle';

import barOption from './barOption';


const EntranceGuard = ()=>{
    return (
        <div className={S.entranceGuard}>
            <PointLineTitle title="门禁进出" />
            <div className={S.entranceData}>
                <p className={S.entranceOpenTotal}>门禁进入总数 <span>235</span></p>
                <p className={S.entranceCloseTotal}>门禁外出总数 <span>248</span></p>
            </div>
            <div className={S.barChart}>
                <ReactEcharts
                    option={barOption}
                    style={{width:'100%',height:'100%'}}
                />
            </div>
        </div>
    )
}

export default EntranceGuard;

配置文件：barOptions.js

//柱状图配置
const barOption = {
    backgroundColor: 'transparent',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['门禁进入', '门禁外出'],
        align: 'left',
        top: 18,
        right: 20,
        textStyle: {
            color: "#c1c5cd"
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 12
    },
    grid: {
        top: '24%',
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: [
            '1号楼',
            '2号楼',
            '3号楼',
            '4号楼',
            '5号楼',
            '6号楼',
            '7号楼',
            '8号楼',
        ],
        axisLine: {
            show: true,
            lineStyle: {
                color: "#45647f",
                width: 1,
                type: "solid"
            }
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#a1d8f1",
            }
        },
    }],
    yAxis: [{
        type: 'value',
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#45647f",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#a1d8f1',
                fontSize: '12px'
            }
        }

    }],
    series: [{
        name: '门禁进入',
        type: 'bar',
        data: [20, 50, 80, 58, 83, 68, 57, 100],
        barWidth: 8, //柱子宽度
        // barGap: 1, //柱子之间间距
        itemStyle: {
            color: '#14e3cc'
        }
    }, {
        name: '门禁外出',
        type: 'bar',
        data: [50, 70, 60, 61, 75, 87, 60, 62],
        barWidth: 8,
        // barGap: 1,
        itemStyle: {
            color: '#f84f55'
        }
    }]
}

export default barOption;

效果图：

手动引入需要的echarts模块以减少打包文件的大小

import React from 'react';
// import the core library.
import ReactEchartsCore from 'echarts-for-react/lib/core';
 
// then import echarts modules those you have used manually.
import echarts from 'echarts/lib/echarts';
// import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/pie';
// import 'echarts/lib/chart/scatter';
// import 'echarts/lib/chart/radar';
 
// import 'echarts/lib/chart/map';
// import 'echarts/lib/chart/treemap';
// import 'echarts/lib/chart/graph';
// import 'echarts/lib/chart/gauge';
// import 'echarts/lib/chart/funnel';
// import 'echarts/lib/chart/parallel';
// import 'echarts/lib/chart/sankey';
// import 'echarts/lib/chart/boxplot';
// import 'echarts/lib/chart/candlestick';
// import 'echarts/lib/chart/effectScatter';
// import 'echarts/lib/chart/lines';
// import 'echarts/lib/chart/heatmap';
 
// import 'echarts/lib/component/graphic';
// import 'echarts/lib/component/grid';
// import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/polar';
// import 'echarts/lib/component/geo';
// import 'echarts/lib/component/parallel';
// import 'echarts/lib/component/singleAxis';
// import 'echarts/lib/component/brush';
 
import 'echarts/lib/component/title';
 
// import 'echarts/lib/component/dataZoom';
// import 'echarts/lib/component/visualMap';
 
// import 'echarts/lib/component/markPoint';
// import 'echarts/lib/component/markLine';
// import 'echarts/lib/component/markArea';
 
// import 'echarts/lib/component/timeline';
// import 'echarts/lib/component/toolbox';
 
// import 'zrender/lib/vml/vml';
 
// The usage of ReactEchartsCore are same with above.
<ReactEchartsCore
  echarts={echarts}
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={} />

组件参数使用详解：

option （必需，对象）

echarts选项配置，请参见http://echarts.baidu.com/option.html#title。

notMerge （可选，对象）

何时setOption（不合并数据），默认值为false。请参阅http://echarts.baidu.com/api.html#echartsInstance.setOption。

lazyUpdate （可选，对象）

时setOption，懒惰型更新数据，默认为false。请参阅http://echarts.baidu.com/api.html#echartsInstance.setOption。

style （可选，对象）

在styleecharts股利。object，默认值为{height：'300px'}。

className （可选，字符串）

在classecharts股利。您可以通过类名称设置图表的CSS样式。

theme （可选，字符串）

该themeecharts的。string，则应registerTheme在使用它之前使用（主题对象格式：https : //github.com/ecomfe/echarts/blob/master/theme/dark.js）。例如

// import echarts
import echarts from 'echarts';
...
// register theme object
echarts.registerTheme('my_theme', {
  backgroundColor: '#f4cccc'
});
...
// render the echarts use option `theme`
<ReactEcharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  className='echarts-for-echarts'
  theme='my_theme' />

onChartReady （可选，功能）

图表准备就绪后，将使用echarts object参数作为参数回调该函数。

loadingOption （可选，对象）

echarts加载选项配置，请参见http://echarts.baidu.com/api.html#echartsInstance.showLoading。

showLoading （可选，布尔值，默认值：false）

bool，在绘制图表时，显示加载蒙版。

onEvents （可选，array（string => function））

绑定echarts事件，将使用echarts event object和the echart object作为参数进行回调。例如：

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

有关更多事件键名称的信息，请参见：http : //echarts.baidu.com/api.html#events

opts （可选，对象）

该optsecharts的。object，将在由初始echarts实例时使用echarts.init。文档在这里。

<ReactEcharts
  option={this.getOption()}
  style={{height: '300px'}}
  opts={{renderer: 'svg'}} // use svg to render the chart.
/>

组件API和Echarts API

组件仅one API命名为getEchartsInstance。

getEchartsInstance()：获取echarts实例对象，则可以使用any API of echarts。

例如：


//  使用rel渲染下面的echarts组件
<ReactEcharts ref={(e) => { this.echarts_react = e; }}
  option={this.getOption()} />
 
//  然后使用this.echarts_react获取`ReactEcharts`
 
let echarts_instance = this.echarts_react.getEchartsInstance();
//  然后您可以使用echarts的任何API。
let base64 = echarts_instance.getDataURL();

关于echarts的API，可以参见 http://echarts.baidu.com/api.html#echartsInstance。

您可以使用API执行以下操作：

binding / unbinding 事件。
dynamic charts 动态数据。
获取echarts dom / dataURL / base64，将图表保存为png。
release 图表。

详情请查看npm包地址

墨语轩

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
在react中使用echarts，echarts-for-react

我们在做项目的时候经常会遇到会使用各种各样的图表，在react项目中处理图标时使用echart-for-react包，他依赖于echarts包安装：npm install --save echartsnpm install --save echarts-for-react引入并使用：import ReactEcharts from 'echarts-for-react';...
复制链接

扫一扫