react+echarts实现地图
Posted zblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
以上是关于react+echarts实现地图的主要内容，如果未能解决你的问题，请参考以下文章