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)
小伙伴们对采购系统肯定不陌生,小到出差路费.部门物资采购:大到生产计划.原料成本预估都会涉及到该系统. 管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于采购的效率提升也有极大帮助. 但 ...
随机推荐
- [bzoj2594][Wc2006]水管局长数据加强版——lct+离线
Brief Description 您有一个无向带权图,您需要支持两种操作. 询问两个点之间的最大权最小路径. 删除一条边. Algorithm Design 我们首先提出一个猜想:最优路径一定在原图 ...
- bzoj 1500 修改区间 splay
内个我也不知道哪儿不对,TLE了,说说思路吧 其实思路也没什么说的,就是裸的splay,对于最后一个操作 我们记下每个区间的最长前缀,最长后缀,那么最长子序列就是 前缀,后缀,左子树的后缀+右子树的前 ...
- 一步步打造自己的linux命令行计算器
相信很多人,在工作中会需要使用到计算器.一般的做法是,打开并使用系统自带的计算器. 这种做法可能对我来说,有如下几个问题. 太慢.每次需要打开计算器,然后改成编程模式,手工选择进制,再使用输入表达式进 ...
- Raspberry Pi使用
1. 介绍 笔者Raspberry Pi 2 Model B为例介绍 1.1 参数 Raspberry Pi 2 Model B硬件参数如下: · Broadcom BCM2836 900MHz 4核 ...
- PL/SQL 05 存储过程 procedure
--存储过程(不带参数) create or replace procedure 存储过程名as 变量.常量声明;begin 代码;end; --存储过程(带输入参数) create or rep ...
- django自带的orm之查询
一.filter条件查询 用法: 模型类.objects.filter(模型类属性名__查询操作符 = 值) 判等: exact # 例:查询id为1的员工 select * from employe ...
- 我们应选择怎样的IT公司
最近经常有朋友提问,同时收到几家公司的offer,应该如何选择,或者找工作的时候,找怎样的公司,我在这里阐述一下我的观点.但愿对朋友们有所帮助. 还是那句老话,选择什么样的公司,关键是你想要过什么样的 ...
- 在使用Arduino中遇到的问题(无法使用中文注释、程序无法下载)
在使用Arduino中遇到的问题: 在用arduino给蓝牙模块供电时,下载程序是下不进去的.即使显示下进去了,其实也是没下进去. 解决方法:拔掉蓝牙模块再下程序,或给蓝牙供电的线上加上一个开关. 在 ...
- python+selenium 组织用例方式 总结
1.unittest.main() 将一个单元测试模块变为可直接运行的测试脚本,main()方法使用TestLoader类来搜索所有包含在该模块中以“test”命名开头的测试方法,并自动执行他们.执行 ...
- 51nod 1137 矩阵乘法【矩阵】
1137 矩阵乘法 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出2个N * N的矩阵M1和M2,输出2个矩阵相乘后的结果. Input 第1行 ...