t0404
  1. <body>
  2. <div class="charts-map-bx">
  3. <div id="charts-map-flow"></div>
  4. </div>
  5. </body> 

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

  569. };  
  570. </script>

分类:

技术点:

相关文章: