在React 组件中使用Echarts的示例代码

网友投稿 446 2023-03-19


在React 组件中使用Echarts的示例代码

在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化,第一反应当然是Echarts了。平时用js加载Echarts组件很方便,但是在React中就要费下神了。各种连蒙带猜实现了。edmo里的

这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法。

我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件导入到我们的html或者是jsp等文件里面,但是在react项目中,我们可以直接使用node.js的npm命令安装:

npm install echarts --save

Echarts的例子就是Echarts文档上介绍的最简单的应用。

render:function() {

var info = 1;

return (

)

}

这是调用Echarts组件的地方,给里面传了2个属性(data-开头是H5定义的规范)

var Chart = React.createClass({

getInitialState: function() {

this.token = Store.addListener(this.onChangeData);

return {}

},

componentWillMount: function() {

var info = this.props.data;

//HTML5规定自定义属性要以data-开头,这样的可以如下取

console.log(this.props['data-info'])

Action.getInfo(info);

},

componentDidUpdate: function() {

     this.showChart(this.state.data)

},

onChangeData: function() {

var data = Store.getData();

this.setState({

data: data['info']['data'] //后台返回的数据

});

},

showChart: function(dataSet){

var myChart = echarts.init(document.getElementById('main'));

var option = {

title: {

text: 'ECharts 入门示例'

},

color: ['#3398DB'],

tooltip : {

trigger: 'axis',

axisPointer : {

type : 'shadow'

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis : [

{

type : 'category',

data : ['Mon', 'Tue', 'Wed', 'Thu',http:// 'Fri', 'Sat', 'Sun'],

axisTick: {

alignWithLabel: true

}

}

],

yAxis : [

{

type : 'value'

}

],

series : [

{

name:'你好',

type:'bar',

barWidth: '60%',

data: dataSet

}

]

};

myChart.setOpuvfkAQNtion(option);

},

render: function() {

return (

)

}

});

上面是完整的demo Echarts组件的代码,主要是利用了React根据不同状态(3种状态)提供的处理函数(一共uvfkAQN有5种)。

1、componentWillMount:在插入真实DOM之前发起Action,向后端请求数据。

2、onChangeStore:在数据变更的时候更新数据,并在getInitialState中加入监听Store中数据变化的监听器。

3、componentDidUpdate:在数据被重新渲染之后,触发showChart()方法绘制canvas。

4、showChart:配置Echarts,具体配置信息可以参考Echarts文档

5、如果组件生命周期结束,那么要加上如下代码:

componentWillUnmount: function() {

this.token.remove();

},

否则会报错: Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

最后附上效果图:


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:api接口文档的作用(api接口文档的作用有哪些)
下一篇:接口测试用例咋写(接口测试用例实例)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~