频道导航

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

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了在React 组件中使用Echarts的示例代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

<div class="jb51code">
<pre class="brush:bash;">
npm install echarts --save

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

var info = 1;

return (  
  <div className="mt15 xui-financialAnalyse-page"&gt;   
    <div className="xui-general"&gt;
      <Chart data={info} data-info={info} />
    </div>
  </div>
)

}

@H_301_0@这是调用Echarts组件的地方，给里面传了2个属性（data-开头是H5定义的规范）

自定义属性要以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','Fri','Sat','Sun'],axisTick: {
        alignWithLabel: true
      }
    }
  ],yAxis : [
    {
      type : 'value'
    }
  ],series : [
    {
      name:'你好',type:'bar',barWidth: '60%',data: dataSet
    }
  ]
};

myChart.setOption(option);

},render: function() {
return (
<div id="main" style={{width: 500,height:500}}>

)
}
});

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

@H_301_0@1、componentWillMount：在插入真实DOM之前发起Action，向后端请求数据。

@H_301_0@2、onChangeStore：在数据变更的时候更新数据，并在getInitialState中加入监听Store中数据变化的监听器。

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

@H_301_0@4、showChart：配置Echarts，具体配置信息可以参考Echarts文档

@H_301_0@5、如果组件生命周期结束，那么要加上如下代码：

@H_301_0@否则会报错： 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.

@H_301_0@最后附上效果图：

@H_301_0@　