react中使用echarts

来源：互联网发布：maven java web项目编辑：程序博客网时间：2024/05/23 19:16

依赖： "echarts": "^3.4.0",
"echarts-for-react": "^1.1.6",

"element-resize-event": "^2.0.7"

ReactEcharts.js

import React from 'react';
import ReactEcharts from 'echarts-for-react';

const Charts= React.createClass({
getInitialState: function() {
return {option: this.getOption()};
},

componentDidMount: function() {

},

getOption: function() {
var {data} = this.props
const option = {
tooltip: {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'line' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: "{b}<br/>{a}:{c}"
},
legend: {
show:false,
data:['信号']
},
toolbox: {
show: false,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
grid: {
top: 0,
left: 0,
right: 0,
bottom:0
},
dataZoom: {
show: false
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisTick : { // 轴标记
show:false
},
axisLabel : {
show:false
},
axisLine : { // 轴线
show: true,
lineStyle: {
color: 'gray'
}
},
data: ['00:00:00','00:00:01','00:00:02','00:00:03','00:00:04',00:00:05']
}
],
yAxis: [
{
show:false,
type: 'value',
scale: true,
name: '值',
max:5,
min:-5,
boundaryGap: [0.2, 0.2]
}
],
series: [
{
name:'信号',
type:'bar',
smooth: true,
data:[1,3,2,5,3]
}
]
};
return option;
},
render: function() {

return (
<div className='examples'>
<div className='parent'>
<ReactEcharts ref='echarts_react'
option={this.state.option}
style={{height: 30,width:75}} />
</div>
</div>
);
}
});

export default Charts;

其他地方引用这个组件就可以了；数据自己想怎么给就怎么给；option和 echarts里的option一样去设置

1 0