1、安装echarts:

npm install echarts --save

2、制作线性图组件,只引入echart必要的js内容

/**
* Created by yongyuehuang on 2017/8/5.
*/
import React from 'react'
import echarts from 'echarts/lib/echarts' //必须
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/legend'  // 注意这里引入绘制图形的各类配置组件,不然功能不生效的
import 'echarts/lib/chart/line' export default class LineReact extends React.Component { constructor(props) {
super(props)
this.initPie = this.initPie.bind(this)
} initPie() {
const { option={} } = this.props //外部传入的data数据
let myChart = echarts.init(this.ID) //初始化echarts //设置options
myChart.setOption(option)
window.onresize = function() {
myChart.resize()
}
} componentDidMount() {
this.initPie()
} componentDidUpdate() {
this.initPie()
} render() {
const { width="100%", height="300px" } = this.props
return <div ref={ID => this.ID = ID} style={{width, height}}></div>
}
}

3、引入组件和组件数据

import React, { Component } from 'react';
import { lineOption } from './optionConfig/options' // 组件数据
import('./EchartsDemo/LineReact')) from {LineReact} //折线图组件 class App extends Component {
render() {
return (
<div> <h2>折线图react组件实现</h2>
<LineReact option={lineOption} /> </div>
);
}
} export default App;

来源:

https://github.com/react-love/react-echarts-modules

react使用echarts的更多相关文章

  1. react之echarts数据更新

    react之echarts数据更新 在使用setState更新数据时,如果要将图标更新,需要做一些简单的封装,代码如下: import React, { Component } from 'react ...

  2. webpack+react实现echarts可视化配置

    先上效果 开发环境要求 需要事先安装node及npm 前期准备 1.创建文件夹react-echarts-editor2.在项目根目录(以下称根目录)下创建src目录3.在项目根目录下创建dist目录 ...

  3. React+Echarts简单的封装套路

    今天我们来介绍一下React中,对Echarts的一个简单的封装. 首先在我们的React项目中,想使用Echart包,首先需要先安装它,安装代码如下,任选一个就可以 cnpm install ech ...

  4. react使用Echarts绘制高亮可点击选中的省市地图

    最近做项目遇到一个需求,需要显示广东省各个地级市的地图,并且鼠标移入高亮显示,鼠标点击可以选中某个地级市.在网上查阅了大量资料之后,最后选择了使用echarts实现该需求.在此记录一下,希望可以帮到有 ...

  5. ant.design React使用Echarts,实力踩坑

    最近项目用到Echarts(以下用ec代替),于是照猫画虎得引入到团队的antd项目中,但是遇到2个棘手问题: 1. ec对dom不渲染,检查后发现,原来是全局存在id重复,所以使用React时,最好 ...

  6. NodeJS + React + Webpack + Echarts

    最近画了个简单的前端图,使用百度的echarts,基于原来项目的NodeJS+React+Webpack框架.在此记录一下: 1.  在react里封装echarts组件,并调用后端API. (参考的 ...

  7. react使用echarts地图实现中国地图大区展示

    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...

  8. react的echarts BizCharts

    react BizCharts react的饼图,折线图 点击进入官网 -> https://bizcharts.net/products/bizCharts/demo 如果你在这遇到了问题,欢 ...

  9. 项目实战:在线报价采购系统(React +SpreadJS+Echarts)

    小伙伴们对采购系统肯定不陌生,小到出差路费.部门物资采购:大到生产计划.原料成本预估都会涉及到该系统. 管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于采购的效率提升也有极大帮助. 但 ...

随机推荐

  1. Atos cannot get symbols from dSYM of archived application

    http://stackoverflow.com/questions/7675863/atos-cannot-get-symbols-from-dsym-of-archived-application ...

  2. ZigBee MAC层(下)

    6. MAC功能描述 6.1 信道访问 802.15.4使用的物理无线电信道的访问机制有下面两种: - 基于竞争的访问机制: 设备使用CSMA-CA退避算法以分布式方式访问信道 - 无竞争的访问机制: ...

  3. Linux音频编程

    1. 背景 在<Jasper语音助理介绍>中, 介绍了Linux音频系统, 本文主要介绍了Linux下音频编程相关内容. 音频编程主要包括播放(Playback)和录制(Record), ...

  4. appium===出错时截图的方法,自动截图

    try: driver.find_element_by_id("kwsss").send_keys("selenium") driver.find_elemen ...

  5. solr in action 第三章

    document: 每个document由一个或者多个域(field)组成,每个域都有自己的类型:string, text, etc. 理论上域的类型有无限多个,因为一个域的类型可以由零个或多个分析阶 ...

  6. hdu 5174(计数)

    Ferries Wheel Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...

  7. C# 调试程序时如何输入命令行参数

    调试程序时如何输入命令行参数http://www.a769.com/archives/320.html 开发命令行程序时,我们会疑惑,从那里输入参数呢?请看下面的教程,让你摆脱困扰. 1.点击菜单栏: ...

  8. 安卓长按交互onCreateContextMenu的简单 用法

    1.可在activity和fragment中使用. 2.使用方法 (1)注册 registerForContextMenu(btn);//btn是要实现交互的控件 (2)重写onCreateConte ...

  9. 使用Redis实现高并发分布式序列号生成服务

    序列号的构成 为建立良好的数据治理方案,作数据掌握.分析.统计.商业智能等用途,业务数据的编码制定通常都会遵循一定的规则,一般来讲,都会有自己的编码规则和自增序列构成.比如我们常见的身份证号.银行卡号 ...

  10. codeforces Round #441 A Trip For Meal【思路/模拟】

    A. Trip For Meal time limit per test 1 second memory limit per test 512 megabytes input standard inp ...