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;
原文地址：https://www.cnblogs.com/zanderblogs/p/9083827.html
时间： 2024-10-26 04:34:05