React+echarts實現柱狀圖示例

  1 import React, { Component } from 'react';
  2 import axios from 'axios';
  3 import { Modal, Table } from 'tinper-bee';
  4 import echarts from 'echarts/lib/echarts';
  5 import 'echarts/lib/chart/bar';
  6 import 'echarts/lib/component/tooltip';
  7 import 'echarts/lib/component/title';
  8 import sort from 'bee-table/build/lib/sort';
  9 
 10 const SortTable = sort(Table);
 11 
 12 class RegionMoneyBar extends Component {
 13     constructor(props) {
 14         super(props);
 15         this.handleClick = this.handleClick.bind(this);
 16         this.legendHandleClick = this.legendHandleClick.bind(this);
 17         this.openOrClose = this.openOrClose.bind(this);
 18         this.state = {
 19             totalcontractkey: [],
 20             zxtotalcontractvalue: [],
 21             fxtotalcontractvalue: [],
 22             zxtotalmoney: 0,
 23             fxtotalmoney: 0,
 24             maxmoney: 100,
 25             currregion: '',
 26             showdetail: false,
 27             content: [],
 28             legendselected: {
 29                 直銷: true,
 30                 分銷: true
 31             }
 32         };
 33         // 展現表表頭
 34         this.columns = [
 35             {
 36                 title: '序號',
 37                 dataIndex: 'index',
 38                 key: 'index',
 39                 render(record, text, index) {
 40                     return index + 1;
 41                 }
 42             },
 43             { title: '產品條碼', dataIndex: 'softdog', key: 'softdog' },
 44             { title: '機構', dataIndex: 'organizname', key: 'organizname', sorter: (a, b) => a.organizname.localeCompare(b.organizname, 'zh') },
 45             { title: '部署模式', dataIndex: 'cloudtype', key: 'cloudtype', sorter: (a, b) => a.cloudtype.localeCompare(b.cloudtype, 'zh') },
 46             { title: '直銷分銷', dataIndex: 'saletype', key: 'saletype', sorter: (a, b) => a.saletype.localeCompare(b.saletype, 'zh') },
 47             { title: '客戶名稱', dataIndex: 'corpname', key: 'corpname', sorter: (a, b) => a.corpname.localeCompare(b.corpname, 'zh') },
 48             { title: '行業大類', dataIndex: 'industry', key: 'industry', sorter: (a, b) => a.industry.localeCompare(b.industry, 'zh') },
 49             { title: '行業分類', dataIndex: 'industrydetail', key: 'industrydetail', sorter: (a, b) => a.industrydetail.localeCompare(b.industrydetail, 'zh') },
 50             { title: '簽約金額(萬)', dataIndex: 'signmny', key: 'signmny', sorter: (a, b) => a.signmny - b.signmny },
 51             { title: '收款金額(萬)', dataIndex: 'collectmny', key: 'collectmny', sorter: (a, b) => a.collectmny - b.collectmny },
 52             { title: '簽約時間', dataIndex: 'billmakedate', key: 'billmakedate' }
 53         ];
 54     }
 55     async componentWillMount() {
 56         const res = await axios.post('******', { type: '直銷' });
 57         const res2 = await axios.post('******', { type: '分銷' });
 58         if (res.data.success === 'success') {
 59             this.setState({
 60                 totalcontractkey: res.data.detailMsg.data.totalcontractkey,
 61                 zxtotalcontractvalue: res.data.detailMsg.data.totalcontractvalue,
 62                 zxtotalmoney: res.data.detailMsg.data.totalmoney,
 63                 fxtotalcontractvalue: res2.data.detailMsg.data.totalcontractvalue,
 64                 fxtotalmoney: res2.data.detailMsg.data.totalmoney,
 65                 maxmoney: res.data.detailMsg.data.maxmoney
 66             });
 67             const RegionMoneyBarChart = echarts.init(document.getElementById('RegionMoneyBar'));
 68             // 繪製圖表
 69             RegionMoneyBarChart.setOption({
 70                 title: {
 71                     text: '本年大區簽約狀況',
 72                     left: 'center',
 73                     y: '10px'
 74                 },
 75                 tooltip: {
 76                     trigger: 'axis',
 77                     axisPointer: {
 78                         type: 'shadow'
 79                     }
 80                 },
 81                 legend: {
 82                     y: '40px',
 83                     data: [`直銷(總計：${this.state.zxtotalmoney}萬元)`, `分銷(總計：${this.state.fxtotalmoney}萬元)`]
 84                 },
 85                 calculable: true,
 86                 xAxis: [
 87                     {
 88                         type: 'category',
 89                         splitLine: {
 90                             show: false
 91                         },
 92                         endOnTick: true,
 93                         data: this.state.totalcontractkey
 94                     }
 95                 ],
 96                 yAxis: [
 97                     {
 98                         type: 'value',
 99                         max: this.state.maxmoney,
100                         splitLine: {
101                             show: false
102                         }
103                     }
104                 ],
105                 series: [
106                     {
107                         name: `直銷(總計：${this.state.zxtotalmoney}萬元)`,
108                         type: 'bar',
109                         itemStyle: {
110                             normal:
111                                 {
112                                     label:
113                                         {
114                                             show: true,
115                                             position: 'top'
116                                         },
117                                     color: '#F05B61'
118                                 }
119                         },
120                         data: this.state.zxtotalcontractvalue
121                     },
122                     {
123                         name: `分銷(總計：${this.state.fxtotalmoney}萬元)`,
124                         type: 'bar',
125                         itemStyle: {
126                             normal:
127                                 {
128                                     label:
129                                         {
130                                             show: true,
131                                             position: 'top'
132                                         },
133                                     color: '#28AED1'
134                                 }
135                         },
136                         data: this.state.fxtotalcontractvalue
137                     }
138                 ]
139 
140             });
141             RegionMoneyBarChart.on('click', this.handleClick);
142             RegionMoneyBarChart.on('legendselectchanged', this.legendHandleClick);
143         }
144     }
145     handleClick(params) {
146         const legendkeys = Object.keys(this.state.legendselected);
147         let zx = false;
148         let fx = false;
149         const legendselected = this.state.legendselected;
150         legendkeys.forEach((val) => {
151             if (val.indexOf('直銷') !== -1) {
152                 if (legendselected[val]) {
153                     zx = true;
154                 }
155             }
156             if (val.indexOf('分銷') !== -1) {
157                 if (legendselected[val]) {
158                     fx = true;
159                 }
160             }
161         });
162         let zf = 'ALL';
163         if (zx && !fx) {
164             zf = 'ZX';
165         }
166         if (!zx && fx) {
167             zf = 'FX';
168         }
169         axios.post('*********', { region: params.name, zfdatas: zf }).then((res) => {
170             if (res.data.success === 'success') {
171                 this.setState({
172                     showdetail: true,
173                     currregion: params.name,
174                     content: res.data.detailMsg.data
175                 });
176             }
177         });
178     }
179     legendHandleClick(params) {
180         this.setState({
181             legendselected: params.selected
182         });
183     }
184     openOrClose() {
185         this.setState({
186             showdetail: false
187         });
188     }
189     render() {
190         return (
191             <div style={{ width: '90%', height: '600px' }}>
192                 <div id="RegionMoneyBar" style={{ width: '100%', height: '500px' }} />
193                 <Modal show={this.state.showdetail} onHide={this.openOrClose} style={{ width: '90%', height: '600px' }}>
194                     <Modal.Header closeButton style={{ padding: '10px' }}>
195                         <Modal.Title >
196                             {this.state.currregion}
197                         </Modal.Title>
198                     </Modal.Header >
199                     <Modal.Body style={{ padding: '5px' }}>
200                         <div style={{ height: '600px', overflowY: 'auto' }}>
201                             <SortTable
202                                 data={this.state.content}
203                                 columns={this.columns}
204                                 rowKey="billcode"
205                                 style={{ margin: '5px' }}
206                             />
207                         </div>
208                     </Modal.Body>
209                 </Modal>
210             </div>
211         );
212     }
213 }
214 
215 export default RegionMoneyBar;