react+echarts实现地图

  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;