在React组件中使用Echarts的示例代码_react函数组件中使用echarts资源-CSDN文库

3星 · 超过75%的资源 193 浏览量 2020-08-28 22:11:05 上传评论收藏 67KB PDF 举报

资源推荐

资源详情

资源评论

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

本篇文章主要介绍了在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 (

<div className="mt15 xui-financialAnalyse-page">

<div className="xui-general">

<Chart data={info} data-info={info} />

</div>

</div>

)

}

这是调用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%',

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

Go旅城通票

2021-04-26

不是源代码，就一个pdf。。

普通网友

粉丝: 8
资源:
935

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip