6 import React, { Component } from 'react'; 7 import axios from 'axios'; 8 import echarts from 'echarts/lib/echarts'; 9 import 'echarts/lib/component/tooltip'; 10 import 'echarts/lib/component/title'; 11 import 'echarts/lib/component/visualMap'; 12 import 'echarts/lib/chart/map'; 13 import 'echarts/map/js/china'; 14 import { Modal, Table } from 'tinper-bee'; 15 import sort from 'bee-table/build/lib/sort'; 16 17 const SortTable = sort(Table); 18 // 展示表表頭 19 const columns = [ 20 { 21 title: '序號', 22 dataIndex: 'index', 23 key: 'index', 24 render(record, text, index) { 25 return index + 1; 26 } 27 }, 28 { title: '產品條碼', dataIndex: 'softdog', key: 'softdog' }, 29 { title: '機構', dataIndex: 'organizname', key: 'organizname', sorter: (a, b) => a.organizname.localeCompare(b.organizname, 'zh') }, 30 { title: '部署模式', dataIndex: 'cloudtype', key: 'cloudtype', sorter: (a, b) => a.cloudtype.localeCompare(b.cloudtype, 'zh') }, 31 { title: '直銷分銷', dataIndex: 'saletype', key: 'saletype', sorter: (a, b) => a.saletype.localeCompare(b.saletype, 'zh') }, 32 { title: '客戶名稱', dataIndex: 'corpname', key: 'corpname', sorter: (a, b) => a.corpname.localeCompare(b.corpname, 'zh') }, 33 { title: '行業大類', dataIndex: 'industry', key: 'industry', sorter: (a, b) => a.industry.localeCompare(b.industry, 'zh') }, 34 { title: '行業分類', dataIndex: 'industrydetail', key: 'industrydetail', sorter: (a, b) => a.industrydetail.localeCompare(b.industrydetail, 'zh') }, 35 { title: '簽約金額(萬)', dataIndex: 'signmny', key: 'signmny', sorter: (a, b) => a.signmny - b.signmny }, 36 { title: '收款金額(萬)', dataIndex: 'collectmny', key: 'collectmny', sorter: (a, b) => a.collectmny - b.collectmny }, 37 { title: '簽約時間', dataIndex: 'billmakedate', key: 'billmakedate' } 38 ]; 39 class ProjectProvinceMap extends Component { 40 constructor(props) { 41 super(props); 42 this.handleClick = this.handleClick.bind(this); 43 this.openOrClose = this.openOrClose.bind(this); 44 this.state = { 45 mapdata: null, 46 currprovince: '', 47 showdetail: false, 48 content: [] 49 }; 50 } 51 async componentWillMount() { 52 const promap = await axios.post('*******'); 53 if (promap.data.success === 'success') { 54 this.setState({ 55 mapdata: promap.data.detailMsg.data, 56 showdetail: false 57 }); 58 const ProjectProvinceMapChart = echarts.init(document.getElementById('ProjectProvinceMap')); 59 ProjectProvinceMapChart.setOption({ 60 title: { 61 // 是否顯示 62 show: true, 63 // 主標題文本，'\n'指定換行 64 text: `U8 cloud項目分布(總計：${this.state.mapdata.allnum})`, 65 left: 'center', 66 y: '10px', 67 }, 68 // 工具提示 69 tooltip: { 70 // 顯示策略，可選為：true（顯示） | false（隱藏） 71 show: true, 72 // tooltip主體內容顯示策略，只需tooltip觸發事件或顯示axisPointer而不需要顯示內容時可配置該項為false 73 showContent: true, 74 // 觸發類型，默認數據觸發，見下圖，可選為：'item' | 'axis' 75 trigger: 'item', 76 // 位置指定，傳入{Array}，如[x, y]， 固定位置[x, y]； 77 // 傳入{Function}，如function([x, y]) {return [newX,newY]}， 78 // 默認顯示坐標為輸入參數，用戶指定的新坐標為輸出返回。 79 // position: getTooltipPosition(0,0), 80 // 內容格式器：{string}（Template） | {Function}，支持異步回調 81 // 拖拽重計算獨有，數據孤島內容格式器：{string}（Template） | {Function}，見表格下方 82 // islandFormatter: 83 // 顯示延遲，添加顯示延遲可以避免頻繁切換，特別是在詳情內容需要異步獲取的場景，單位ms 84 showDelay: 0, 85 // 隱藏延遲，單位ms 86 hideDelay: 0, 87 // 動畫變換時長，單位s，如果你希望tooltip的跟隨實時響應， 88 // showDelay設置為0是關鍵，同時transitionDuration設0也 89 // 會有交互體驗上的差別。 90 transitionDuration: 0 91 }, 92 legend: { 93 // 顯示策略，可選為：true（顯示） | false（隱藏） 94 show: false, 95 // 布局方式，默認為水平布局，可選為：'horizontal' | 'vertical' 96 orient: 'vertical', 97 // 水平安放位置，默認為全圖居中，可選為：'center' | 'left' | 'right' | {number}（x坐標，單位px） 98 x: 'left', 99 // 垂直安放位置，默認為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y坐標，單位px） 100 y: 'top', 101 // 圖例背景顏色，默認透明 102 backgroundColor: 'rgba(0,0,0,0.1)', 103 // 圖例邊框顏色 104 borderColor: '#0066FF', 105 // 圖例邊框線寬，單位px，默認為0（無邊框） 106 borderWidth: 1, 107 // 圖例內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距，同css 108 padding: [15, 15, 15, 15], 109 // 各個item之間的間隔，單位px，默認為10，橫向布局時為水平間隔，縱向布局時為縱向間隔 110 itemGap: 20, 111 // 圖例圖形寬度 112 itemWidth: 30, 113 // 圖例圖形高度 114 itemHeight: 20, 115 // 默認只設定了圖例文字顏色,更個性化的是，要指定文字顏色跟隨圖例,可設color為'auto' 116 textStyle: { 117 // 顏色 118 color: '#FF7F50', 119 // 水平對齊方式，可選為：'left' | 'right' | 'center' 120 align: 'left', 121 // 垂直對齊方式，可選為：'top' | 'bottom' | 'middle' 122 baseline: 'bottom', 123 // 字體系列 124 fontFamily: 'Arial, 宋體, sans-serif', 125 // 字號 ，單位px 126 fontSize: 20, 127 // 樣式，可選為：'normal' | 'italic' | 'oblique' 128 fontStyle: 'italic', 129 // 粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900 130 fontWeight: 'normal' 131 }, 132 // 文本格式器：{string}（Template） | {Function}，模板變量為'{name}'，函數回調參數為name 133 // 選擇模式，默認開啟圖例開關，可選single，multiple 134 selectedMode: true, 135 // 配置默認選中狀態，可配合LEGEND.SELECTED事件做動態數據載入 136 // 圖例內容數組 137 data: [] 138 }, 139 // 值域選擇，每個圖表最多僅有一個值域控件 140 dataRange: { 141 show: true, 142 x: '90%', 143 y: '70%', 144 splitList: [ 145 { start: this.state.mapdata.datarange[4], color: '#4D98D9' }, 146 { start: this.state.mapdata.datarange[3], end: this.state.mapdata.datarange[4], color: '#6FADDE' }, 147 { start: this.state.mapdata.datarange[2], end: this.state.mapdata.datarange[3], color: '#95C2E3' }, 148 { start: this.state.mapdata.datarange[1], end: this.state.mapdata.datarange[2], color: '#BAD3E7' }, 149 { start: 1, end: this.state.mapdata.datarange[1], color: '#E1E6EC' } 150 ], 151 // color: ['#D7C799', '#D7A07A', '#D75953', '#D72937', '#D70F30'] 152 }, 153 // 工具箱，每個圖表最多僅有一個工具箱 154 toolbox: { 155 // 顯示策略，可選為：true（顯示） | false（隱藏） 156 show: false, 157 // 布局方式，默認為水平布局，可選為：'horizontal' | 'vertical' 158 orient: 'horizontal', 159 // 水平安放位置，默認為全圖居中，可選為：'center' | 'left' | 'right' | {number}（x坐標，單位px） 160 x: 'right', 161 // 垂直安放位置，默認為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y坐標，單位px） 162 y: 'bottom', 163 // 工具箱背景顏色，默認透明 164 backgroundColor: 'rgba(218,112,214,0.6)', 165 // 工具箱邊框顏色 166 borderColor: '#0066FF', 167 // 工具箱邊框線寬，單位px，默認為0（無邊框） 168 borderWidth: 1, 169 // 工具箱內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距，同css 170 padding: [15, 15, 15, 15], 171 // 各個item之間的間隔，單位px，默認為10，橫向布局時為水平間隔，縱向布局時為縱向間隔 172 itemGap: 20, 173 // 工具箱icon大小，單位（px） 174 itemSize: 20, 175 // 工具箱icon顏色序列，循環使用，同時支持在具體feature內指定color 176 color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'], 177 // 禁用顏色定義 178 disableColor: '#fff', 179 // 生效顏色定義 180 effectiveColor: 'red', 181 // 是否顯示工具箱文字提示，默認啟用 182 showTitle: true, 183 // 工具箱提示文字樣式 184 textStyle: { 185 // 顏色 186 color: '#FF7F50', 187 // 水平對齊方式，可選為：'left' | 'right' | 'center' 188 align: 'left', 189 // 垂直對齊方式，可選為：'top' | 'bottom' | 'middle' 190 baseline: 'bottom', 191 // 字體系列 192 fontFamily: 'Arial, 宋體, sans-serif', 193 // 字號 ，單位px 194 fontSize: 20, 195 // 樣式，可選為：'normal' | 'italic' | 'oblique' 196 fontStyle: 'italic', 197 // 粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900 198 fontWeight: 'normal' 199 } 200 }, 201 // 縮放漫游組件，僅對地圖有效 202 roamController: { 203 // 顯示策略，可選為：true（顯示） | false（隱藏） 204 show: false, 205 // 水平安放位置，默認為左側，可選為：'center' | 'left' | 'right' | {number}（x坐標，單位px） 206 x: 'right', 207 // 垂直安放位置，默認為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y坐標，單位px） 208 y: 'top', 209 // 指定寬度，決定4向漫游圓盤大小，可指定 {number}（寬度，單位px） 210 width: 120, 211 // 指定高度，縮放控制鍵默認會在指定高度的最下方最大化顯示，可指定 {number}（高度，單位px） 212 height: 200, 213 // 縮放漫游組件背景顏色，默認透明 214 backgroundColor: 'rgba(0,0,0,0.1)', 215 // 縮放漫游組件邊框顏色 216 borderColor: '#1e90ff', 217 // 縮放漫游組件邊框線寬，單位px，默認為0（無邊框） 218 borderWidth: 1, 219 // 縮放漫游組件內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距，同css 220 padding: [15, 15, 15, 15], 221 // 漫游組件文字填充顏色 222 fillerColor: '#000', 223 // 控制手柄主體顏色 224 handleColor: '#e3655a', 225 // 4向漫游移動步伐，單位px 226 step: 10, 227 // 必須，指定漫游組件可控地圖類型 228 mapTypeControl: { 229 china: true 230 } 231 }, 232 series: [ 233 { 234 // 圖表類型，必要參數！如為空或不支持類型，則該系列數據不被顯示。可選為： 235 // 'line'（折線圖） | 'bar'（柱狀圖） | 'scatter'（散點圖） | 'k'（K線圖） 236 // 'pie'（餅圖） | 'radar'（雷達圖） | 'chord'（和弦圖） | 'force'（力導向布局圖） | 'map'（地圖） 237 type: 'map', 238 // 系列名稱 239 name: '項目數量', 240 // 地圖類型，支持world，china及全國34個省市自治區 241 mapType: 'china', 242 // 是否開啟滾輪縮放和拖拽漫游,默認為false（關閉）， 243 // 其他有效輸入為true（開啟），'scale'（僅開啟滾輪縮放）， 244 // 'move'（僅開啟拖拽漫游） 245 roam: false, 246 // 圖形樣式 247 itemStyle: { 248 // 默認狀態下地圖的文字 249 normal: { 250 label: { show: true }, 251 borderWidth: 0.5, // 區域邊框寬度 252 borderColor: '#678096', // 區域邊框顏色 253 areaColor: '#FFFFFF', // 區域顏色 254 }, 255 // 鼠標放到地圖上面顯示文字 256 emphasis: { 257 label: { 258 show: true 259 } 260 } 261 }, 262 data: this.state.mapdata.list 263 } 264 ] 265 }); 266 ProjectProvinceMapChart.on('click', this.handleClick); 267 } 268 } 269 handleClick(params) { 270 axios.post('*******', { province: params.data.name }).then((res) => { 271 if (res.data.success === 'success') { 272 this.setState({ 273 showdetail: true, 274 currprovince: params.data.name, 275 content: res.data.detailMsg.data 276 }); 277 } 278 }); 279 } 280 openOrClose() { 281 this.setState({ 282 showdetail: false 283 }); 284 } 285 render() { 286 return ( 287 <div style={{ width: '90%', height: '600px' }}> 288 <div id="ProjectProvinceMap" style={{ width: '90%', height: '600px' }} /> 289 <Modal show={this.state.showdetail} onHide={this.openOrClose} style={{ width: '90%', height: '600px' }}> 290 <Modal.Header closeButton style={{ padding: '10px' }}> 291 <Modal.Title > 292 {this.state.currprovince} 293 </Modal.Title> 294 </Modal.Header > 295 <Modal.Body style={{ padding: '5px' }}> 296 <div style={{ width: '100%', height: '600px', overflowY: 'auto' }}> 297 <SortTable 298 data={this.state.content} 299 columns={columns} 300 rowKey="billcode" 301 style={{ margin: '5px' }} 302 /> 303 </div> 304 </Modal.Body> 305 </Modal> 306 </div> 307 ); 308 } 309 } 310 export default ProjectProvinceMap;