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)
小伙伴们对采购系统肯定不陌生,小到出差路费.部门物资采购:大到生产计划.原料成本预估都会涉及到该系统. 管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于采购的效率提升也有极大帮助. 但 ...
随机推荐
- bzoj 3212 线段树
裸的线段树 /************************************************************** Problem: User: BLADEVIL Langua ...
- OSI和TCP/IP的对比+IP地址分类
一.OSI和TCP/IP对比 二.IP地址分类 A类私有IP地址:10.0.0.0-10.255.255.255B类私有IP地址:172.16.0.0-172.31.255.255C类私有IP地址:1 ...
- 可参考的js代码
function addcompanyFinalBalance(){ var currentDate = new Date(); var currentYear = date.getFullYear( ...
- jQuery-niceScroll使用中父子div都存在滚动条导致错位的问题
1.做项目时因为客户要求改变了项目的整体样式,所以导致浏览器自带的滚动条样式与项目的样式风格格格不入,所以要使用一个滚动条插件来替换浏览器自带的滚动条,我在网上搜了下,发现niceScroll这个滚动 ...
- svn突然不能用了!
case:周五下班将电脑关机,带回家本来打算周末加班的:但是后来周末有事,没有加班,周六和周末电脑根本没有开机.本周一过来开机,打开eclipse准备更新代码的时候,突然发现与资源库同步操作的时候报错 ...
- hdu 5748(LIS)
Bellovin Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
- Unable to connect to vulnerability scanner
问题: "Unable to connect to vulnerability scanner. If the system has been updated recently the ...
- svn泄漏敏感信息利用方式
之前仅知道svn权限配置不当,会导致敏感信息泄漏,但是一直不知道具体利用方式. 今天测试svn dig时抓包分析才知道: http://www.xxx.com/路径/.svn/text-base/文件 ...
- POJ 3264.Balanced Lineup-结构体版线段树(区间查询最值)
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 53721 Accepted: 25244 ...
- CF 862A Mahmoud and Ehab and the MEX【数组操作】
A. Mahmoud and Ehab and the MEX time limit per test 2 seconds memory limit per test 256 megabytes in ...