Use the Echarts sample code in the React component, reactecharts

Use the Echarts sample code in the React component, reactecharts

When you meet a requirement, you need to use a bar chart for a scenario. When it comes to visualization, the first response is Echarts. It is convenient to load the Echarts component using js, but it will be difficult to load the Echarts component in React. Various connected monband Guesses are implemented. In edmo

Here we need to use ECharts in our own react project. We can see on the ECharts official website that one way is to use ECharts in webpack. What we need is this method.

We need to install ECharts before using ECharts. In the past development mode, we used to import the core js files of ECharts on the official website to our html or jsp files, but in the react project, we can directly use node. js npm command installation:

npm install echarts --save

The Echarts example is the simplest application described in the Echarts document.

render:function() {      var info = 1;    return (        <div className="mt15 xui-financialAnalyse-page">           <div className="xui-general">          <Chart data={info} data-info={info} />        </div>      </div>    )  }

This is where the Echarts component is called and two attributes are passed to it (data-starts with the H5-defined Specification)

Var Chart = React. createClass ({getInitialState: function () {this. token = Store. addListener (this. onChangeData); return {}}, componentWillMount: function () {var info = this. props. data; // HTML5 specifies that the custom attribute must start with data-. You can use the console as follows. 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'] // data returned in the background});}, showChart: function (dataSet) {var myChart = echarts. init (document. getElementById ('main'); var option = {title: {text: 'echarts getting started example'}, 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: 'Hi ', type: 'bar', barWidth: '000000', data: dataSet}]}; myChart. setOption (option) ;}, render: function () {return (<div id = "main" style = {width: 500, height: 500 }}></div> )}});

The above is the complete demo Echarts component code, mainly using the processing functions provided by React based on different States (three States) (a total of five ).

1. componentWillMount: initiates an Action to request data from the backend before inserting the real DOM.

2. onChangeStore: update the data when the data changes, and add the listener that listens to the data changes in the Store to getInitialState.

3. componentDidUpdate: After the data is re-rendered, the showChart () method is triggered to draw the canvas.

4. showChart: Configure Echarts. For more information, see the Echarts documentation.

5. If the life cycle of a component ends, add the following code:

  componentWillUnmount: function() {    this.token.remove();  },

Otherwise, the following error occurs: 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.

Attached:

　　　　　

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.