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. HDU 1798 Tell me the area (数学)

    题目链接 Problem Description     There are two circles in the plane (shown in the below picture), there ...

  2. [bzoj2251][2010Beijing Wc]外星联络——后缀数组+暴力求解

    Brief Description 找到 01 串中所有重复出现次数大于 1 的子串.并按字典序输出他们的出现次数. Algorithm Design 求出后缀数组之后,枚举每一个后缀,对于每个后缀从 ...

  3. 计算器(丑陋版 and 加法专用版)

    from tkinter import * win = Tk() win.geometry('500x300+400+300') win['bg'] = '#0099ff' win.title('魔方 ...

  4. ros pcl sensor::pointcloud2 转换成pcl::pointcloud

    #include <pcl_conversions/pcl_conversions.h> #include <pcl/point_types.h> #include <p ...

  5. AC日记——Andryusha and Colored Balloons codeforces 780c

    C - Andryusha and Colored Balloons 思路: 水题: 代码: #include <cstdio> #include <cstring> #inc ...

  6. 使用moneykey对APP进行健壮性测试

    注意:moneykey对app按钮伪随机点击,只能测试app稳定性和健壮性,无法进行常规测试 1.安装 A.jdk(不详细介绍) B.安装配置android配置环境:Android Studio 此环 ...

  7. EasyUI----DataGrid行明细增删改操作

    http://blog.csdn.net/huchiwei/article/details/7787947   本文实现的是EasyUI-DataGrid行明细的增删改操作.具体参考来自以下文章: 官 ...

  8. CF 115 A 【求树最大深度/DFS/并查集】

    CF A. Party time limit per test3 seconds memory limit per test256 megabytes inputstandard input outp ...

  9. 51nod 1240 莫比乌斯函数【数论+莫比乌斯函数】

    1240 莫比乌斯函数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 莫比乌斯函数,由德国数学家和天文学家莫比乌斯提出.梅滕斯(Mertens)首先使用 ...

  10. Codeforces #426 Div2 D(线段树优化 DP )

    #426 Div2 D 题意 给出 \(n\) 个数字,将这些数字隔成 \(k\) 个部分(相对位置不变),统计每个部分有几个不同数字,然后全部加起来求和,问和最大是多少. 分析 很容易想到 \(DP ...