1. Load ecHART components as required, taking the pie chart as an example
import React, {Component} from 'react'; // import ReactEcharts from 'echarts-for-react'; // Import ReactEcharts from 'echarts-for-react/lib/core'; import echarts from 'echarts/lib/echarts'; import 'echarts/lib/chart/line'; import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/title'; import { Card, Button } from 'antd' export default class Line extends Component { state = { Books: [1000200, 0150, 0300, 0200, 0120, 0800], / / bookings sales: [800150, 0130, 0280, 0150, 0100, 0500], GetOption1 = ()=>{let options = {title:{textStyle:{color:'pink'}}, legend: {// [' inventory '], icon:'circle'}, tooltip: {// Trigger :' axis'}, xAxis:{data: [' Monday ', 'on Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday' '],}, yAxis: {}, series: [{name: 'inventory' type: 'the line' / / graph data: [1000200, 0150, 0300, 0200, 0120, 0800]}}] return options} getOption2 = (books, sales) = > {let options = { Title :{text:' chart-2 ', textStyle:{color:'pink'}}, legend: {// Trigger: 'axis'}, xAxis:{data: [' Monday ', 'on Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday' '],}, yAxis: {}, series: [/ / data source {name: 'orders' type:' line 'data: books}, {name:' sales ', type:'line', data:sales } ] } return options } update = ()=>{ this.setState(state=>({ books:state.books.map(item=>item+100), sales:state.sales.map(item=>item-20), Render () {const title = <Button type={'primary'} onClick={this.update}> </Button> const {books,sales} = this.state return ( <div> <Card> <ReactEcharts echarts={echarts} option={this.getOption1()} /> </Card> <Card Title ={title}> <ReactEcharts echarts={echarts} option={this.getoption2 (books,sales)} /> < Card> </div>); }}Copy the code