关闭

ECharts地图详解

359人阅读 评论(0) 收藏 举报
分类:
  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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:164451次
    • 积分:2070
    • 等级:
    • 排名:第19357名
    • 原创:58篇
    • 转载:91篇
    • 译文:1篇
    • 评论:25条
    最新评论