react使用echarts
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的更多相关文章
- react之echarts数据更新
react之echarts数据更新 在使用setState更新数据时,如果要将图标更新,需要做一些简单的封装,代码如下: import React, { Component } from 'react ...
- webpack+react实现echarts可视化配置
先上效果 开发环境要求 需要事先安装node及npm 前期准备 1.创建文件夹react-echarts-editor2.在项目根目录(以下称根目录)下创建src目录3.在项目根目录下创建dist目录 ...
- React+Echarts简单的封装套路
今天我们来介绍一下React中,对Echarts的一个简单的封装. 首先在我们的React项目中,想使用Echart包,首先需要先安装它,安装代码如下,任选一个就可以 cnpm install ech ...
- react使用Echarts绘制高亮可点击选中的省市地图
最近做项目遇到一个需求,需要显示广东省各个地级市的地图,并且鼠标移入高亮显示,鼠标点击可以选中某个地级市.在网上查阅了大量资料之后,最后选择了使用echarts实现该需求.在此记录一下,希望可以帮到有 ...
- ant.design React使用Echarts,实力踩坑
最近项目用到Echarts(以下用ec代替),于是照猫画虎得引入到团队的antd项目中,但是遇到2个棘手问题: 1. ec对dom不渲染,检查后发现,原来是全局存在id重复,所以使用React时,最好 ...
- NodeJS + React + Webpack + Echarts
最近画了个简单的前端图,使用百度的echarts,基于原来项目的NodeJS+React+Webpack框架.在此记录一下: 1. 在react里封装echarts组件,并调用后端API. (参考的 ...
- react使用echarts地图实现中国地图大区展示
日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...
- react的echarts BizCharts
react BizCharts react的饼图,折线图 点击进入官网 -> https://bizcharts.net/products/bizCharts/demo 如果你在这遇到了问题,欢 ...
- 项目实战:在线报价采购系统(React +SpreadJS+Echarts)
小伙伴们对采购系统肯定不陌生,小到出差路费.部门物资采购:大到生产计划.原料成本预估都会涉及到该系统. 管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于采购的效率提升也有极大帮助. 但 ...
随机推荐
- HDU 1798 Tell me the area (数学)
题目链接 Problem Description There are two circles in the plane (shown in the below picture), there ...
- [bzoj2251][2010Beijing Wc]外星联络——后缀数组+暴力求解
Brief Description 找到 01 串中所有重复出现次数大于 1 的子串.并按字典序输出他们的出现次数. Algorithm Design 求出后缀数组之后,枚举每一个后缀,对于每个后缀从 ...
- 计算器(丑陋版 and 加法专用版)
from tkinter import * win = Tk() win.geometry('500x300+400+300') win['bg'] = '#0099ff' win.title('魔方 ...
- ros pcl sensor::pointcloud2 转换成pcl::pointcloud
#include <pcl_conversions/pcl_conversions.h> #include <pcl/point_types.h> #include <p ...
- AC日记——Andryusha and Colored Balloons codeforces 780c
C - Andryusha and Colored Balloons 思路: 水题: 代码: #include <cstdio> #include <cstring> #inc ...
- 使用moneykey对APP进行健壮性测试
注意:moneykey对app按钮伪随机点击,只能测试app稳定性和健壮性,无法进行常规测试 1.安装 A.jdk(不详细介绍) B.安装配置android配置环境:Android Studio 此环 ...
- EasyUI----DataGrid行明细增删改操作
http://blog.csdn.net/huchiwei/article/details/7787947 本文实现的是EasyUI-DataGrid行明细的增删改操作.具体参考来自以下文章: 官 ...
- CF 115 A 【求树最大深度/DFS/并查集】
CF A. Party time limit per test3 seconds memory limit per test256 megabytes inputstandard input outp ...
- 51nod 1240 莫比乌斯函数【数论+莫比乌斯函数】
1240 莫比乌斯函数 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 莫比乌斯函数,由德国数学家和天文学家莫比乌斯提出.梅滕斯(Mertens)首先使用 ...
- Codeforces #426 Div2 D(线段树优化 DP )
#426 Div2 D 题意 给出 \(n\) 个数字,将这些数字隔成 \(k\) 个部分(相对位置不变),统计每个部分有几个不同数字,然后全部加起来求和,问和最大是多少. 分析 很容易想到 \(DP ...