Echarts地图编写

1.引入echarts库文件

 

<script charset="utf-8" type="text/javascript" language="javascript" src="echarts-2.2.7/doc/example/www/js/echarts.js"></script>

 

2.在页面中新建div用于地图展示

 

<div id="main" style="height: 450px;width: 100%;"></div>

 

3.在页面中引入js文件

 

<script charset="utf-8" type="text/javascript" language="javascript" src="xxx.js"></script>

4.在js脚本中编写代码

 

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

 

5.最终结果