（小航哥自己实现的）为了事先地图效果，需要以下准备：

用百度地图作为地图，需要

1、bmap.min.js（下载地址https://github.com/ecomfe/echarts ，GitHub上echarts源代码中路径为 dist/extension/bmap.min.js）

2、百度的ak（自己申请，申请网址http://lbsyun.baidu.com/apiconsole/key?application=key）3、echarts 使用的版本是3.8.4 (下载地址 http://echarts.baidu.com/download.html)

我实现的效果：

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <style type="text/css">
  5.             body {
  6.                 margin: 0;
  7.             }
  8.             #main {
  9.                 height: 100%;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div id="main"></div>
  15.         <script src="http://api.map.baidu.com/api?v=2.0&ak=****"></script>
  16.         <script src="./echarts.js"></script>
  17.         <script src="./bmap.min.js"></script>  
  18.  
  19.     </body>
  20.  
  21. 	<script>
  22. var myChart = echarts.init(document.getElementById('main'));
  23.  
  24. var data = [
  25.     {name: '海门', value: 9},
  26.     {name: '鄂尔多斯', value: 12},
  27.     {name: '招远', value: 12},
  28.     {name: '舟山', value: 12},
  29.     {name: '齐齐哈尔', value: 14},
  30.     {name: '盐城', value: 15},
  31.     {name: '赤峰', value: 16},
  32.     {name: '青岛', value: 18},
  33.     {name: '乳山', value: 18},
  34.     {name: '金昌', value: 19},
  35.     {name: '泉州', value: 21},
  36.     {name: '莱西', value: 21},
  37.     {name: '日照', value: 21},
  38.     {name: '胶南', value: 22},
  39.     {name: '南通', value: 23},
  40.     {name: '拉萨', value: 24},
  41.     {name: '云浮', value: 24},
  42.     {name: '梅州', value: 25},
  43.     {name: '文登', value: 25},
  44.     {name: '上海', value: 25},
  45.     {name: '攀枝花', value: 25},
  46.     {name: '威海', value: 25},
  47.     {name: '承德', value: 25},
  48.     {name: '厦门', value: 26},
  49.     {name: '汕尾', value: 26},
  50.     {name: '潮州', value: 26},
  51.     {name: '丹东', value: 27},
  52.     {name: '太仓', value: 27},
  53.     {name: '曲靖', value: 27},
  54.     {name: '烟台', value: 28},
  55.     {name: '福州', value: 29},
  56.     {name: '瓦房店', value: 30},
  57.     {name: '即墨', value: 30},
  58.     {name: '抚顺', value: 31},
  59.     {name: '玉溪', value: 31},
  60.     {name: '张家口', value: 31},
  61.     {name: '阳泉', value: 31},
  62.     {name: '莱州', value: 32},
  63.     {name: '湖州', value: 32},
  64.     {name: '汕头', value: 32},
  65.     {name: '昆山', value: 33},
  66.     {name: '宁波', value: 33},
  67.     {name: '湛江', value: 33},
  68.     {name: '揭阳', value: 34},
  69.     {name: '荣成', value: 34},
  70.     {name: '连云港', value: 35},
  71.     {name: '葫芦岛', value: 35},
  72.     {name: '常熟', value: 36},
  73.     {name: '东莞', value: 36},
  74.     {name: '河源', value: 36},
  75.     {name: '淮安', value: 36},
  76.     {name: '泰州', value: 36},
  77.     {name: '南宁', value: 37},
  78.     {name: '营口', value: 37},
  79.     {name: '惠州', value: 37},
  80.     {name: '江阴', value: 37},
  81.     {name: '蓬莱', value: 37},
  82.     {name: '韶关', value: 38},
  83.     {name: '嘉峪关', value: 38},
  84.     {name: '广州', value: 38},
  85.     {name: '延安', value: 38},
  86.     {name: '太原', value: 39},
  87.     {name: '清远', value: 39},
  88.     {name: '中山', value: 39},
  89.     {name: '昆明', value: 39},
  90.     {name: '寿光', value: 40},
  91.     {name: '盘锦', value: 40},
  92.     {name: '长治', value: 41},
  93.     {name: '深圳', value: 41},
  94.     {name: '珠海', value: 42},
  95.     {name: '宿迁', value: 43},
  96.     {name: '咸阳', value: 43},
  97.     {name: '铜川', value: 44},
  98.     {name: '平度', value: 44},
  99.     {name: '佛山', value: 44},
  100.     {name: '海口', value: 44},
  101.     {name: '江门', value: 45},
  102.     {name: '章丘', value: 45},
  103.     {name: '肇庆', value: 46},
  104.     {name: '大连', value: 47},
  105.     {name: '临汾', value: 47},
  106.     {name: '吴江', value: 47},
  107.     {name: '石嘴山', value: 49},
  108.     {name: '沈阳', value: 50},
  109.     {name: '苏州', value: 50},
  110.     {name: '茂名', value: 50},
  111.     {name: '嘉兴', value: 51},
  112.     {name: '长春', value: 51},
  113.     {name: '胶州', value: 52},
  114.     {name: '银川', value: 52},
  115.     {name: '张家港', value: 52},
  116.     {name: '三门峡', value: 53},
  117.     {name: '锦州', value: 54},
  118.     {name: '南昌', value: 54},
  119.     {name: '柳州', value: 54},
  120.     {name: '三亚', value: 54},
  121.     {name: '自贡', value: 56},
  122.     {name: '吉林', value: 56},
  123.     {name: '阳江', value: 57},
  124.     {name: '泸州', value: 57},
  125.     {name: '西宁', value: 57},
  126.     {name: '宜宾', value: 58},
  127.     {name: '呼和浩特', value: 58},
  128.     {name: '成都', value: 58},
  129.     {name: '大同', value: 58},
  130.     {name: '镇江', value: 59},
  131.     {name: '桂林', value: 59},
  132.     {name: '张家界', value: 59},
  133.     {name: '宜兴', value: 59},
  134.     {name: '北海', value: 60},
  135.     {name: '西安', value: 61},
  136.     {name: '金坛', value: 62},
  137.     {name: '东营', value: 62},
  138.     {name: '牡丹江', value: 63},
  139.     {name: '遵义', value: 63},
  140.     {name: '绍兴', value: 63},
  141.     {name: '扬州', value: 64},
  142.     {name: '常州', value: 64},
  143.     {name: '潍坊', value: 65},
  144.     {name: '重庆', value: 66},
  145.     {name: '台州', value: 67},
  146.     {name: '南京', value: 67},
  147.     {name: '滨州', value: 70},
  148.     {name: '贵阳', value: 71},
  149.     {name: '无锡', value: 71},
  150.     {name: '本溪', value: 71},
  151.     {name: '克拉玛依', value: 72},
  152.     {name: '渭南', value: 72},
  153.     {name: '马鞍山', value: 72},
  154.     {name: '宝鸡', value: 72},
  155.     {name: '焦作', value: 75},
  156.     {name: '句容', value: 75},
  157.     {name: '北京', value: 79},
  158.     {name: '徐州', value: 79},
  159.     {name: '衡水', value: 80},
  160.     {name: '包头', value: 80},
  161.     {name: '绵阳', value: 80},
  162.     {name: '乌鲁木齐', value: 84},
  163.     {name: '枣庄', value: 84},
  164.     {name: '杭州', value: 84},
  165.     {name: '淄博', value: 85},
  166.     {name: '鞍山', value: 86},
  167.     {name: '溧阳', value: 86},
  168.     {name: '库尔勒', value: 86},
  169.     {name: '安阳', value: 90},
  170.     {name: '开封', value: 90},
  171.     {name: '济南', value: 92},
  172.     {name: '德阳', value: 93},
  173.     {name: '温州', value: 95},
  174.     {name: '九江', value: 96},
  175.     {name: '邯郸', value: 98},
  176.     {name: '临安', value: 99},
  177.     {name: '兰州', value: 99},
  178.     {name: '沧州', value: 100},
  179.     {name: '临沂', value: 103},
  180.     {name: '南充', value: 104},
  181.     {name: '天津', value: 105},
  182.     {name: '富阳', value: 106},
  183.     {name: '泰安', value: 112},
  184.     {name: '诸暨', value: 112},
  185.     {name: '郑州', value: 113},
  186.     {name: '哈尔滨', value: 114},
  187.     {name: '聊城', value: 116},
  188.     {name: '芜湖', value: 117},
  189.     {name: '唐山', value: 119},
  190.     {name: '平顶山', value: 119},
  191.     {name: '邢台', value: 119},
  192.     {name: '德州', value: 120},
  193.     {name: '济宁', value: 120},
  194.     {name: '荆州', value: 127},
  195.     {name: '宜昌', value: 130},
  196.     {name: '义乌', value: 132},
  197.     {name: '丽水', value: 133},
  198.     {name: '洛阳', value: 134},
  199.     {name: '秦皇岛', value: 136},
  200.     {name: '株洲', value: 143},
  201.     {name: '石家庄', value: 147},
  202.     {name: '莱芜', value: 148},
  203.     {name: '常德', value: 152},
  204.     {name: '保定', value: 153},
  205.     {name: '湘潭', value: 154},
  206.     {name: '金华', value: 157},
  207.     {name: '岳阳', value: 169},
  208.     {name: '长沙', value: 175},
  209.     {name: '衢州', value: 177},
  210.     {name: '廊坊', value: 193},
  211.     {name: '菏泽', value: 194},
  212.     {name: '合肥', value: 229},
  213.     {name: '武汉', value: 273},
  214.     {name: '大庆', value: 279}
  215. ];
  216.  
  217. var geoCoordMap = {
  218.     '海门':[121.15,31.89],
  219.     '鄂尔多斯':[109.781327,39.608266],
  220.     '招远':[120.38,37.35],
  221.     '舟山':[122.207216,29.985295],
  222.     '齐齐哈尔':[123.97,47.33],
  223.     '盐城':[120.13,33.38],
  224.     '赤峰':[118.87,42.28],
  225.     '青岛':[120.33,36.07],
  226.     '乳山':[121.52,36.89],
  227.     '金昌':[102.188043,38.520089],
  228.     '泉州':[118.58,24.93],
  229.     '莱西':[120.53,36.86],
  230.     '日照':[119.46,35.42],
  231.     '胶南':[119.97,35.88],
  232.     '南通':[121.05,32.08],
  233.     '拉萨':[91.11,29.97],
  234.     '云浮':[112.02,22.93],
  235.     '梅州':[116.1,24.55],
  236.     '文登':[122.05,37.2],
  237.     '上海':[121.48,31.22],
  238.     '攀枝花':[101.718637,26.582347],
  239.     '威海':[122.1,37.5],
  240.     '承德':[117.93,40.97],
  241.     '厦门':[118.1,24.46],
  242.     '汕尾':[115.375279,22.786211],
  243.     '潮州':[116.63,23.68],
  244.     '丹东':[124.37,40.13],
  245.     '太仓':[121.1,31.45],
  246.     '曲靖':[103.79,25.51],
  247.     '烟台':[121.39,37.52],
  248.     '福州':[119.3,26.08],
  249.     '瓦房店':[121.979603,39.627114],
  250.     '即墨':[120.45,36.38],
  251.     '抚顺':[123.97,41.97],
  252.     '玉溪':[102.52,24.35],
  253.     '张家口':[114.87,40.82],
  254.     '阳泉':[113.57,37.85],
  255.     '莱州':[119.942327,37.177017],
  256.     '湖州':[120.1,30.86],
  257.     '汕头':[116.69,23.39],
  258.     '昆山':[120.95,31.39],
  259.     '宁波':[121.56,29.86],
  260.     '湛江':[110.359377,21.270708],
  261.     '揭阳':[116.35,23.55],
  262.     '荣成':[122.41,37.16],
  263.     '连云港':[119.16,34.59],
  264.     '葫芦岛':[120.836932,40.711052],
  265.     '常熟':[120.74,31.64],
  266.     '东莞':[113.75,23.04],
  267.     '河源':[114.68,23.73],
  268.     '淮安':[119.15,33.5],
  269.     '泰州':[119.9,32.49],
  270.     '南宁':[108.33,22.84],
  271.     '营口':[122.18,40.65],
  272.     '惠州':[114.4,23.09],
  273.     '江阴':[120.26,31.91],
  274.     '蓬莱':[120.75,37.8],
  275.     '韶关':[113.62,24.84],
  276.     '嘉峪关':[98.289152,39.77313],
  277.     '广州':[113.23,23.16],
  278.     '延安':[109.47,36.6],
  279.     '太原':[112.53,37.87],
  280.     '清远':[113.01,23.7],
  281.     '中山':[113.38,22.52],
  282.     '昆明':[102.73,25.04],
  283.     '寿光':[118.73,36.86],
  284.     '盘锦':[122.070714,41.119997],
  285.     '长治':[113.08,36.18],
  286.     '深圳':[114.07,22.62],
  287.     '珠海':[113.52,22.3],
  288.     '宿迁':[118.3,33.96],
  289.     '咸阳':[108.72,34.36],
  290.     '铜川':[109.11,35.09],
  291.     '平度':[119.97,36.77],
  292.     '佛山':[113.11,23.05],
  293.     '海口':[110.35,20.02],
  294.     '江门':[113.06,22.61],
  295.     '章丘':[117.53,36.72],
  296.     '肇庆':[112.44,23.05],
  297.     '大连':[121.62,38.92],
  298.     '临汾':[111.5,36.08],
  299.     '吴江':[120.63,31.16],
  300.     '石嘴山':[106.39,39.04],
  301.     '沈阳':[123.38,41.8],
  302.     '苏州':[120.62,31.32],
  303.     '茂名':[110.88,21.68],
  304.     '嘉兴':[120.76,30.77],
  305.     '长春':[125.35,43.88],
  306.     '胶州':[120.03336,36.264622],
  307.     '银川':[106.27,38.47],
  308.     '张家港':[120.555821,31.875428],
  309.     '三门峡':[111.19,34.76],
  310.     '锦州':[121.15,41.13],
  311.     '南昌':[115.89,28.68],
  312.     '柳州':[109.4,24.33],
  313.     '三亚':[109.511909,18.252847],
  314.     '自贡':[104.778442,29.33903],
  315.     '吉林':[126.57,43.87],
  316.     '阳江':[111.95,21.85],
  317.     '泸州':[105.39,28.91],
  318.     '西宁':[101.74,36.56],
  319.     '宜宾':[104.56,29.77],
  320.     '呼和浩特':[111.65,40.82],
  321.     '成都':[104.06,30.67],
  322.     '大同':[113.3,40.12],
  323.     '镇江':[119.44,32.2],
  324.     '桂林':[110.28,25.29],
  325.     '张家界':[110.479191,29.117096],
  326.     '宜兴':[119.82,31.36],
  327.     '北海':[109.12,21.49],
  328.     '西安':[108.95,34.27],
  329.     '金坛':[119.56,31.74],
  330.     '东营':[118.49,37.46],
  331.     '牡丹江':[129.58,44.6],
  332.     '遵义':[106.9,27.7],
  333.     '绍兴':[120.58,30.01],
  334.     '扬州':[119.42,32.39],
  335.     '常州':[119.95,31.79],
  336.     '潍坊':[119.1,36.62],
  337.     '重庆':[106.54,29.59],
  338.     '台州':[121.420757,28.656386],
  339.     '南京':[118.78,32.04],
  340.     '滨州':[118.03,37.36],
  341.     '贵阳':[106.71,26.57],
  342.     '无锡':[120.29,31.59],
  343.     '本溪':[123.73,41.3],
  344.     '克拉玛依':[84.77,45.59],
  345.     '渭南':[109.5,34.52],
  346.     '马鞍山':[118.48,31.56],
  347.     '宝鸡':[107.15,34.38],
  348.     '焦作':[113.21,35.24],
  349.     '句容':[119.16,31.95],
  350.     '北京':[116.46,39.92],
  351.     '徐州':[117.2,34.26],
  352.     '衡水':[115.72,37.72],
  353.     '包头':[110,40.58],
  354.     '绵阳':[104.73,31.48],
  355.     '乌鲁木齐':[87.68,43.77],
  356.     '枣庄':[117.57,34.86],
  357.     '杭州':[120.19,30.26],
  358.     '淄博':[118.05,36.78],
  359.     '鞍山':[122.85,41.12],
  360.     '溧阳':[119.48,31.43],
  361.     '库尔勒':[86.06,41.68],
  362.     '安阳':[114.35,36.1],
  363.     '开封':[114.35,34.79],
  364.     '济南':[117,36.65],
  365.     '德阳':[104.37,31.13],
  366.     '温州':[120.65,28.01],
  367.     '九江':[115.97,29.71],
  368.     '邯郸':[114.47,36.6],
  369.     '临安':[119.72,30.23],
  370.     '兰州':[103.73,36.03],
  371.     '沧州':[116.83,38.33],
  372.     '临沂':[118.35,35.05],
  373.     '南充':[106.110698,30.837793],
  374.     '天津':[117.2,39.13],
  375.     '富阳':[119.95,30.07],
  376.     '泰安':[117.13,36.18],
  377.     '诸暨':[120.23,29.71],
  378.     '郑州':[113.65,34.76],
  379.     '哈尔滨':[126.63,45.75],
  380.     '聊城':[115.97,36.45],
  381.     '芜湖':[118.38,31.33],
  382.     '唐山':[118.02,39.63],
  383.     '平顶山':[113.29,33.75],
  384.     '邢台':[114.48,37.05],
  385.     '德州':[116.29,37.45],
  386.     '济宁':[116.59,35.38],
  387.     '荆州':[112.239741,30.335165],
  388.     '宜昌':[111.3,30.7],
  389.     '义乌':[120.06,29.32],
  390.     '丽水':[119.92,28.45],
  391.     '洛阳':[112.44,34.7],
  392.     '秦皇岛':[119.57,39.95],
  393.     '株洲':[113.16,27.83],
  394.     '石家庄':[114.48,38.03],
  395.     '莱芜':[117.67,36.19],
  396.     '常德':[111.69,29.05],
  397.     '保定':[115.48,38.85],
  398.     '湘潭':[112.91,27.87],
  399.     '金华':[119.64,29.12],
  400.     '岳阳':[113.09,29.37],
  401.     '长沙':[113,28.21],
  402.     '衢州':[118.88,28.97],
  403.     '廊坊':[116.7,39.53],
  404.     '菏泽':[115.480656,35.23375],
  405.     '合肥':[117.27,31.86],
  406.     '武汉':[114.31,30.52],
  407.     '大庆':[125.03,46.58]
  408. };
  409.  
  410. var convertData = function (data) {
  411.     var res = [];
  412.     for (var i = 0; i < data.length; i++) {
  413.         var geoCoord = geoCoordMap[data[i].name];
  414.         if (geoCoord) {
  415.             res.push({
  416.                 name: data[i].name,
  417.                 value: geoCoord.concat(data[i].value)
  418.             });
  419.         }
  420.     }
  421.     return res;
  422. };
  423.  
  424. function renderItem(params, api) {
  425.     var coords = [
  426.         [116.7,39.53],
  427.         [103.73,36.03],
  428.         [112.91,27.87],
  429.         [120.65,28.01],
  430.         [119.57,39.95]
  431.     ];
  432.     var points = [];
  433.     for (var i = 0; i < coords.length; i++) {
  434.         points.push(api.coord(coords[i]));
  435.     }
  436.     var color = api.visual('color');
  437.  
  438.     return {
  439.         type: 'polygon',
  440.         shape: {
  441.             points: echarts.graphic.clipPointsByRect(points, {
  442.                 x: params.coordSys.x,
  443.                 y: params.coordSys.y,
  444.                 width: params.coordSys.width,
  445.                 height: params.coordSys.height
  446.             })
  447.         },
  448.         style: api.style({
  449.             fill: color,
  450.             stroke: echarts.color.lift(color)
  451.         })
  452.     };
  453. }
  454.  
  455. option = {
  456.     backgroundColor: '#404a59',
  457.     title: {
  458.         text: '全国主要城市空气质量',
  459.         subtext: 'data from PM25.in',
  460.         sublink: 'http://www.pm25.in',
  461.         left: 'center',
  462.         textStyle: {
  463.             color: '#fff'
  464.         }
  465.     },
  466.     tooltip : {
  467.         trigger: 'item'
  468.     },
  469.     bmap: {
  470.         center: [104.114129, 37.550339],
  471.         zoom: 5,
  472.         roam: true,
  473.         mapStyle: {
  474.             styleJson: [
  475.                     {
  476.                         "featureType": "water",
  477.                         "elementType": "all",
  478.                         "stylers": {
  479.                             "color": "#044161"
  480.                         }
  481.                     },
  482.                     {
  483.                         "featureType": "land",
  484.                         "elementType": "all",
  485.                         "stylers": {
  486.                             "color": "#004981"
  487.                         }
  488.                     },
  489.                     {
  490.                         "featureType": "boundary",
  491.                         "elementType": "geometry",
  492.                         "stylers": {
  493.                             "color": "#064f85"
  494.                         }
  495.                     },
  496.                     {
  497.                         "featureType": "railway",
  498.                         "elementType": "all",
  499.                         "stylers": {
  500.                             "visibility": "off"
  501.                         }
  502.                     },
  503.                     {
  504.                         "featureType": "highway",
  505.                         "elementType": "geometry",
  506.                         "stylers": {
  507.                             "color": "#004981"
  508.                         }
  509.                     },
  510.                     {
  511.                         "featureType": "highway",
  512.                         "elementType": "geometry.fill",
  513.                         "stylers": {
  514.                             "color": "#005b96",
  515.                             "lightness": 1
  516.                         }
  517.                     },
  518.                     {
  519.                         "featureType": "highway",
  520.                         "elementType": "labels",
  521.                         "stylers": {
  522.                             "visibility": "off"
  523.                         }
  524.                     },
  525.                     {
  526.                         "featureType": "arterial",
  527.                         "elementType": "geometry",
  528.                         "stylers": {
  529.                             "color": "#004981"
  530.                         }
  531.                     },
  532.                     {
  533.                         "featureType": "arterial",
  534.                         "elementType": "geometry.fill",
  535.                         "stylers": {
  536.                             "color": "#00508b"
  537.                         }
  538.                     },
  539.                     {
  540.                         "featureType": "poi",
  541.                         "elementType": "all",
  542.                         "stylers": {
  543.                             "visibility": "off"
  544.                         }
  545.                     },
  546.                     {
  547.                         "featureType": "green",
  548.                         "elementType": "all",
  549.                         "stylers": {
  550.                             "color": "#056197",
  551.                             "visibility": "off"
  552.                         }
  553.                     },
  554.                     {
  555.                         "featureType": "subway",
  556.                         "elementType": "all",
  557.                         "stylers": {
  558.                             "visibility": "off"
  559.                         }
  560.                     },
  561.                     {
  562.                         "featureType": "manmade",
  563.                         "elementType": "all",
  564.                         "stylers": {
  565.                             "visibility": "off"
  566.                         }
  567.                     },
  568.                     {
  569.                         "featureType": "local",
  570.                         "elementType": "all",
  571.                         "stylers": {
  572.                             "visibility": "off"
  573.                         }
  574.                     },
  575.                     {
  576.                         "featureType": "arterial",
  577.                         "elementType": "labels",
  578.                         "stylers": {
  579.                             "visibility": "off"
  580.                         }
  581.                     },
  582.                     {
  583.                         "featureType": "boundary",
  584.                         "elementType": "geometry.fill",
  585.                         "stylers": {
  586.                             "color": "#029fd4"
  587.                         }
  588.                     },
  589.                     {
  590.                         "featureType": "building",
  591.                         "elementType": "all",
  592.                         "stylers": {
  593.                             "color": "#1a5787"
  594.                         }
  595.                     },
  596.                     {
  597.                         "featureType": "label",
  598.                         "elementType": "all",
  599.                         "stylers": {
  600.                             "visibility": "off"
  601.                         }
  602.                     }
  603.             ]
  604.         }
  605.     },
  606.     series : [
  607.         {
  608.             name: 'pm2.5',
  609.             type: 'scatter',
  610.             coordinateSystem: 'bmap',
  611.             data: convertData(data),
  612.             symbolSize: function (val) {
  613.                 return val[2] / 10;
  614.             },
  615.             label: {
  616.                 normal: {
  617.                     formatter: '{b}',
  618.                     position: 'right',
  619.                     show: false
  620.                 },
  621.                 emphasis: {
  622.                     show: true
  623.                 }
  624.             },
  625.             itemStyle: {
  626.                 normal: {
  627.                     color: '#ddb926'
  628.                 }
  629.             }
  630.         },
  631.         {
  632.             name: 'Top 5',
  633.             type: 'effectScatter',
  634.             coordinateSystem: 'bmap',
  635.             data: convertData(data.sort(function (a, b) {
  636.                 return b.value - a.value;
  637.             }).slice(0, 6)),
  638.             symbolSize: function (val) {
  639.                 return val[2] / 10;
  640.             },
  641.             showEffectOn: 'emphasis',
  642.             rippleEffect: {
  643.                 brushType: 'stroke'
  644.             },
  645.             hoverAnimation: true,
  646.             label: {
  647.                 normal: {
  648.                     formatter: '{b}',
  649.                     position: 'right',
  650.                     show: true
  651.                 }
  652.             },
  653.             itemStyle: {
  654.                 normal: {
  655.                     color: '#f4e925',
  656.                     shadowBlur: 10,
  657.                     shadowColor: '#333'
  658.                 }
  659.             },
  660.             zlevel: 1
  661.         },
  662.         {
  663.             type: 'custom',
  664.             coordinateSystem: 'bmap',
  665.             renderItem: renderItem,
  666.             itemStyle: {
  667.                 normal: {
  668.                     opacity: 0.5
  669.                 }
  670.             },
  671.             animation: false,
  672.             silent: true,
  673.             data: [0],
  674.             z: -10
  675.         }
  676.     ]
  677. };
  678.  
  679. myChart.setOption(option);
  680. </script>
  681. </html>

echarts3.8.4实现城市空气质量(结合百度地图bmap.js，小航哥)的更多相关文章

  1. 基于flask的城市空气质量分析系统

    1.1  系统功能 在对主要需求进行分析后,确定系统由以下几个模块组成. 1) 用户信息管理: 该部分主要完成系统管理员的增加.删除.编辑和访问控制权限等操作. 2) 数据管理: 该部分主要完成后台存 ...

  2. 全国城市空气质量实时数据(PM2.5)实时下载

    国家公布了“http://113.108.142.147:20035/emcpublish/”空气质量实时发布平台,WCF服务地址为“http://113.108.142.147:20035/EnvP ...

  3. 通过ip得到所在城市,以及城市所在经纬度坐标（监控系统中用的该代码，小航哥）

    监控系统中就是利用的该段代码,实现通过ip得到所在城市,以及城市所在经纬度坐标,最后得以利用echarts实现模拟迁移的效果 api官方介绍: http://lbsyun.baidu.com/inde ...

  4. python获取全国各个城市pm2.5、臭氧等空气质量

    随着国家发展,中国很多城市的空气质量其实并不好,国家气象局会有实时统计,但是要去写爬虫爬取是十分麻烦的事情,并且官方网站也会做一些反爬虫措施,所以实现起来比较麻烦,最好的办法就是使用现成的免费接口,空 ...

  5. 用python+selenium获取北上广深成五地PM2.5数据信息并按空气质量排序

    从http://www.pm25.com/shenzhen.html抓取北京,深圳,上海,广州,成都的pm2.5指数,并按照空气质量从优到差排序,保存在txt文档里 代码如下: #coding=utf ...

  6. 使用 Cloud Insight SDK 监控北京空气质量！

    现在越来越多的 App 都开始有广告了.特别是空气质量监测,和天气类的 App,广告还是蛮多的,眼花缭乱,真是够了. 最近刚好在用一款系统监控工具 Cloud Insight,它提供的 SDK 可以把 ...

  7. 天气类API调用的代码示例合集：全国天气预报、实时空气质量数据查询、PM2.5空气质量指数等

    以下示例代码适用于 www.apishop.net 网站下的API,使用本文提及的接口调用代码示例前,您需要先申请相应的API服务. 全国天气预报:数据来自国家气象局,可根据地名.经纬度GPS.IP查 ...

  8. 如何用空气质量查询API接口进行快速开发

      空气质量的好坏反映了空气污染程度,它是依据空气中污染物浓度的高低来判断的.空气污染是一个复杂的现象,在特定时间和地点空气污染物浓度受到许多因素影响.来自固定和流动污染物的人为污染物排放大小是影响空 ...

  9. DIY 空气质量检测表

    DIY 空气质量检测表 前几天逛淘宝看到有空气颗粒物浓度测量的传感器,直接是 3.3V TTL 电压串口输出的,也不贵,也就 100 多一点.觉得挺好就买了个,这两天自己捣鼓了个小程序,搞了个软件界面 ...

随机推荐

  1. JavaScript之语句

    ECMA-262 规定了一组语句(也称为流控制语句).从本质上看,语句定义了 ECMAScript 中的主要语法,语句通常使用一或多个关键字来完成给定任务. if语句 if语句是最常见的一种语句,语法 ...

  2. c++ telescoping constructor is NOT supported until c++11

    Telescoping constructor: see Effective Java 2nd Edition Item 2 If you want to use telescoping constr ...

  3. 微信全局获取并缓存Accesstoken的值

    由于本项目中使用自定义菜单接口.获取用户信息接口.用户分组接口.消息发送接口等,都需要传入一个相同的参数access_token,其有效期 是7200秒(两小时),在有效期内可以使用,一旦access ...

  4. Java基础01 从HelloWorld到面向对象（转载）

    Java是完全面向对象的语言.Java通过虚拟机的运行机制,实现“跨平台”的理念. "Hello World!" public class HelloWorld{    publi ...

  5. SVN如何新建用户并分配权限

    打开SVN服务端,找到特定的项目目录,单击右键,然后点击属性:   在弹出的页面中,点击增加:   在增加的页面中,你可以选择之前已经创建的用户,也可以重新创建用户名和密码:   如果是选择已经有的用 ...

  6. websocket数据流解析

    ceilometer获取数据暂时先不做解答,本篇注重websocket解决浏览器与openstack组件之间的实时状态更新. 大致流程如下: nginx配置的反向代理如下: /etc/nginx/ng ...

  7. 什么是 HTTPS

    HTTPS (基于安全套接字层的超文本传输协议 或者是 HTTP over SSL) 是一个 Netscape 开发的 Web 协议. 你也可以说:HTTPS = HTTP + SSL HTTPS 在 ...

  8. RMI 连接超时时间设定

    System.setProperty("sun.rmi.transport.tcp.responseTimeout", "2000"); System.setP ...

  9. C++ RTTI的应用

    先看下方的代码,我们所处的context在<<< void* pX = (void*)pGiven; >>>处,只知道上面这些类的信息和pX指针,怎么判断pX指向对 ...

  10. Android 自定义权限 (<permission> <uses-permission>)

    在android系统的安全模型中,应用程序在默认的情况下不可以执行任何对其他应用程序,系统或者用户带来负面影响的操作.如果应用需要执行某些操作,就需要声明使用这个操作对应的权限. (在manifest ...