⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
Home Page: https://git.hust.cc/echarts-for-react
License: MIT License
I'm a open source enthusiast, good at front-end development.
AnyPlot
`class Charts extends React.Component {
constructor(props) {
super(props);
this.state = {
option: {
title: {
text: 'Step Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:[ 'Step Middle']
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
toolbox: {
},
xAxis: {
type: 'category',
data: [],
splitLine: {
show: true
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [
{
name:'Step Middle',
type:'line',
step: 'middle',
data:[]
}
]
},
showChart: false,
};
}
componentWillMount () {
this.getChartDatas();
}
getChartDatas () {
ajax({
api: 'orderGoodsChartsData',
method: 'get',
data: {},
withCredentials: true,
crossOrigin: true
}, suc => {
if(suc.success != true){
Toast.error(suc.message || '获取图表信息异常');
}else{
let data = suc.data || {},
option = this.state.option;
option.title = data.title;
option.xAxis.data = data.jxch && data.jxch.date;
option.series[0].data = data.jxch && data.jxch.out;
this.setState({option: option, showChart: true});
}
}, err => {
Toast.error('获取图表信息异常');
});
}
render () {
console.log('option',this.state.option);
if(this.state.showChart){
return (
<div>
<ReactEcharts
option={this.state.option}
style={{height: '300px', width: '100%'}}
lazyUpdate={true}
theme={"theme_name"}
onChartReady={() => { console.log('onChartReady'); }}
onEvents={{
'click': () => {console.log('clickCharts');}
}} />
</div>
);
}
else{
return <div></div>;
}
}
}
export default Charts;`
https://github.com/hustcc/echarts-for-react/blob/master/src/echarts-for-react.js#L49
我指的是每次 update 时调用的 setOption
版本号已经更新到1.1.5了.....
你好，我的电脑是MAC Pro OS操作系统，浏览器版本是Chrome 50.0.2661.102 (64-bit)。
当将ReactEChart的style的height设置为100%时，Dynamic Chart显示异常，出现堆叠的情况。
注：我的图表空间的父节点的height是700px，不存在收到父节点高度的影响。
当我们将Chrome的版本更新至最新时，图表显示正常。
请抽时间解决一下，我们这边也努力寻找一下原因，保持联系啊。
若你那边有结果了请告诉我们一声。多谢兄弟了，谢谢 ~
代码如下：
异常图片如下：
echarts在Tab面也切换时,只有第一次进入的第一个Tab页显示,请问如何才能所有Tab页都能显示?
echarts 只查到可以通过myChart.chart.map._mapDataMap.china.transform.baseScale来获取缩放比例，echarts-for-react呢？
//基础配置 参考 http://echarts.baidu.com/demo.html#effectScatter-map
//初始的状态，
mapoption: mapoption,
需要动态显示地图上点指标内容，比如下单量、支付量等，因此需要清空实例重新渲染
this.refs[name] && this.refs[name].getEchartsInstance().clear()
//调用完成后重新设置option数据
this.setState({
mapoption: mapoption,
})
此时放大或者移动地图坐标点不跟随地图移动，再不清空实例的情况下是好用的。
//调用
<div className="col-md-12">
<ReactEcharts
ref="mapoption"
option={this.state.mapoption}
style={{height: '1200px', width: '100%'}}/>
</div>现在的版本加载了所有module，导致整体js大很多，怎么才能动态加载呢
如题，最近几天出现的错误，详细信息如下：
Uncaught (in promise) TypeError: Cannot read property 'eachItemGraphicEl' of undefined
at ExtendedClass._renderPointer (http://localhost/webpack_dll/lib.js:178362:25)
at ExtendedClass._renderMain (http://localhost/webpack_dll/lib.js:178219:19)
at ExtendedClass.render (http://localhost/webpack_dll/lib.js:178138:19)
at ECharts.<anonymous> (http://localhost/webpack_dll/lib.js:137917:24)
at ExtendedClass.<anonymous> (http://localhost/webpack_dll/lib.js:139205:21)
at Array.forEach (native)
at each (http://localhost/webpack_dll/lib.js:139678:18)
at ExtendedClass.eachSeries (http://localhost/webpack_dll/lib.js:139203:14)
at ECharts.doRender (http://localhost/webpack_dll/lib.js:137914:18)
at ECharts.update (http://localhost/webpack_dll/lib.js:137351:23)
_renderPointer @ GaugeView.js:275
_renderMain @ GaugeView.js:132
render @ GaugeView.js:51
(anonymous) @ echarts.js:1230
(anonymous) @ Global.js:499
each @ util.js:260
eachSeries @ Global.js:497
doRender @ echarts.js:1227
update @ echarts.js:664
prepareAndUpdate @ echarts.js:793
echartsProto.setOption @ echarts.js:290
renderEchartDom @ echarts-for-react.js:81
ReactEcharts_componentDidMount @ echarts-for-react.js:33
(anonymous) @ ReactCompositeComponent.js:264
measureLifeCyclePerf @ ReactCompositeComponent.js:74
(anonymous) @ ReactCompositeComponent.js:263
notifyAll @ CallbackQueue.js:67
close @ ReactReconcileTransaction.js:81
closeAll @ Transaction.js:204
perform @ Transaction.js:151
perform @ Transaction.js:138
perform @ ReactUpdates.js:90
flushBatchedUpdates @ ReactUpdates.js:173
closeAll @ Transaction.js:204
perform @ Transaction.js:151
batchedUpdates @ ReactDefaultBatchingStrategy.js:63
enqueueUpdate @ ReactUpdates.js:201
enqueueUpdate @ ReactUpdateQueue.js:25
enqueueSetState @ ReactUpdateQueue.js:210
ReactComponent.setState @ ReactComponent.js:64
handleChange @ connect.js:302
dispatch @ createStore.js:186
dispatch @ instrument.js:599
(anonymous) @ index.js:208
fetchApi.then.actionWith.type @ api.js:199经过调试发现应该是 echarts 最近的版本(@3.4.0 )更新导致的，建议 package.json 修改下版本控制：
"echarts": "^3.1.1" => "echarts": "~3.1.1"
echarts: 2.7 MB (47.3%)
react-dom: 535.36 KB (9.16%)
moment: 455.55 KB (7.79%)
zrender: 439.99 KB (7.52%)
core-js: 197.72 KB (3.38%)
react-router: 103.24 KB (1.77%)
react: 103.13 KB (1.76%)
lodash: 60.78 KB (1.04%)
history: 55.74 KB (0.953%)
warning: 1.76 KB (3.17%)
<self>: 53.98 KB (96.8%)
buffer: 47.47 KB (0.812%)
react-datetime-slot: 38.92 KB (0.666%)
object-assign: 817 B (2.05%)
<self>: 38.13 KB (98.0%)
react-popover: 36.95 KB (0.632%)
react-redux: 36.22 KB (0.619%)
axios: 35.04 KB (0.599%)
fbjs: 30.79 KB (0.526%)
react-datetime: 29.11 KB (0.498%)
object-assign: 817 B (2.74%)
<self>: 28.31 KB (97.3%)
create-react-class: 27 KB (0.462%)
regenerator-runtime: 23.24 KB (0.397%)
prop-types: 21.42 KB (0.366%)
redux: 20.35 KB (0.348%)
lodash.assign: 16.35 KB (0.280%)
react-modal: 14.62 KB (0.250%)
redux-logger: 14.16 KB (0.242%)
react-fileupload: 12.47 KB (0.213%)
react-onclickoutside: 11.96 KB (0.204%)
deep-diff: 11.21 KB (0.192%)
react-router-redux: 11.05 KB (0.189%)
debug: 8.89 KB (0.152%)
redux-promise-middleware: 7.12 KB (0.122%)
lodash.debounce: 6.89 KB (0.118%)
css-vendor: 6.4 KB (0.109%)
lodash-es: 5.74 KB (0.0981%)
echarts-for-react: 5.47 KB (0.0936%)
process: 5.17 KB (0.0885%)
deep-equal: 3.8 KB (0.0650%)
lodash._getnative: 3.78 KB (0.0646%)
lodash.throttle: 3.45 KB (0.0590%)
我只需要用到里面其中几个echart，可不可以选择性的使用chart？？？
我要给折线图上的每个点添加单击事件，请问该如何做呢？
通过webview的话怎么操作呢
在窗口变化时，如果获取窗口变化后的宽度按比例计算出高度，把值用setState存入state中（div的height取state里的值），但是这样会调用DidUpdate，图表重新初始化生成，而不是通过echartObj.resize();，请问有什么解决方法可以让宽高都发生变化，并且看上去图表只是放大缩小，并不会重新生成？
I use var ReactEcharts = require('echarts-for-react/lib/echarts-for-react'); to include the ReactEcharts,
and then
var Trend = React.createClass({
render : function(){
return (
<div style={{background: "white", padding: "10px 0"}}>
<div style={{height:'200px',width:'95%',margin: '0 auto'}}>
<ReactEcharts
option={this.getOption()}
style={{height: '200px', width: '100%'}} />
</div>
</div>
);
},
getOption : function(){
var option = {
// 省略
};
return option;
}
});At last I render Trend, the console report
bundle.js:91294 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofTrend Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method ofTrend.
I wonder where is wrong.
This would be a simple but convenient feature but right now I don't have the time to implement it....
I would send a PR after I finish my current project if you think this is a good suggestion, and you guys still haven't implemented it.
Please let me know if you think this feature is redundant. Thanks!!
看了下lib里代码，default关键字并没有做特殊处理，在ie8下会有问题的。
地图散点，鼠标移入弹出提示框，能否实现鼠标移入弹出提示框功能保留，并为散点添加点击事件，如果可以求设置方法。
感谢！！！
如图点击原点进行下一步操作，求问点击事件添加方法
My setup is that I have multiple sets of data and config for different chart types, so it allows to dynamically switch between multi chart types. It just simply pass everything as props to this HOC called echarts-base-chart, then it uses the echarts-for-react inside it.
Recently, I found it will throw this error when I switch the chart from one type to another. So I'm wondering what would cause this error?
dva结合ant design的table组件：展示组件第一次获得初始state为null，table显示暂无数据，第二次获取到了model返回的ajax请求接口数据，数据填充
dva结合echarts-for-react：展示组件第一次获得初始state为null，ReactEcharts获取的数据为null直接报错没有进入数据填充阶段
解决方案：
{chart? <ReactEcharts
option={getOption(chart)}
style={{height: '400px'}} /> : 'test'}
这是我目前的解决方案，想问echarts-for-react现在是怎么处理数据还没就位的情况的
大家好.
I'm trying to build a system with several interconnected charts just like it's described there: https://ecomfe.github.io/echarts/doc/example/mix8.html#macarons2-en but using React wrapper.
How can I access echart instance and it's .connect method?
Thanks!
我在引用echarts-for-react 时会报出一个错误
Cannot read property 'requestAnimationFrame' of undefined
我定位很久没找到原因。
echartObj.setOption(this.props.option);
这里应该有一个参数notMerge
如果不传会是false，多次setOption，如果上次的数据比这次的数据多，会有错乱的效果
能否将这个参数加到ReactEcharts的props里
百度词云这个chart渲染不出来
http://gallery.echartsjs.com/editor.html?c=xBJ11Hguze
option = {
title: {
text: '热点分析',
link: 'https://www.baidu.com/s?wd=' + encodeURIComponent('ECharts'),
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#F7F7F7',
tooltip: {
show: true
},
toolbox: {
feature: {
saveAsImage: {
iconStyle: {
normal: {
color: '#FFFFFF'
}
}
}
}
},
series: [{
name: '热点分析',
type: 'wordCloud',
//size: ['9%', '99%'],
sizeRange: [6, 66],
//textRotation: [0, 45, 90, -45],
rotationRange: [-45, 90],
//shape: 'circle',
textPadding: 0,
autoSize: {
enable: true,
minSize: 6
},
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [{
name: "Jayfee",
value: 666
}, {
name: "Nancy",
value: 520
}]
}]
};
//myChart.setOption(option);
myChart.on('click', function(params) {
//alert((params.name));
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
[email protected] requires a peer of react@>=0.13.2 || ^0.14 || ^15.0.0 but none was installed.
`-- UNMET PEER DEPENDENCY [email protected]
我想使用这个插件https://github.com/ecomfe/echarts-liquidfill
我在文件头部直接import后
import ReactEcharts from 'echarts-for-react';
import 'echarts-liquidfill';
报错：
water effectaPathProxy.js:235 Uncaught IndexSizeError: Failed to execute 'arc' on
使用了最简单的线形图和柱形图，console 都会出现这个错误。
原因是：本项目的 package.json 中对于 echarts 依赖版本控制不够严格，所以导致 echarts 直接升到最新的 3.4，导致不兼容。
升级使用 [email protected] 即可解决这个问题。
最近准备会更新本项目，并且支持最新的 echarts 3.4 版本。
在react环境下，饼图值为零时想设置饼图不显示，可是总是失效，在官网demo下实验好用，移到项目中就失效，不知道为什么，求大神指点！！！
按照示例在图表组件上使用option属性会报错
code
import chart from 'echarts-for-react'
……
<chart styleName="chart-warp" option={this.state.option}></chart>
error
Unknown prop `option` on <chart> tag. Remove this prop from the element
我有一个echarts-for-react组件，假设叫做小白吧。
小白是一个折线图。可以把自己正确的画出来。
小白有一个铃铛，本来是当当的响，当某些事情发生的时候，我setState({铃铛:当当当})。
这个时候小白会render，echarts也会render，但是其实图并没有任何变化。
所以我怎么做，才不会让echart重新render呢？
thankyou.
当项目运行在[email protected]时控制台会报如下警告
echarts-for-react.js中，
componentWillUnmount() {
echarts.dispose(this.refs.chart)
},
this.refs.chart 并不存在，是不是应该改成this.refs.echartsDom？
getEchartsInstance无法获取echarts的实例,只有一些私有方法，无法获取connect方法
引入这个怎么实现词云图？
https://facebook.github.io/react/docs/refs-and-the-dom.html
这里面说ref已经过时了.....
唉，变化真是太随意了
elementResizeEvent(this.refs.echartsDom, function() {
let div = document.getElementById(id),
width =
div.style.width|| div.clientWidth || div.offsetWidth || div.scrollWidth,
height = width * 0.5;
this.setState = {
width:width,
height:height
}
echartObj.resize();
});
//-------------------------------------------------------------------
render() {
let style = {width:this.state.width,height:this.state.height} || {height: '300px'};
// for render
return (
<div id={this.state.id}
ref='echartsDom'
style={style}
/>
);
}
//------------------------------------------------------------------我想实现的效果是宽高比一定，高度随宽度变化而变化。
使用this.setState也没用，因为componentDidMount后不再render了。
请问这该怎么解决呀？
myChart=echarts.init(document.getElementById('echartsMain'));
myChart.setOption(option);
类似上面的代码 如何实现echarts.init（）
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.
建议更新依赖包
如题
react有版本限制吗？？这个问题是怎么回事？
echarts.getInstanceByDom = function (dom) {
var key = dom.getAttribute(DOM_ATTRIBUTE_KEY);
return instances[key];
};
getEchartsInstance: function getEchartsInstance() {
// return the echart object
return _echarts2['default'].getInstanceByDom(this.refs.echartsDom) || _echarts2['default'].init(this.refs.echartsDom, this.props.theme);
},如题，是竖向的柱状图，固定每条柱状图的宽度和间距，让图表高度自适应，这个怎么做呢
外框的高度明明是171，到内框就又变成100了 /(ㄒoㄒ)/~~ help
我的雷达图有6个维度，每个维度之间点需要添加单击事件，请问echarts怎么判断我点击的是哪个点？
当设置zoom属性为1.5倍的时候，默认显示是正常的，滑动鼠标滚轮放大地图，停留1s后自己又还原到默认的zoom值，想要的是停留放大后的地图效果，
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
zoom: 1.5,
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},TransformError: /Users/xxxx/workspace/xxxx/node_modules/echarts-for-react/lib/echarts-for-react.js: [BABEL] /Users/xxxx/workspace/xxxx/node_modules/echarts-for-react/lib/echarts-for-react.js: Unknown option: foreign.Children. Check out http://babeljs.io/docs/usage/options/ for more info
怎么办呢
在OSX环境下使用webpack编译发生如下错误，
ERROR in ./~/echarts-for-react/lib/echarts-for-react.js
Module build failed: ReferenceError: Unknown plugin "transform-es3-member-expression-literals" specified in "/Users/mikako/Desktop/allbaidutest/baidu/atm-idp/noc/node_modules/echarts-for-react/.babelrc" at 0, attempted to resolve
在modules中把'echarts-for-react'的babelrc注释掉即可正常编译,依赖版本如下
"echarts": "^3.2.3",
"echarts-for-react": "^1.1.5",
"express": "^4.14.0",
"history": "^4.0.0",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"react": "^15.2.1",
"react-css-modules": "^3.7.9",
"react-dom": "^15.2.1",
"react-redux": "^4.4.5",
"react-router": "^2.7.0",
"react-router-redux": "^4.0.5",
"redux": "^3.5.2",
"redux-thunk": "^2.1.0"
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.