echarts 安徽地图

来源于   https://blog.csdn.net/qq_39578388/article/details/78727379

 

jsp代码(因为采用的是easyui layout)

<div id="mapDiv" data-options="region:'center'" title="地图展示"></div>

 

 

  1 $(function(){
  2     // 路径配置  
  3     require.config({
  4         paths : {  
  5             // echarts: 'http://echarts.baidu.com/build/dist'  
  6             echarts : basePath + '/libs/echarts'  
  7         }  
  8     });  
  9 
 10     // 使用  
 11     require(
 12         [   
 13           'echarts',   
 14           'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载  
 15         ], function(ec) {  
 16         // 基于准备好的dom,初始化echarts图表  
 17         var myChart = ec.init(document.getElementById('mapDiv'));  
 18         var ecConfig = require('echarts/config');  
 19         var zrEvent = require('zrender/tool/event');  
 20         option = {  
 21             title : {  
 22                 // 是否显示  
 23                 show: true,  
 24                 // 主标题文本,'\n'指定换行  
 25                 text: '位置分布',  
 26                 // 主标题文本超链接  
 27 //                link: 'http://www.baidu.com',  
 28                 // 指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)  
 29 //                target: 'self',  
 30                 // 副标题文本,'\n'指定换行  
 31 //                subtext: '纯属虚构',  
 32                 // 副标题文本超链接  
 33 //                sublink: 'http://www.baidu.com',  
 34                 // 指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)  
 35                 subtarget: 'self',  
 36                 // 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)  
 37                 x: 'center',  
 38                 // 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)  
 39                 y: 'top',  
 40                 // 水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center  
 41                 textAlign: 'center',  
 42                 // 标题背景颜色,默认透明  
 43 //                backgroundColor: 'rgba(0,0,0,0.1)',  
 44                 // 标题边框颜色  
 45 //                borderColor: '#66FF00',  
 46                 // 标题边框线宽,单位px,默认为0(无边框)  
 47 //                borderWidth: 0,  
 48                 // 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图  
 49 //                padding: [20,40,20,40],  
 50                 // 主副标题纵向间隔,单位px,默认为10  
 51 //                itemGap: 20,  
 52                 // 主标题文本样式  
 53                 /*textStyle: {  
 54                     // 颜色  
 55                     color: '#0066FF',  
 56                     // 水平对齐方式,可选为:'left' | 'right' | 'center'  
 57                     align: 'left',  
 58                     // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'  
 59                     baseline: 'bottom',  
 60                     // 字体系列  
 61                     fontFamily: 'Arial, 宋体, sans-serif',  
 62                     // 字号 ,单位px  
 63                     fontSize: 20,  
 64                     // 样式,可选为:'normal' | 'italic' | 'oblique'  
 65                     fontStyle: 'italic',  
 66                     // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900  
 67                     fontWeight: 'normal'  
 68                 },*/
 69                 // 副标题文本样式  
 70                 /*subtextStyle: {  
 71                     // 颜色  
 72                     color: '#FF7F50',  
 73                     // 水平对齐方式,可选为:'left' | 'right' | 'center'  
 74                     align: 'left',  
 75                     // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'  
 76                     baseline: 'bottom',  
 77                     // 字体系列  
 78                     fontFamily: 'Arial, 宋体, sans-serif',  
 79                     // 字号 ,单位px  
 80                     fontSize: 15,  
 81                     // 样式,可选为:'normal' | 'italic' | 'oblique'  
 82                     fontStyle: 'italic',  
 83                     // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900  
 84                     fontWeight: 'normal'  
 85                 }*/
 86             },  
 87             // 工具提示  
 88             /*tooltip : {
 89                 // 显示策略,可选为:true(显示) | false(隐藏)  
 90                 show: true,  
 91                 // tooltip主体内容显示策略,只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false  
 92                 showContent: true,  
 93                 // 触发类型,默认数据触发,见下图,可选为:'item' | 'axis'  
 94                 trigger: 'item',  
 95                 // 位置指定,传入{Array},如[x, y], 固定位置[x, y];传入{Function},如function([x, y]) {return [newX,newY]},默认显示坐标为输入参数,用户指定的新坐标为输出返回。  
 96                 // position: getTooltipPosition(0,0),  
 97                 // 内容格式器:{string}(Template) | {Function},支持异步回调  
 98                 formatter: function(data){ 
 99                     console.log(data); 
100                     return data[1]+":"+data[5].count; 
101                 }  
102                 // 拖拽重计算独有,数据孤岛内容格式器:{string}(Template) | {Function},见表格下方  
103                 // islandFormatter:  
104                 // 显示延迟,添加显示延迟可以避免频繁切换,特别是在详情内容需要异步获取的场景,单位ms  
105                 showDelay: 0,  
106                 // 隐藏延迟,单位ms  
107                 hideDelay: 0,  
108                 // 动画变换时长,单位s,如果你希望tooltip的跟随实时响应,showDelay设置为0是关键,同时transitionDuration设0也会有交互体验上的差别。  
109                 transitionDuration: 0,  
110                 // 鼠标是否可进入详情气泡中,默认为false,如需详情内交互,如添加链接,按钮,可设置为true。  
111                 //enterable: false,  
112                 // 提示背景颜色,默认为透明度为0.7的黑色  
113                 backgroundColor: 'rgba(0,0,0,0.5)',  
114                 // 提示边框颜色  
115                 borderColor: '#FF7F50',  
116                 // 提示边框圆角,单位px,默认为4  
117                 borderRadius: 10,  
118                 // 提示边框线宽,单位px,默认为0(无边框)  
119                 borderWidth: 2,  
120                 // 提示内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css  
121                 padding: [15,15,15,15],  
122                 // 坐标轴指示器  
123                 axisPointer:{ 
124                     // 默认type为line,可选为:'line' | 'cross' | 'shadow' | 'none'(无),指定type后对应style生效 
125                     type: 'line', 
126                     // lineStyle设置直线指示器 
127                     lineStyle: { 
128                         // 颜色 
129                         color:'#48b', 
130                         // 线条样式,可选为:'solid' | 'dotted' | 'dashed', 树图还可以选:'curve' | 'broken' 
131                         type:'solid', 
132                         // 线宽 
133                         width:10, 
134                         // 折线主线(IE8+)有效,阴影色彩,支持rgba 
135                         shadowColor:'rgba(0,0,0,0)', 
136                         // 折线主线(IE8+)有效,阴影模糊度,大于0有效 
137                         shadowBlur:5, 
138                         // 折线主线(IE8+)有效,阴影横向偏移,正值往右,负值往左 
139                         shadowOffsetX:3, 
140                         // 折线主线(IE8+)有效,阴影纵向偏移,正值往下,负值往上 
141                         shadowOffsetY:3 
142                     }, 
143                     // crossStyle设置十字准星指示器 
144                     crossStyle:{ 
145                         // 颜色 
146                         color:'#48b', 
147                         // 线条样式,可选为:'solid' | 'dotted' | 'dashed', 树图还可以选:'curve' | 'broken' 
148                         type:'solid', 
149                         // 线宽 
150                         width:10, 
151                         // 折线主线(IE8+)有效,阴影色彩,支持rgba 
152                         shadowColor:'rgba(0,0,0,0)', 
153                         // 折线主线(IE8+)有效,阴影模糊度,大于0有效 
154                         shadowBlur:5, 
155                         // 折线主线(IE8+)有效,阴影横向偏移,正值往右,负值往左 
156                         shadowOffsetX:3, 
157                         // 折线主线(IE8+)有效,阴影纵向偏移,正值往下,负值往上 
158                         shadowOffsetY:3 
159                     }, 
160                     // shadowStyle设置阴影指示器,areaStyle.size默认为'auto'自动计算,可指定具体宽度 
161                     shadowStyle:{ 
162                         // 颜色 
163                         color: 'rgba(150,150,150,0.3)', 
164                         width: 'auto', 
165                         // 填充样式,目前仅支持'default'(实填充) 
166                         type: 'default' 
167                     } 
168                 },  
169                 // 文本样式,默认为白色字体  
170                 textStyle:{  
171                     // 颜色  
172                     color: '#FF7F50',  
173                     // 水平对齐方式,可选为:'left' | 'right' | 'center'  
174                     align: 'left',  
175                     // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'  
176                     baseline: 'bottom',  
177                     // 字体系列  
178                     fontFamily: 'Arial, 宋体, sans-serif',  
179                     // 字号 ,单位px  
180                     fontSize: 20,  
181                     // 样式,可选为:'normal' | 'italic' | 'oblique'  
182                     fontStyle: 'italic',  
183                     // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900  
184                     fontWeight: 'normal'  
185                 }  
186             },*/  
187             /*legend: {  
188                 // 显示策略,可选为:true(显示) | false(隐藏)  
189                 show: true,  
190                 // 布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'  
191                 orient: 'vertical',  
192                 // 水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)  
193                 x: 'left',  
194                 // 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)  
195                 y: 'top',  
196                 // 图例背景颜色,默认透明  
197                 backgroundColor: 'rgba(0,0,0,0.1)',  
198                 // 图例边框颜色  
199                 borderColor: '#0066FF',  
200                 // 图例边框线宽,单位px,默认为0(无边框)  
201                 borderWidth: 1,  
202                 // 图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css  
203                 padding: [15,15,15,15],  
204                 // 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔  
205                 itemGap: 20,  
206                 // 图例图形宽度  
207                 itemWidth: 30,  
208                 // 图例图形高度  
209                 itemHeight: 20,  
210                 // 默认只设定了图例文字颜色,更个性化的是,要指定文字颜色跟随图例,可设color为'auto'  
211                 textStyle:{  
212                     // 颜色  
213                     color: '#FF7F50',  
214                     // 水平对齐方式,可选为:'left' | 'right' | 'center'  
215                     align: 'left',  
216                     // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'  
217                     baseline: 'bottom',  
218                     // 字体系列  
219                     fontFamily: 'Arial, 宋体, sans-serif',  
220                     // 字号 ,单位px  
221                     fontSize: 20,  
222                     // 样式,可选为:'normal' | 'italic' | 'oblique'  
223                     fontStyle: 'italic',  
224                     // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900  
225                     fontWeight: 'normal'  
226                 },  
227                 // 文本格式器:{string}(Template) | {Function},模板变量为'{name}',函数回调参数为name  
228                 formatter: function(data){ 
229                     console.log(data); 
230                     return data[1]+":"+data[5].count; 
231                 },  
232                 // 选择模式,默认开启图例开关,可选single,multiple  
233                 selectedMode: true,  
234                 // 配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入  
235                 selected: { 
236                     '降水量' : false 
237                 },  
238                 // 图例内容数组  
239                 data:[{name:'iphone3',textStyle:{Object},icon:{string}},  
240                       {name:'iphone4',textStyle:{Object},icon:{string}},  
241                       {name:'iphone5',textStyle:{Object},icon:{string}}]  
242             },*/  
243             // 值域选择,每个图表最多仅有一个值域控件  
244             /*dataRange: {  
245                 // 显示策略,可选为:true(显示) | false(隐藏)  
246                 show: true,  
247                 // 布局方式,默认为垂直布局,可选为:'horizontal' | 'vertical'  
248                 orient: 'horizontal',  
249                 // 水平安放位置,默认为全图左对齐,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)  
250                 x: 'left',  
251                 // 垂直安放位置,默认为全图底部,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)  
252                 y: 'bottom',  
253                 // 值域控件背景颜色,默认透明  
254                 backgroundColor: 'rgba(0,0,0,0.1)',  
255                 // 图例边框颜色  
256                 borderColor: '#0066FF',  
257                 // 图例边框线宽,单位px,默认为0(无边框)  
258                 borderWidth: 1,  
259                 // 图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css  
260                 padding: [15,15,15,15],  
261                 // 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔  
262                 itemGap: 20,  
263                 // 图例图形宽度  
264                 itemWidth: 30,  
265                 // 图例图形高度  
266                 itemHeight: 20,  
267                 // 指定的最小值,eg: 0,默认无,必须参数,唯有指定了splitList时可缺省min。  
268                 min: 0,  
269                 // 指定的最大值,eg: 100,默认无,必须参数,唯有指定了splitList时可缺省max  
270                 max: 2500,  
271                 // 小数精度,默认为0,无小数点,当 min ~ max 间在当前精度下无法整除splitNumber份时,精度会自动提高以满足均分,不支持不等划分  
272                 precision: 1,  
273                 // 分割段数,默认为5,为0时为线性渐变,calculable为true是默认均分100份  
274                 splitNumber: 10,  
275                 // 自定义分割方式,支持不等距分割。splitList被指定时,splitNumber将被忽略。  
276                 splitList: [ 
277                     {start: 1500}, 
278                     {start: 900, end: 1500}, 
279                     {start: 310, end: 1000}, 
280                     {start: 200, end: 300}, 
281                     {start: 10, end: 200, label: '10 到 200(自定义label)'}, 
282                     {start: 5, end: 5, label: '5(自定义特殊颜色)', color: 'black'}, 
283                     {end: 10} 
284                 ],  
285                 // 用于设置dataRange的初始选中范围。calculable为true时有效。  
286                 range: {start: 0, end: 100},  
287                 // 选择模式,默认开启值域开关,可选single,multiple  
288                 selectedMode: 'multiple',  
289                 // 是否启用值域漫游,启用后无视splitNumber和splitList,值域显示为线性渐变  
290                 calculable : true,  
291                 // 是否启用地图hover时的联动响应  
292                 hoverLink: true,  
293                 // 值域漫游是否实时显示,在不支持Canvas的浏览器中该值自动强制置为false  
294                 realtime:true,  
295                 // 值域颜色标识,颜色数组长度必须>=2,颜色代表从数值高到低的变化,即颜色数组低位代表数值高的颜色标识 ,支持Alpha通道上的变化(rgba)  
296                 color:['#e42515','#fad3d0'],  
297                 // 内容格式器:{string}(Template) | {Function},模板变量为'{value}'和'{value2}',代表数值起始值和结束值,函数参数两个,含义同模板变量,当calculable为true时模板变量仅有'{value}'  
298                 formatter : function(v, v2){ 
299                     if (v2 < 1000) { return '低于' + v2;} 
300                     else if (v > 1000) { return '高于' + v;} 
301                     else { return '中'; } 
302                 },  
303                 //  值域文字显示,splitNumber生效时默认以计算所得数值作为值域文字显示,可指定长度为2的文本数组显示简介的值域文本,如['高', '低'],'\n'指定换行  
304                 text:['高','低'],  
305                 // 默认只设定了值域控件文字颜色  
306                 textStyle:{  
307                     // 颜色  
308                     color: '#FF7F50',  
309                     // 水平对齐方式,可选为:'left' | 'right' | 'center'  
310                     align: 'left',  
311                     // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'  
312                     baseline: 'bottom',  
313                     // 字体系列  
314                     fontFamily: 'Arial, 宋体, sans-serif',  
315                     // 字号 ,单位px  
316                     fontSize: 20,  
317                     // 样式,可选为:'normal' | 'italic' | 'oblique'  
318                     fontStyle: 'italic',  
319                     // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900  
320                     fontWeight: 'normal'  
321                 }  
322             },*/  
323             // 工具箱,每个图表最多仅有一个工具箱  
324             /*toolbox: {
325                 // 显示策略,可选为:true(显示) | false(隐藏)  
326                 show: true,  
327                 // 布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'  
328                 orient : 'horizontal',  
329                 // 水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)  
330                 x: 'right',  
331                 // 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)  
332                 y: 'bottom',  
333                 // 工具箱背景颜色,默认透明  
334                 backgroundColor: 'rgba(218,112,214,0.6)',  
335                 // 工具箱边框颜色  
336                 borderColor: '#0066FF',  
337                 // 工具箱边框线宽,单位px,默认为0(无边框)  
338                 borderWidth: 1,  
339                 // 工具箱内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css  
340                 padding: [15,15,15,15],  
341                 // 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔  
342                 itemGap: 20,  
343                 // 工具箱icon大小,单位(px)  
344                 itemSize: 20,  
345                 // 工具箱icon颜色序列,循环使用,同时支持在具体feature内指定color  
346                 color:['#1e90ff','#22bb22','#4b0082','#d2691e'],  
347                 // 禁用颜色定义  
348                 disableColor:'#fff',  
349                 // 生效颜色定义  
350                 effectiveColor:'red',  
351                 // 是否显示工具箱文字提示,默认启用  
352                 showTitle:true,  
353                 // 工具箱提示文字样式  
354                 textStyle:{  
355                     // 颜色  
356                     color: '#FF7F50',  
357                     // 水平对齐方式,可选为:'left' | 'right' | 'center'  
358                     align: 'left',  
359                     // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'  
360                     baseline: 'bottom',  
361                     // 字体系列  
362                     fontFamily: 'Arial, 宋体, sans-serif',  
363                     // 字号 ,单位px  
364                     fontSize: 20,  
365                     // 样式,可选为:'normal' | 'italic' | 'oblique'  
366                     fontStyle: 'italic',  
367                     // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900  
368                     fontWeight: 'normal'  
369                 },  
370                 // 启用功能,目前支持feature见下,工具箱自定义功能回调处理  
371                 feature : {  
372                     // 辅助线标志,分别是启用,删除上一条,删除全部,可设置更多属性  
373                     mark : {  
374                         show : true,  
375                         title : {  
376                             mark : '辅助线开关',  
377                             markUndo : '删除辅助线',  
378                             markClear : '清空辅助线'  
379                         },  
380                         lineStyle : {  
381                             width : 2,  
382                             color : '#1e90ff',  
383                             type : 'dashed'  
384                         }  
385                     },  
386                     // 框选区域缩放,自动与存在的dataZoom控件同步,上图icon左数4/5,分别是启用,缩放后退  
387                     dataZoom : {  
388                         show : true,  
389                         title : {  
390                             dataZoom : '区域缩放',  
391                             dataZoomReset : '区域缩放后退'  
392                         }  
393                     },  
394                     // 数据视图,上图icon左数6,打开数据视图,可设置更多属性  
395                     dataView : {  
396                         show : true,  
397                         title : '数据视图',  
398                         readOnly: false,  
399                         lang: ['数据视图', '关闭', '刷新']  
400                     },  
401                     // 动态类型切换,支持直角系下的折线图、柱状图、堆积、平铺转换,上图icon左数6~14,分别是切换为堆积,切换为平铺,切换折线图,切换柱形图,切换为力导向布局图,切换为和弦图,切换为饼图,切换为漏斗图  
402                     magicType: {  
403                         show : true,  
404                         title : {  
405                             line : '折线图切换',  
406                             bar : '柱形图切换',  
407                             stack : '堆积',  
408                             tiled : '平铺',  
409                             force: '力导向布局图切换',  
410                             chord: '和弦图切换',  
411                             pie: '饼图切换',  
412                             funnel: '漏斗图切换'  
413                         },  
414                         option: {  
415                             // line: {...},  
416                             // bar: {...},  
417                             // stack: {...},  
418                             // tiled: {...},  
419                             // force: {...},  
420                             // chord: {...},  
421                             // pie: {...},  
422                             // funnel: {...}  
423                         },  
424                         type : []  
425                     },  
426                     // 还原,复位原始图表  
427                     restore : {  
428                         show : true,  
429                         title : '还原'  
430                     },  
431                     // 保存图片(IE8-不支持),可设置更多属性  
432                     saveAsImage : {  
433                         show : true,  
434                         title : '保存为图片',  
435                         type : 'png',  
436                         lang : ['点击保存']  
437                     }  
438                 }  
439             },*/
440             // 缩放漫游组件,仅对地图有效  
441             /*roamController: {  
442                 // 显示策略,可选为:true(显示) | false(隐藏)  
443                 show: true,  
444                 // 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)  
445                 x: 'right',  
446                 // 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)  
447                 y: 'top',  
448                 // 指定宽度,决定4向漫游圆盘大小,可指定 {number}(宽度,单位px)  
449                 width: 120,  
450                 // 指定高度,缩放控制键默认会在指定高度的最下方最大化显示,可指定 {number}(高度,单位px)  
451                 height:200,  
452                 // 缩放漫游组件背景颜色,默认透明  
453                 backgroundColor:'rgba(0,0,0,0.1)',  
454                 // 缩放漫游组件边框颜色  
455                 borderColor: '#1e90ff',  
456                 // 缩放漫游组件边框线宽,单位px,默认为0(无边框)  
457                 borderWidth: 1,  
458                 // 缩放漫游组件内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css  
459                 padding: [15,15,15,15],  
460                 // 漫游组件文字填充颜色  
461                 fillerColor:'#000',  
462                 // 控制手柄主体颜色  
463                 handleColor:'#e3655a',  
464                 // 4向漫游移动步伐,单位px  
465                 step:10,  
466                 // 必须,指定漫游组件可控地图类型  
467                 mapTypeControl: {  
468                     'china': true  
469                 }  
470             },*/
471             series : [  
472                 {  
473                     // 图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。可选为:   
474                     // 'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图)   
475                     // 'pie'(饼图) | 'radar'(雷达图) | 'chord'(和弦图) | 'force'(力导向布局图) | 'map'(地图)  
476                     type: 'map',  
477                     // 系列名称  
478 //                    name: 'iphone3',  
479                     // 地图类型,支持world,china及全国34个省市自治区  
480 //                    mapType: '安徽',
481                     mapType: '安徽',
482                     // 是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游)  
483                     roam: true,  
484                     // 图形样式  
485                     itemStyle:{  
486                         // 默认状态下地图的文字  
487                         normal:{
488                             label:{show:true},
489                             borderWidth:1,  //省份的边框宽度
490                             borderColor:'#f60', //省份的边框颜色
491                             color:'#ece2df',    //地图背景颜色
492                             areaStyle:{color:'#f60'}//设置地图颜色
493                         },  
494                         // 鼠标放到地图上面显示文字  
495                         emphasis:{label:{show:true}}  
496                     },
497                     data:[
498                         {name: '阜阳市',value: Math.round(Math.random()*1000)},
499                         {name: '亳州市',value: Math.round(Math.random()*1000)},
500                         {name: '淮北市',value: Math.round(Math.random()*1000)},
501                         {name: '宿州市',value: Math.round(Math.random()*1000)},  
502                         {name: '淮南市',value: Math.round(Math.random()*1000)},  
503                         {name: '蚌埠市',value: Math.round(Math.random()*1000)},  
504                         {name: '六安市',value: Math.round(Math.random()*1000)},
505                         {name: '合肥市',value: Math.round(Math.random()*1000)},  
506                         {name: '滁州市',value: Math.round(Math.random()*1000)},  
507                         {name: '安庆市',value: Math.round(Math.random()*1000)}, 
508 //                        {name: '巢湖市',value: Math.round(Math.random()*1000)},  
509                         {name: '马鞍山市',value: Math.round(Math.random()*1000)},  
510                         {name: '池州市',value: Math.round(Math.random()*1000)},  
511                         {name: '铜陵市',value: Math.round(Math.random()*1000)},  
512                         {name: '芜湖市',value: Math.round(Math.random()*1000)},  
513                         {name: '黄山市',value: Math.round(Math.random()*1000)},  
514                         {name: '宣城市',value: Math.round(Math.random()*1000)}
515                     ],
516                     dataRange: {
517                         x: '-1000px',   //图例横轴位置
518                         y: '-1000px',   //图例纵轴位置
519                         splitList: [
520                             {start:1, end:1, label: '阜阳市', color: '#cfc5de'}
521                         ]
522                     },
523                     markPoint: {
524 //                      large: true,//这个选项,悬浮自动失效
525                         symbolSize: 3,
526                         itemStyle: {
527                             normal: {
528                                 borderColor: '#87cefa',
529                                 shadowBlur: 2,
530                                 borderWidth: 1,     // 标注边线线宽,单位px,默认为1
531                                 label: {
532                                     show: true
533                                 },
534                                 shadowColor: 'rgba(37, 140, 249, 0.8)',
535                                 color: 'rgba(37, 180, 249, 0.8)'
536                             },
537                             emphasis: {
538                                 borderColor: '#1e90ff',
539                                 borderWidth: 5,
540                                 label: {
541                                     show: true
542                                 }
543                             }
544                         },
545                         effect : {
546                             show: true,
547                             shadowBlur : 0
548                         },
549                         data: [
550                                {name: "怀宁县经济开发区", value: ""},
551                                {name: "桐城市经济技术开发区", value: ""}, 
552                                {name: "桐城市双新经济开发区", value: ""}
553                         ]
554                     },
555                     geoCoord: {
556                         "怀宁县经济开发区": [116.5517,30.7255],
557                         "桐城市经济技术开发区": [116.8517,30.5655],
558                         "桐城市双新经济开发区": [116.4517,30.6255]
559                     }
560                 }
561             ]
562         };  
563 
564         myChart.setOption(option);  
565     });
566 
567 })

 

posted @ 2020-05-15 16:59  苦行者的刀  阅读(556)  评论(0)    收藏  举报