云醉月未眠

导航

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.最终结果

posted on 2018-08-01 09:48  别皱眉  阅读(476)  评论(0编辑  收藏  举报