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脚本中编写代码

$(function() {

   // 路径配置
   require.config({
       paths : {
           // echarts: \'http://echarts.baidu.com/build/dist\'
           echarts : \'./plugins/echarts-2.2.7/doc/example/www/js\'
       }
   });

   // 使用
   require(
       [
          \'echarts\',
          \'echarts/chart/map\' // 使用柱状图就加载bar模块，按需加载
       ], function(ec) {
       // 基于准备好的dom，初始化echarts图表
       var myChart = ec.init(document.getElementById(\'main\'));
       var ecConfig = require(\'echarts/config\');
       var zrEvent = require(\'zrender/tool/event\');
       option = {
            title : {
               // 是否显示
               show: true,
               // 主标题文本，\'\n\'指定换行
                text: \'iphone销量\',
                // 主标题文本超链接
                link: \'http://www.baidu.com\',
                // 指定窗口打开主标题超链接，支持\'self\' | \'blank\'，不指定等同为\'blank\'（新窗口）
                target: \'self\',
                // 副标题文本，\'\n\'指定换行
                subtext: \'纯属虚构\',
                // 副标题文本超链接
                sublink: \'http://www.baidu.com\',
                // 指定窗口打开副标题超链接，支持\'self\' | \'blank\'，不指定等同为\'blank\'（新窗口）
                subtarget: \'self\',
                // 水平安放位置，默认为左侧，可选为：\'center\' | \'left\' | \'right\' | {number}（x坐标，单位px）
                x: \'center\',
                // 垂直安放位置，默认为全图顶端，可选为：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，单位px）
                y: \'top\',
                // 水平对齐方式，默认根据x设置自动调整，可选为： left\' | \'right\' | \'center
                textAlign: \'center\',
                // 标题背景颜色，默认透明
                backgroundColor: \'rgba(0,0,0,0.1)\',
                // 标题边框颜色
                borderColor: \'#66FF00\',
                // 标题边框线宽，单位px，默认为0（无边框）
                borderWidth: 1,
                // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图
                padding: [20,40,20,40],
                // 主副标题纵向间隔，单位px，默认为10
                itemGap: 20,
                // 主标题文本样式
                textStyle: {
                   // 颜色
                   color: \'#0066FF\',
                   // 水平对齐方式，可选为：\'left\' | \'right\' | \'center\'
                   align: \'left\',
                   // 垂直对齐方式，可选为：\'top\' | \'bottom\' | \'middle\'
                   baseline: \'bottom\',
                   // 字体系列
                   fontFamily: \'Arial, 宋体, sans-serif\',
                   // 字号，单位px
                   fontSize: 20,
                   // 样式，可选为：\'normal\' | \'italic\' | \'oblique\'
                   fontStyle: \'italic\',
                   // 粗细，可选为：\'normal\' | \'bold\' | \'bolder\' | \'lighter\' | 100 | 200 |... | 900
                   fontWeight: \'normal\'
                },
                // 副标题文本样式
                subtextStyle: {
                   // 颜色
                   color: \'#FF7F50\',
                   // 水平对齐方式，可选为：\'left\' | \'right\' | \'center\'
                   align: \'left\',
                   // 垂直对齐方式，可选为：\'top\' | \'bottom\' | \'middle\'
                   baseline: \'bottom\',
                   // 字体系列
                   fontFamily: \'Arial, 宋体, sans-serif\',
                   // 字号，单位px
                   fontSize: 15,
                   // 样式，可选为：\'normal\' | \'italic\' | \'oblique\'
                   fontStyle: \'italic\',
                   // 粗细，可选为：\'normal\' | \'bold\' | \'bolder\' | \'lighter\' | 100 | 200 |... | 900
                   fontWeight: \'normal\'
                }
            },
            // 工具提示
            tooltip : {
               // 显示策略，可选为：true（显示） | false（隐藏）
               show: true,
               // tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
               showContent: true,
               // 触发类型，默认数据触发，见下图，可选为：\'item\' | \'axis\'
                trigger: \'item\',
                // 位置指定，传入{Array}，如[x, y]，固定位置[x, y]；传入{Function}，如function([x, y]) {return [newX,newY]}，默认显示坐标为输入参数，用户指定的新坐标为输出返回。
                // position: getTooltipPosition(0,0),
                // 内容格式器：{string}（Template） | {Function}，支持异步回调
                /*formatter: function(data){
                    console.log(data);
                    return data[1]+"："+data[5].count;
                }*/
                // 拖拽重计算独有，数据孤岛内容格式器：{string}（Template） | {Function}，见表格下方
                // islandFormatter:
                // 显示延迟，添加显示延迟可以避免频繁切换，特别是在详情内容需要异步获取的场景，单位ms
                showDelay: 0,
                // 隐藏延迟，单位ms
                hideDelay: 0,
                // 动画变换时长，单位s，如果你希望tooltip的跟随实时响应，showDelay设置为0是关键，同时transitionDuration设0也会有交互体验上的差别。
                transitionDuration: 0,
                // 鼠标是否可进入详情气泡中，默认为false，如需详情内交互，如添加链接，按钮，可设置为true。
                //enterable: false,
                // 提示背景颜色，默认为透明度为0.7的黑色
                backgroundColor: \'rgba(0,0,0,0.5)\',
                // 提示边框颜色
                borderColor: \'#FF7F50\',
                // 提示边框圆角，单位px，默认为4
                borderRadius: 10,
                // 提示边框线宽，单位px，默认为0（无边框）
                borderWidth: 2,
                // 提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
                padding: [15,15,15,15],
                // 坐标轴指示器
                /*axisPointer:{
                   // 默认type为line，可选为：\'line\' | \'cross\' | \'shadow\' | \'none\'(无)，指定type后对应style生效
                   type: \'line\',
                   // lineStyle设置直线指示器
                   lineStyle: {
                       // 颜色
                       color:\'#48b\',
                       // 线条样式，可选为：\'solid\' | \'dotted\' | \'dashed\'，树图还可以选：\'curve\' | \'broken\'
                       type:\'solid\',
                       // 线宽
                       width:10,
                       // 折线主线(IE8+)有效，阴影色彩，支持rgba
                       shadowColor:\'rgba(0,0,0,0)\',
                       // 折线主线(IE8+)有效，阴影模糊度，大于0有效
                       shadowBlur:5,
                       // 折线主线(IE8+)有效，阴影横向偏移，正值往右，负值往左
                       shadowOffsetX:3,
                       // 折线主线(IE8+)有效，阴影纵向偏移，正值往下，负值往上
                       shadowOffsetY:3
                    },
                    // crossStyle设置十字准星指示器
                    crossStyle:{
                       // 颜色
                       color:\'#48b\',
                       // 线条样式，可选为：\'solid\' | \'dotted\' | \'dashed\'，树图还可以选：\'curve\' | \'broken\'
                       type:\'solid\',
                       // 线宽
                       width:10,
                       // 折线主线(IE8+)有效，阴影色彩，支持rgba
                       shadowColor:\'rgba(0,0,0,0)\',
                       // 折线主线(IE8+)有效，阴影模糊度，大于0有效
                       shadowBlur:5,
                       // 折线主线(IE8+)有效，阴影横向偏移，正值往右，负值往左
                       shadowOffsetX:3,
                       // 折线主线(IE8+)有效，阴影纵向偏移，正值往下，负值往上
                       shadowOffsetY:3
                    },
                    // shadowStyle设置阴影指示器，areaStyle.size默认为\'auto\'自动计算，可指定具体宽度
                    shadowStyle:{
                       // 颜色
                       color: \'rgba(150,150,150,0.3)\',
                        width: \'auto\',
                        // 填充样式，目前仅支持\'default\'(实填充)
                        type: \'default\'
                    }
                },*/
                // 文本样式，默认为白色字体
                textStyle:{
                   // 颜色
                   color: \'#FF7F50\',
                   // 水平对齐方式，可选为：\'left\' | \'right\' | \'center\'
                   align: \'left\',
                   // 垂直对齐方式，可选为：\'top\' | \'bottom\' | \'middle\'
                   baseline: \'bottom\',
                   // 字体系列
                   fontFamily: \'Arial, 宋体, sans-serif\',
                   // 字号，单位px
                   fontSize: 20,
                   // 样式，可选为：\'normal\' | \'italic\' | \'oblique\'
                   fontStyle: \'italic\',
                   // 粗细，可选为：\'normal\' | \'bold\' | \'bolder\' | \'lighter\' | 100 | 200 |... | 900
                   fontWeight: \'normal\'
                }
            },
            legend: {
               // 显示策略，可选为：true（显示） | false（隐藏）
               show: true,
               // 布局方式，默认为水平布局，可选为：\'horizontal\' | \'vertical\'
                orient: \'vertical\',
                // 水平安放位置，默认为全图居中，可选为：\'center\' | \'left\' | \'right\' | {number}（x坐标，单位px）
                x: \'left\',
                // 垂直安放位置，默认为全图顶端，可选为：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，单位px）
                y: \'top\',
                // 图例背景颜色，默认透明
                backgroundColor: \'rgba(0,0,0,0.1)\',
                // 图例边框颜色
                borderColor: \'#0066FF\',
                // 图例边框线宽，单位px，默认为0（无边框）
                borderWidth: 1,
                // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
                padding: [15,15,15,15],
                // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                itemGap: 20,
                // 图例图形宽度
                itemWidth: 30,
                // 图例图形高度
                itemHeight: 20,
                // 默认只设定了图例文字颜色,更个性化的是，要指定文字颜色跟随图例,可设color为\'auto\'
                textStyle:{
                   // 颜色
                   color: \'#FF7F50\',
                   // 水平对齐方式，可选为：\'left\' | \'right\' | \'center\'
                   align: \'left\',
                   // 垂直对齐方式，可选为：\'top\' | \'bottom\' | \'middle\'
                   baseline: \'bottom\',
                   // 字体系列
                   fontFamily: \'Arial, 宋体, sans-serif\',
                   // 字号，单位px
                   fontSize: 20,
                   // 样式，可选为：\'normal\' | \'italic\' | \'oblique\'
                   fontStyle: \'italic\',
                   // 粗细，可选为：\'normal\' | \'bold\' | \'bolder\' | \'lighter\' | 100 | 200 |... | 900
                   fontWeight: \'normal\'
                },
                // 文本格式器：{string}（Template） | {Function}，模板变量为\'{name}\'，函数回调参数为name
                /*formatter: function(data){
                   console.log(data);
                   return data[1]+"："+data[5].count;
               },*/
                // 选择模式，默认开启图例开关，可选single，multiple
                selectedMode: true,
                // 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入
                /*selected: {
                    \'降水量\' : false
                },*/
                // 图例内容数组
                data:[{name:\'iphone3\'/*,textStyle:{Object},icon:{string}*/},
                      {name:\'iphone4\'/*,textStyle:{Object},icon:{string}*/},
                      {name:\'iphone5\'/*,textStyle:{Object},icon:{string}*/}]
            },
            // 值域选择，每个图表最多仅有一个值域控件
            dataRange: {
               // 显示策略，可选为：true（显示） | false（隐藏）
               show: true,
               // 布局方式，默认为垂直布局，可选为：\'horizontal\' | \'vertical\'
               orient: \'horizontal\',
               // 水平安放位置，默认为全图左对齐，可选为：\'center\' | \'left\' | \'right\' | {number}（x坐标，单位px）
               x: \'left\',
               // 垂直安放位置，默认为全图底部，可选为：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，单位px）
               y: \'bottom\',
               // 值域控件背景颜色，默认透明
               backgroundColor: \'rgba(0,0,0,0.1)\',
               // 图例边框颜色
                borderColor: \'#0066FF\',
                // 图例边框线宽，单位px，默认为0（无边框）
                borderWidth: 1,
                // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
                padding: [15,15,15,15],
                // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                itemGap: 20,
                // 图例图形宽度
                itemWidth: 30,
                // 图例图形高度
                itemHeight: 20,
                // 指定的最小值，eg: 0，默认无，必须参数，唯有指定了splitList时可缺省min。
                min: 0,
                // 指定的最大值，eg: 100，默认无，必须参数，唯有指定了splitList时可缺省max
                max: 2500,
                // 小数精度，默认为0，无小数点，当 min ~ max 间在当前精度下无法整除splitNumber份时，精度会自动提高以满足均分，不支持不等划分
                precision: 1,
                // 分割段数，默认为5，为0时为线性渐变，calculable为true是默认均分100份
                splitNumber: 10,
                // 自定义分割方式，支持不等距分割。splitList被指定时，splitNumber将被忽略。
                /*splitList: [
                    {start: 1500},
                    {start: 900, end: 1500},
                    {start: 310, end: 1000},
                    {start: 200, end: 300},
                    {start: 10, end: 200, label: \'10 到 200（自定义label）\'},
                    {start: 5, end: 5, label: \'5（自定义特殊颜色）\', color: \'black\'},
                    {end: 10}
                ],*/
                // 用于设置dataRange的初始选中范围。calculable为true时有效。
                range: {start: 0, end: 100},
                // 选择模式，默认开启值域开关，可选single，multiple
                selectedMode: \'multiple\',
                // 是否启用值域漫游，启用后无视splitNumber和splitList，值域显示为线性渐变
                calculable : true,
                // 是否启用地图hover时的联动响应
                hoverLink: true,
                // 值域漫游是否实时显示，在不支持Canvas的浏览器中该值自动强制置为false
                realtime:true,
                // 值域颜色标识，颜色数组长度必须>=2，颜色代表从数值高到低的变化，即颜色数组低位代表数值高的颜色标识，支持Alpha通道上的变化（rgba）
                color:[\'#e42515\',\'#fad3d0\'],
                // 内容格式器：{string}（Template） | {Function}，模板变量为\'{value}\'和\'{value2}\'，代表数值起始值和结束值，函数参数两个，含义同模板变量，当calculable为true时模板变量仅有\'{value}\'
                /*formatter : function(v, v2){
                    if (v2 < 1000) { return \'低于\' + v2;}
                    else if (v > 1000) { return \'高于\' + v;}
                    else { return \'中\'; }
                },*/
                //    值域文字显示，splitNumber生效时默认以计算所得数值作为值域文字显示，可指定长度为2的文本数组显示简介的值域文本，如[\'高\', \'低\']，\'\n\'指定换行
                text:[\'高\',\'低\'],
                // 默认只设定了值域控件文字颜色
                textStyle:{
                   // 颜色
                   color: \'#FF7F50\',
                   // 水平对齐方式，可选为：\'left\' | \'right\' | \'center\'
                   align: \'left\',
                   // 垂直对齐方式，可选为：\'top\' | \'bottom\' | \'middle\'
                   baseline: \'bottom\',
                   // 字体系列
                   fontFamily: \'Arial, 宋体, sans-serif\',
                   // 字号，单位px
                   fontSize: 20,
                   // 样式，可选为：\'normal\' | \'italic\' | \'oblique\'
                   fontStyle: \'italic\',
                   // 粗细，可选为：\'normal\' | \'bold\' | \'bolder\' | \'lighter\' | 100 | 200 |... | 900
                   fontWeight: \'normal\'
                }
            },
            // 工具箱，每个图表最多仅有一个工具箱
            toolbox: {
               // 显示策略，可选为：true（显示） | false（隐藏）
                show: true,
                // 布局方式，默认为水平布局，可选为：\'horizontal\' | \'vertical\'
                orient : \'horizontal\',
                // 水平安放位置，默认为全图居中，可选为：\'center\' | \'left\' | \'right\' | {number}（x坐标，单位px）
                x: \'right\',
                // 垂直安放位置，默认为全图顶端，可选为：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，单位px）
                y: \'bottom\',
                // 工具箱背景颜色，默认透明
                backgroundColor: \'rgba(218,112,214,0.6)\',
                // 工具箱边框颜色
                borderColor: \'#0066FF\',
                // 工具箱边框线宽，单位px，默认为0（无边框）
                borderWidth: 1,
                // 工具箱内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
                padding: [15,15,15,15],
                // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                itemGap: 20,
                // 工具箱icon大小，单位（px）
                itemSize: 20,
                // 工具箱icon颜色序列，循环使用，同时支持在具体feature内指定color
                color:[\'#1e90ff\',\'#22bb22\',\'#4b0082\',\'#d2691e\'],
                // 禁用颜色定义
                disableColor:\'#fff\',
                // 生效颜色定义
                effectiveColor:\'red\',
                // 是否显示工具箱文字提示，默认启用
                showTitle:true,
                // 工具箱提示文字样式
                textStyle:{
                   // 颜色
                   color: \'#FF7F50\',
                   // 水平对齐方式，可选为：\'left\' | \'right\' | \'center\'
                   align: \'left\',
                   // 垂直对齐方式，可选为：\'top\' | \'bottom\' | \'middle\'
                   baseline: \'bottom\',
                   // 字体系列
                   fontFamily: \'Arial, 宋体, sans-serif\',
                   // 字号，单位px
                   fontSize: 20,
                   // 样式，可选为：\'normal\' | \'italic\' | \'oblique\'
                   fontStyle: \'italic\',
                   // 粗细，可选为：\'normal\' | \'bold\' | \'bolder\' | \'lighter\' | 100 | 200 |... | 900
                   fontWeight: \'normal\'
                },
                // 启用功能，目前支持feature见下，工具箱自定义功能回调处理
                feature : {
                   // 辅助线标志,分别是启用，删除上一条，删除全部,可设置更多属性
                    mark : {
                        show : true,
                        title : {
                            mark : \'辅助线开关\',
                            markUndo : \'删除辅助线\',
                            markClear : \'清空辅助线\'
                        },
                        lineStyle : {
                            width : 2,
                            color : \'#1e90ff\',
                            type : \'dashed\'
                        }
                    },
                    // 框选区域缩放，自动与存在的dataZoom控件同步，上图icon左数4/5，分别是启用，缩放后退
                    dataZoom : {
                        show : true,
                        title : {
                            dataZoom : \'区域缩放\',
                            dataZoomReset : \'区域缩放后退\'
                        }
                    },
                    // 数据视图，上图icon左数6，打开数据视图，可设置更多属性
                    dataView : {
                        show : true,
                        title : \'数据视图\',
                        readOnly: false,
                        lang: [\'数据视图\', \'关闭\', \'刷新\']
                    },
                    // 动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换，上图icon左数6~14，分别是切换为堆积，切换为平铺，切换折线图，切换柱形图，切换为力导向布局图，切换为和弦图，切换为饼图，切换为漏斗图
                    magicType: {
                        show : true,
                        title : {
                            line : \'折线图切换\',
                            bar : \'柱形图切换\',
                            stack : \'堆积\',
                            tiled : \'平铺\',
                            force: \'力导向布局图切换\',
                            chord: \'和弦图切换\',
                            pie: \'饼图切换\',
                            funnel: \'漏斗图切换\'
                        },
                        option: {
                            // line: {...},
                            // bar: {...},
                            // stack: {...},
                            // tiled: {...},
                            // force: {...},
                            // chord: {...},
                            // pie: {...},
                            // funnel: {...}
                        },
                        type : []
                    },
                    // 还原，复位原始图表
                    restore : {
                        show : true,
                        title : \'还原\'
                    },
                    // 保存图片（IE8-不支持），可设置更多属性
                    saveAsImage : {
                        show : true,
                        title : \'保存为图片\',
                        type : \'png\',
                        lang : [\'点击保存\']
                    }
                }
            },
            // 缩放漫游组件，仅对地图有效
            roamController: {
               // 显示策略，可选为：true（显示） | false（隐藏）
                show: true,
                // 水平安放位置，默认为左侧，可选为：\'center\' | \'left\' | \'right\' | {number}（x坐标，单位px）
                x: \'right\',
                // 垂直安放位置，默认为全图顶端，可选为：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，单位px）
                y: \'top\',
                // 指定宽度，决定4向漫游圆盘大小，可指定 {number}（宽度，单位px）
                width: 120,
                // 指定高度，缩放控制键默认会在指定高度的最下方最大化显示，可指定 {number}（高度，单位px）
                height:200,
                // 缩放漫游组件背景颜色，默认透明
                backgroundColor:\'rgba(0,0,0,0.1)\',
                // 缩放漫游组件边框颜色
                borderColor: \'#1e90ff\',
                // 缩放漫游组件边框线宽，单位px，默认为0（无边框）
                borderWidth: 1,
                // 缩放漫游组件内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
                padding: [15,15,15,15],
                // 漫游组件文字填充颜色
                fillerColor:\'#000\',
                // 控制手柄主体颜色
                handleColor:\'#e3655a\',
                // 4向漫游移动步伐，单位px
                step:10,
                // 必须，指定漫游组件可控地图类型
                mapTypeControl: {
                    \'china\': true
                }
            },
            series : [
                {
                   // 图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。可选为：
                   // \'line\'（折线图） | \'bar\'（柱状图） | \'scatter\'（散点图） | \'k\'（K线图）
                   // \'pie\'（饼图） | \'radar\'（雷达图） | \'chord\'（和弦图） | \'force\'（力导向布局图） | \'map\'（地图）
                   type: \'map\',
                   // 系列名称
                   name: \'iphone3\',
                   // 地图类型，支持world，china及全国34个省市自治区
                   mapType: \'china\',
                   // 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），\'scale\'（仅开启滚轮缩放），\'move\'（仅开启拖拽漫游）
                    roam: false,
                    // 图形样式
                    itemStyle:{
                       // 默认状态下地图的文字
                        normal:{label:{show:true}},
                        // 鼠标放到地图上面显示文字
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: \'北京\',value: Math.round(Math.random()*1000)},
                        {name: \'天津\',value: Math.round(Math.random()*1000)},
                        {name: \'上海\',value: Math.round(Math.random()*1000)},
                        {name: \'重庆\',value: Math.round(Math.random()*1000)},
                        {name: \'河北\',value: Math.round(Math.random()*1000)},
                        {name: \'河南\',value: Math.round(Math.random()*1000)},
                        {name: \'云南\',value: Math.round(Math.random()*1000)},
                        {name: \'辽宁\',value: Math.round(Math.random()*1000)},
                        {name: \'黑龙江\',value: Math.round(Math.random()*1000)},
                        {name: \'湖南\',value: Math.round(Math.random()*1000)},
                        {name: \'安徽\',value: Math.round(Math.random()*1000)},
                        {name: \'山东\',value: Math.round(Math.random()*1000)},
                        {name: \'新疆\',value: Math.round(Math.random()*1000)},
                        {name: \'江苏\',value: Math.round(Math.random()*1000)},
                        {name: \'浙江\',value: Math.round(Math.random()*1000)},
                        {name: \'江西\',value: Math.round(Math.random()*1000)},
                        {name: \'湖北\',value: Math.round(Math.random()*1000)},
                        {name: \'广西\',value: Math.round(Math.random()*1000)},
                        {name: \'甘肃\',value: Math.round(Math.random()*1000)},
                        {name: \'山西\',value: Math.round(Math.random()*1000)},
                        {name: \'内蒙古\',value: Math.round(Math.random()*1000)},
                        {name: \'陕西\',value: Math.round(Math.random()*1000)},
                        {name: \'吉林\',value: Math.round(Math.random()*1000)},
                        {name: \'福建\',value: Math.round(Math.random()*1000)},
                        {name: \'贵州\',value: Math.round(Math.random()*1000)},
                        {name: \'广东\',value: Math.round(Math.random()*1000)},
                        {name: \'青海\',value: Math.round(Math.random()*1000)},
                        {name: \'西藏\',value: Math.round(Math.random()*1000)},
                        {name: \'四川\',value: Math.round(Math.random()*1000)},
                        {name: \'宁夏\',value: Math.round(Math.random()*1000)},
                        {name: \'海南\',value: Math.round(Math.random()*1000)},
                        {name: \'台湾\',value: Math.round(Math.random()*1000)},
                        {name: \'香港\',value: Math.round(Math.random()*1000)},
                        {name: \'澳门\',value: Math.round(Math.random()*1000)}
                    ]
                },
                {
                    name: \'iphone4\',
                    type: \'map\',
                    mapType: \'china\',
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: \'北京\',value: Math.round(Math.random()*1000)},
                        {name: \'天津\',value: Math.round(Math.random()*1000)},
                        {name: \'上海\',value: Math.round(Math.random()*1000)},
                        {name: \'重庆\',value: Math.round(Math.random()*1000)},
                        {name: \'河北\',value: Math.round(Math.random()*1000)},
                        {name: \'安徽\',value: Math.round(Math.random()*1000)},
                        {name: \'新疆\',value: Math.round(Math.random()*1000)},
                        {name: \'浙江\',value: Math.round(Math.random()*1000)},
                        {name: \'江西\',value: Math.round(Math.random()*1000)},
                        {name: \'山西\',value: Math.round(Math.random()*1000)},
                        {name: \'内蒙古\',value: Math.round(Math.random()*1000)},
                        {name: \'吉林\',value: Math.round(Math.random()*1000)},
                        {name: \'福建\',value: Math.round(Math.random()*1000)},
                        {name: \'广东\',value: Math.round(Math.random()*1000)},
                        {name: \'西藏\',value: Math.round(Math.random()*1000)},
                        {name: \'四川\',value: Math.round(Math.random()*1000)},
                        {name: \'宁夏\',value: Math.round(Math.random()*1000)},
                        {name: \'香港\',value: Math.round(Math.random()*1000)},
                        {name: \'澳门\',value: Math.round(Math.random()*1000)}
                    ]
                },
                {
                    name: \'iphone5\',
                    type: \'map\',
                    mapType: \'china\',
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: \'北京\',value: Math.round(Math.random()*1000)},
                        {name: \'天津\',value: Math.round(Math.random()*1000)},
                        {name: \'上海\',value: Math.round(Math.random()*1000)},
                        {name: \'广东\',value: Math.round(Math.random()*1000)},
                        {name: \'台湾\',value: Math.round(Math.random()*1000)},
                        {name: \'香港\',value: Math.round(Math.random()*1000)},
                        {name: \'澳门\',value: Math.round(Math.random()*1000)}
                    ]
                }
            ]
       };

       myChart.setOption(option);
   });
});