eCharts的使用
var geoCoordMap = {
? ? ? ? "海門(mén)": [121.15, 31.89],
? ? ? ? "鄂爾多斯": [109.781327, 39.608266],
? ? ? ? "招遠(yuǎn)": [120.38, 37.35],
? ? ? ? "舟山": [122.207216, 29.985295],
? ? ? ? "齊齊哈爾": [123.97, 47.33],
? ? ? ? "鹽城": [120.13, 33.38],
? ? ? ? "赤峰": [118.87, 42.28],
? ? ? ? "青島": [120.33, 36.07],
? ? ? ? "乳山": [121.52, 36.89],
? ? ? ? "金昌": [102.188043, 38.520089],
? ? ? ? "泉州": [118.58, 24.93],
? ? ? ? "萊西": [120.53, 36.86],
? ? ? ? "日照": [119.46, 35.42],
? ? ? ? "膠南": [119.97, 35.88],
? ? ? ? "南通": [121.05, 32.08],
? ? ? ? "拉薩": [91.11, 29.97],
? ? ? ? "云浮": [112.02, 22.93],
? ? ? ? "梅州": [116.1, 24.55],
? ? ? ? "文登": [122.05, 37.2],
? ? ? ? "上海": [121.48, 31.22],
? ? ? ? "攀枝花": [101.718637, 26.582347],
? ? ? ? "威海": [122.1, 37.5],
? ? ? ? "承德": [117.93, 40.97],
? ? ? ? "廈門(mén)": [118.1, 24.46],
? ? ? ? "汕尾": [115.375279, 22.786211],
? ? ? ? "潮州": [116.63, 23.68],
? ? ? ? "丹東": [124.37, 40.13],
? ? ? ? "太倉(cāng)": [121.1, 31.45],
? ? ? ? "曲靖": [103.79, 25.51],
? ? ? ? "煙臺(tái)": [121.39, 37.52],
? ? ? ? "福州": [119.3, 26.08],
? ? ? ? "瓦房店": [121.979603, 39.627114],
? ? ? ? "即墨": [120.45, 36.38],
? ? ? ? "撫順": [123.97, 41.97],
? ? ? ? "玉溪": [102.52, 24.35],
? ? ? ? "張家口": [114.87, 40.82],
? ? ? ? "陽(yáng)泉": [113.57, 37.85],
? ? ? ? "萊州": [119.942327, 37.177017],
? ? ? ? "湖州": [120.1, 30.86],
? ? ? ? "汕頭": [116.69, 23.39],
? ? ? ? "昆山": [120.95, 31.39],
? ? ? ? "寧波": [121.56, 29.86],
? ? ? ? "湛江": [110.359377, 21.270708],
? ? ? ? "揭陽(yáng)": [116.35, 23.55],
? ? ? ? "榮成": [122.41, 37.16],
? ? ? ? "連云港": [119.16, 34.59],
? ? ? ? "葫蘆島": [120.836932, 40.711052],
? ? ? ? "常熟": [120.74, 31.64],
? ? ? ? "東莞": [113.75, 23.04],
? ? ? ? "河源": [114.68, 23.73],
? ? ? ? "淮安": [119.15, 33.5],
? ? ? ? "泰州": [119.9, 32.49],
? ? ? ? "南寧": [108.33, 22.84],
? ? ? ? "營(yíng)口": [122.18, 40.65],
? ? ? ? "惠州": [114.4, 23.09],
? ? ? ? "江陰": [120.26, 31.91],
? ? ? ? "蓬萊": [120.75, 37.8],
? ? ? ? "韶關(guān)": [113.62, 24.84],
? ? ? ? "嘉峪關(guān)": [98.289152, 39.77313],
? ? ? ? "廣州": [113.23, 23.16],
? ? ? ? "延安": [109.47, 36.6],
? ? ? ? "太原": [112.53, 37.87],
? ? ? ? "清遠(yuǎn)": [113.01, 23.7],
? ? ? ? "中山": [113.38, 22.52],
? ? ? ? "昆明": [102.73, 25.04],
? ? ? ? "壽光": [118.73, 36.86],
? ? ? ? "盤(pán)錦": [122.070714, 41.119997],
? ? ? ? "長(zhǎng)治": [113.08, 36.18],
? ? ? ? "深圳": [114.07, 22.62],
? ? ? ? "珠海": [113.52, 22.3],
? ? ? ? "宿遷": [118.3, 33.96],
? ? ? ? "咸陽(yáng)": [108.72, 34.36],
? ? ? ? "銅川": [109.11, 35.09],
? ? ? ? "平度": [119.97, 36.77],
? ? ? ? "佛山": [113.11, 23.05],
? ? ? ? "海口": [110.35, 20.02],
? ? ? ? "江門(mén)": [113.06, 22.61],
? ? ? ? "章丘": [117.53, 36.72],
? ? ? ? "肇慶": [112.44, 23.05],
? ? ? ? "大連": [121.62, 38.92],
? ? ? ? "臨汾": [111.5, 36.08],
? ? ? ? "吳江": [120.63, 31.16],
? ? ? ? "石嘴山": [106.39, 39.04],
? ? ? ? "沈陽(yáng)": [123.38, 41.8],
? ? ? ? "蘇州": [120.62, 31.32],
? ? ? ? "茂名": [110.88, 21.68],
? ? ? ? "嘉興": [120.76, 30.77],
? ? ? ? "長(zhǎng)春": [125.35, 43.88],
? ? ? ? "膠州": [120.03336, 36.264622],
? ? ? ? "銀川": [106.27, 38.47],
? ? ? ? "張家港": [120.555821, 31.875428],
? ? ? ? "三門(mén)峽": [111.19, 34.76],
? ? ? ? "錦州": [121.15, 41.13],
? ? ? ? "南昌": [115.89, 28.68],
? ? ? ? "柳州": [109.4, 24.33],
? ? ? ? "三亞": [109.511909, 18.252847],
? ? ? ? "自貢": [104.778442, 29.33903],
? ? ? ? "吉林": [126.57, 43.87],
? ? ? ? "陽(yáng)江": [111.95, 21.85],
? ? ? ? "瀘州": [105.39, 28.91],
? ? ? ? "西寧": [101.74, 36.56],
? ? ? ? "宜賓": [104.56, 29.77],
? ? ? ? "呼和浩特": [111.65, 40.82],
? ? ? ? "成都": [104.06, 30.67],
? ? ? ? "大同": [113.3, 40.12],
? ? ? ? "鎮(zhèn)江": [119.44, 32.2],
? ? ? ? "桂林": [110.28, 25.29],
? ? ? ? "張家界": [110.479191, 29.117096],
? ? ? ? "宜興": [119.82, 31.36],
? ? ? ? "北海": [109.12, 21.49],
? ? ? ? "西安": [108.95, 34.27],
? ? ? ? "金壇": [119.56, 31.74],
? ? ? ? "東營(yíng)": [118.49, 37.46],
? ? ? ? "牡丹江": [129.58, 44.6],
? ? ? ? "遵義": [106.9, 27.7],
? ? ? ? "紹興": [120.58, 30.01],
? ? ? ? "揚(yáng)州": [119.42, 32.39],
? ? ? ? "常州": [119.95, 31.79],
? ? ? ? "濰坊": [119.1, 36.62],
? ? ? ? "重慶": [106.54, 29.59],
? ? ? ? "臺(tái)州": [121.420757, 28.656386],
? ? ? ? "南京": [118.78, 32.04],
? ? ? ? "濱州": [118.03, 37.36],
? ? ? ? "貴陽(yáng)": [106.71, 26.57],
? ? ? ? "無(wú)錫": [120.29, 31.59],
? ? ? ? "本溪": [123.73, 41.3],
? ? ? ? "克拉瑪依": [84.77, 45.59],
? ? ? ? "渭南": [109.5, 34.52],
? ? ? ? "馬鞍山": [118.48, 31.56],
? ? ? ? "寶雞": [107.15, 34.38],
? ? ? ? "焦作": [113.21, 35.24],
? ? ? ? "句容": [119.16, 31.95],
? ? ? ? "北京": [116.46, 39.92],
? ? ? ? "徐州": [117.2, 34.26],
? ? ? ? "衡水": [115.72, 37.72],
? ? ? ? "包頭": [110, 40.58],
? ? ? ? "綿陽(yáng)": [104.73, 31.48],
? ? ? ? "烏魯木齊": [87.68, 43.77],
? ? ? ? "棗莊": [117.57, 34.86],
? ? ? ? "杭州": [120.19, 30.26],
? ? ? ? "淄博": [118.05, 36.78],
? ? ? ? "鞍山": [122.85, 41.12],
? ? ? ? "溧陽(yáng)": [119.48, 31.43],
? ? ? ? "庫(kù)爾勒": [86.06, 41.68],
? ? ? ? "安陽(yáng)": [114.35, 36.1],
? ? ? ? "開(kāi)封": [114.35, 34.79],
? ? ? ? "濟(jì)南": [117, 36.65],
? ? ? ? "德陽(yáng)": [104.37, 31.13],
? ? ? ? "溫州": [120.65, 28.01],
? ? ? ? "九江": [115.97, 29.71],
? ? ? ? "邯鄲": [114.47, 36.6],
? ? ? ? "臨安": [119.72, 30.23],
? ? ? ? "蘭州": [103.73, 36.03],
? ? ? ? "滄州": [116.83, 38.33],
? ? ? ? "臨沂": [118.35, 35.05],
? ? ? ? "南充": [106.110698, 30.837793],
? ? ? ? "天津": [117.2, 39.13],
? ? ? ? "富陽(yáng)": [119.95, 30.07],
? ? ? ? "泰安": [117.13, 36.18],
? ? ? ? "諸暨": [120.23, 29.71],
? ? ? ? "鄭州": [113.65, 34.76],
? ? ? ? "哈爾濱": [126.63, 45.75],
? ? ? ? "聊城": [115.97, 36.45],
? ? ? ? "蕪湖": [118.38, 31.33],
? ? ? ? "唐山": [118.02, 39.63],
? ? ? ? "平頂山": [113.29, 33.75],
? ? ? ? "邢臺(tái)": [114.48, 37.05],
? ? ? ? "德州": [116.29, 37.45],
? ? ? ? "濟(jì)寧": [116.59, 35.38],
? ? ? ? "荊州": [112.239741, 30.335165],
? ? ? ? "宜昌": [111.3, 30.7],
? ? ? ? "義烏": [120.06, 29.32],
? ? ? ? "麗水": [119.92, 28.45],
? ? ? ? "洛陽(yáng)": [112.44, 34.7],
? ? ? ? "秦皇島": [119.57, 39.95],
? ? ? ? "株洲": [113.16, 27.83],
? ? ? ? "石家莊": [114.48, 38.03],
? ? ? ? "萊蕪": [117.67, 36.19],
? ? ? ? "常德": [111.69, 29.05],
? ? ? ? "保定": [115.48, 38.85],
? ? ? ? "湘潭": [112.91, 27.87],
? ? ? ? "金華": [119.64, 29.12],
? ? ? ? "岳陽(yáng)": [113.09, 29.37],
? ? ? ? "長(zhǎng)沙": [113, 28.21],
? ? ? ? "衢州": [118.88, 28.97],
? ? ? ? "廊坊": [116.7, 39.53],
? ? ? ? "菏澤": [115.480656, 35.23375],
? ? ? ? "合肥": [117.27, 31.86],
? ? ? ? "武漢": [114.31, 30.52],
? ? ? ? "大慶": [125.03, 46.58]
? ? };
? ? var data = [
? ? ? ? { name: "海門(mén)", value: 9 },
? ? ? ? { name: "鄂爾多斯", value: 12 },
? ? ? ? { name: "招遠(yuǎn)", value: 12 },
? ? ? ? { name: "舟山", value: 12 },
? ? ? ? { name: "齊齊哈爾", value: 14 },
? ? ? ? { name: "鹽城", value: 15 },
? ? ? ? { name: "赤峰", value: 16 },
? ? ? ? { name: "青島", value: 18 },
? ? ? ? { name: "乳山", value: 18 },
? ? ? ? { name: "金昌", value: 19 },
? ? ? ? { name: "泉州", value: 21 },
? ? ? ? { name: "萊西", value: 21 },
? ? ? ? { name: "日照", value: 21 },
? ? ? ? { name: "膠南", value: 22 },
? ? ? ? { name: "南通", value: 23 },
? ? ? ? { name: "拉薩", value: 24 },
? ? ? ? { name: "云浮", value: 24 },
? ? ? ? { name: "梅州", value: 25 },
? ? ? ? { name: "文登", value: 25 },
? ? ? ? { name: "上海", value: 25 },
? ? ? ? { name: "攀枝花", value: 25 },
? ? ? ? { name: "威海", value: 25 },
? ? ? ? { name: "承德", value: 25 },
? ? ? ? { name: "廈門(mén)", value: 26 },
? ? ? ? { name: "汕尾", value: 26 },
? ? ? ? { name: "潮州", value: 26 },
? ? ? ? { name: "丹東", value: 27 },
? ? ? ? { name: "太倉(cāng)", value: 27 },
? ? ? ? { name: "曲靖", value: 27 },
? ? ? ? { name: "煙臺(tái)", value: 28 },
? ? ? ? { name: "福州", value: 29 },
? ? ? ? { name: "瓦房店", value: 30 },
? ? ? ? { name: "即墨", value: 30 },
? ? ? ? { name: "撫順", value: 31 },
? ? ? ? { name: "玉溪", value: 31 },
? ? ? ? { name: "張家口", value: 31 },
? ? ? ? { name: "陽(yáng)泉", value: 31 },
? ? ? ? { name: "萊州", value: 32 },
? ? ? ? { name: "湖州", value: 32 },
? ? ? ? { name: "汕頭", value: 32 },
? ? ? ? { name: "昆山", value: 33 },
? ? ? ? { name: "寧波", value: 33 },
? ? ? ? { name: "湛江", value: 33 },
? ? ? ? { name: "揭陽(yáng)", value: 34 },
? ? ? ? { name: "榮成", value: 34 },
? ? ? ? { name: "連云港", value: 35 },
? ? ? ? { name: "葫蘆島", value: 35 },
? ? ? ? { name: "常熟", value: 36 },
? ? ? ? { name: "東莞", value: 36 },
? ? ? ? { name: "河源", value: 36 },
? ? ? ? { name: "淮安", value: 36 },
? ? ? ? { name: "泰州", value: 36 },
? ? ? ? { name: "南寧", value: 37 },
? ? ? ? { name: "營(yíng)口", value: 37 },
? ? ? ? { name: "惠州", value: 37 },
? ? ? ? { name: "江陰", value: 37 },
? ? ? ? { name: "蓬萊", value: 37 },
? ? ? ? { name: "韶關(guān)", value: 38 },
? ? ? ? { name: "嘉峪關(guān)", value: 38 },
? ? ? ? { name: "廣州", value: 38 },
? ? ? ? { name: "延安", value: 38 },
? ? ? ? { name: "太原", value: 39 },
? ? ? ? { name: "清遠(yuǎn)", value: 39 },
? ? ? ? { name: "中山", value: 39 },
? ? ? ? { name: "昆明", value: 39 },
? ? ? ? { name: "壽光", value: 40 },
? ? ? ? { name: "盤(pán)錦", value: 40 },
? ? ? ? { name: "長(zhǎng)治", value: 41 },
? ? ? ? { name: "深圳", value: 41 },
? ? ? ? { name: "珠海", value: 42 },
? ? ? ? { name: "宿遷", value: 43 },
? ? ? ? { name: "咸陽(yáng)", value: 43 },
? ? ? ? { name: "銅川", value: 44 },
? ? ? ? { name: "平度", value: 44 },
? ? ? ? { name: "佛山", value: 44 },
? ? ? ? { name: "海口", value: 44 },
? ? ? ? { name: "江門(mén)", value: 45 },
? ? ? ? { name: "章丘", value: 45 },
? ? ? ? { name: "肇慶", value: 46 },
? ? ? ? { name: "大連", value: 47 },
? ? ? ? { name: "臨汾", value: 47 },
? ? ? ? { name: "吳江", value: 47 },
? ? ? ? { name: "石嘴山", value: 49 },
? ? ? ? { name: "沈陽(yáng)", value: 50 },
? ? ? ? { name: "蘇州", value: 50 },
? ? ? ? { name: "茂名", value: 50 },
? ? ? ? { name: "嘉興", value: 51 },
? ? ? ? { name: "長(zhǎng)春", value: 51 },
? ? ? ? { name: "膠州", value: 52 },
? ? ? ? { name: "銀川", value: 52 },
? ? ? ? { name: "張家港", value: 52 },
? ? ? ? { name: "三門(mén)峽", value: 53 },
? ? ? ? { name: "錦州", value: 54 },
? ? ? ? { name: "南昌", value: 54 },
? ? ? ? { name: "柳州", value: 54 },
? ? ? ? { name: "三亞", value: 54 },
? ? ? ? { name: "自貢", value: 56 },
? ? ? ? { name: "吉林", value: 56 },
? ? ? ? { name: "陽(yáng)江", value: 57 },
? ? ? ? { name: "瀘州", value: 57 },
? ? ? ? { name: "西寧", value: 57 },
? ? ? ? { name: "宜賓", value: 58 },
? ? ? ? { name: "呼和浩特", value: 58 },
? ? ? ? { name: "成都", value: 58 },
? ? ? ? { name: "大同", value: 58 },
? ? ? ? { name: "鎮(zhèn)江", value: 59 },
? ? ? ? { name: "桂林", value: 59 },
? ? ? ? { name: "張家界", value: 59 },
? ? ? ? { name: "宜興", value: 59 },
? ? ? ? { name: "北海", value: 60 },
? ? ? ? { name: "西安", value: 61 },
? ? ? ? { name: "金壇", value: 62 },
? ? ? ? { name: "東營(yíng)", value: 62 },
? ? ? ? { name: "牡丹江", value: 63 },
? ? ? ? { name: "遵義", value: 63 },
? ? ? ? { name: "紹興", value: 63 },
? ? ? ? { name: "揚(yáng)州", value: 64 },
? ? ? ? { name: "常州", value: 64 },
? ? ? ? { name: "濰坊", value: 65 },
? ? ? ? { name: "重慶", value: 66 },
? ? ? ? { name: "臺(tái)州", value: 67 },
? ? ? ? { name: "南京", value: 67 },
? ? ? ? { name: "濱州", value: 70 },
? ? ? ? { name: "貴陽(yáng)", value: 71 },
? ? ? ? { name: "無(wú)錫", value: 71 },
? ? ? ? { name: "本溪", value: 71 },
? ? ? ? { name: "克拉瑪依", value: 72 },
? ? ? ? { name: "渭南", value: 72 },
? ? ? ? { name: "馬鞍山", value: 72 },
? ? ? ? { name: "寶雞", value: 72 },
? ? ? ? { name: "焦作", value: 75 },
? ? ? ? { name: "句容", value: 75 },
? ? ? ? { name: "北京", value: 79 },
? ? ? ? { name: "徐州", value: 79 },
? ? ? ? { name: "衡水", value: 80 },
? ? ? ? { name: "包頭", value: 80 },
? ? ? ? { name: "綿陽(yáng)", value: 80 },
? ? ? ? { name: "烏魯木齊", value: 84 },
? ? ? ? { name: "棗莊", value: 84 },
? ? ? ? { name: "杭州", value: 84 },
? ? ? ? { name: "淄博", value: 85 },
? ? ? ? { name: "鞍山", value: 86 },
? ? ? ? { name: "溧陽(yáng)", value: 86 },
? ? ? ? { name: "庫(kù)爾勒", value: 86 },
? ? ? ? { name: "安陽(yáng)", value: 90 },
? ? ? ? { name: "開(kāi)封", value: 90 },
? ? ? ? { name: "濟(jì)南", value: 92 },
? ? ? ? { name: "德陽(yáng)", value: 93 },
? ? ? ? { name: "溫州", value: 95 },
? ? ? ? { name: "九江", value: 96 },
? ? ? ? { name: "邯鄲", value: 98 },
? ? ? ? { name: "臨安", value: 99 },
? ? ? ? { name: "蘭州", value: 99 },
? ? ? ? { name: "滄州", value: 100 },
? ? ? ? { name: "臨沂", value: 103 },
? ? ? ? { name: "南充", value: 104 },
? ? ? ? { name: "天津", value: 105 },
? ? ? ? { name: "富陽(yáng)", value: 106 },
? ? ? ? { name: "泰安", value: 112 },
? ? ? ? { name: "諸暨", value: 112 },
? ? ? ? { name: "鄭州", value: 113 },
? ? ? ? { name: "哈爾濱", value: 114 },
? ? ? ? { name: "聊城", value: 116 },
? ? ? ? { name: "蕪湖", value: 117 },
? ? ? ? { name: "唐山", value: 119 },
? ? ? ? { name: "平頂山", value: 119 },
? ? ? ? { name: "邢臺(tái)", value: 119 },
? ? ? ? { name: "德州", value: 120 },
? ? ? ? { name: "濟(jì)寧", value: 120 },
? ? ? ? { name: "荊州", value: 127 },
? ? ? ? { name: "宜昌", value: 130 },
? ? ? ? { name: "義烏", value: 132 },
? ? ? ? { name: "麗水", value: 133 },
? ? ? ? { name: "洛陽(yáng)", value: 134 },
? ? ? ? { name: "秦皇島", value: 136 },
? ? ? ? { name: "株洲", value: 143 },
? ? ? ? { name: "石家莊", value: 147 },
? ? ? ? { name: "萊蕪", value: 148 },
? ? ? ? { name: "常德", value: 152 },
? ? ? ? { name: "保定", value: 153 },
? ? ? ? { name: "湘潭", value: 154 },
? ? ? ? { name: "金華", value: 157 },
? ? ? ? { name: "岳陽(yáng)", value: 169 },
? ? ? ? { name: "長(zhǎng)沙", value: 175 },
? ? ? ? { name: "衢州", value: 177 },
? ? ? ? { name: "廊坊", value: 193 },
? ? ? ? { name: "菏澤", value: 194 },
? ? ? ? { name: "合肥", value: 229 },
? ? ? ? { name: "武漢", value: 273 },
? ? ? ? { name: "大慶", value: 279 }
? ? ];
//把數(shù)據(jù)轉(zhuǎn)化自己需要的數(shù)據(jù)結(jié)構(gòu)
? ? var convertData = function (data) {
? ? ? ? var res = [];
? ? ? ? for (var i = 0; i < data.length; i++) {
? ? ? ? ? ? var geoCoord = geoCoordMap[data[i].name];
? ? ? ? ? ? if (geoCoord) {
? ? ? ? ? ? ? ? res.push({
? ? ? ? ? ? ? ? ? ? name: data[i].name,
? ? ? ? ? ? ? ? ? ? value: geoCoord.concat(data[i].value)
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return res;
? ? };
var convertedData = [
? ? ? ? convertData(data),
? ? ? ? convertData(data.sort(function (a, b) {
? ? ? ? ? ? return b.value - a.value;
? ? ? ? }).slice(0, 6))
? ? ];
//echarts參數(shù)設(shè)置
var option = {
? ? ? ? backgroundColor: '#404a59',
? ? ? ? animation: true,
? ? ? ? animationDuration: 1000,
? ? ? ? animationEasing: 'cubicInOut',
? ? ? ? animationDurationUpdate: 1000,
? ? ? ? animationEasingUpdate: 'cubicInOut',
? ? ? ? title: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? text: '北極絨全國(guó)主要城市銷(xiāo)售統(tǒng)計(jì)',
? ? ? ? ? ? ? ? subtext: '',
? ? ? ? ? ? ? ? sublink: 'http://www.pm25.in',
? ? ? ? ? ? ? ? left: 'center',
? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? color: '#fff'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? id: 'statistic',
? ? ? ? ? ? ? ? right: 120,
? ? ? ? ? ? ? ? top: 40,
? ? ? ? ? ? ? ? width: 100,
? ? ? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? color: '#fff',
? ? ? ? ? ? ? ? ? ? fontSize: 24
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ],
? ? ? ? toolbox: {
? ? ? ? ? ? iconStyle: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? borderColor: '#fff'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? ? ? ? borderColor: '#b1e4ff'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? brush: {
? ? ? ? ? ? outOfBrush: {
? ? ? ? ? ? ? ? color: '#abc'
? ? ? ? ? ? },
? ? ? ? ? ? brushStyle: {
? ? ? ? ? ? ? ? borderWidth: 2,
? ? ? ? ? ? ? ? color: 'rgba(0,0,0,0.2)',
? ? ? ? ? ? ? ? borderColor: 'rgba(0,0,0,0.5)',
? ? ? ? ? ? },
? ? ? ? ? ? seriesIndex: [0, 1],
? ? ? ? ? ? throttleType: 'debounce',
? ? ? ? ? ? throttleDelay: 300,
? ? ? ? ? ? geoIndex: 0
? ? ? ? },
? ? ? ? geo: {
? ? ? ? ? ? map: 'china',
? ? ? ? ? ? left: '10',
? ? ? ? ? ? right: '35%',
? ? ? ? ? ? center: [117.98561551896913, 31.205000490896193],
? ? ? ? ? ? zoom: 2.5,
? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? ? ? ? show: false
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? roam: true,
? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? areaColor: '#323c48',
? ? ? ? ? ? ? ? ? ? borderColor: '#111'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? ? ? ? areaColor: '#2a333d'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? tooltip: {
? ? ? ? ? ? trigger: 'item'
? ? ? ? },
? ? ? ? //條形圖寬度
? ? ? ? grid: {
? ? ? ? ? ? right: 40,
? ? ? ? ? ? top: 100,
? ? ? ? ? ? bottom: 40,
? ? ? ? ? ? width: '30%'
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? ? type: 'value',
? ? ? ? ? ? scale: true,
? ? ? ? ? ? position: 'top',
? ? ? ? ? ? boundaryGap: false,
? ? ? ? ? ? splitLine: { show: false },
? ? ? ? ? ? axisLine: { show: false },
? ? ? ? ? ? axisTick: { show: false },
? ? ? ? ? ? axisLabel: { margin: 2, textStyle: { color: '#aaa' } },
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? ? type: 'category',
? ? ? ? ? ? name: 'TOP 20',
? ? ? ? ? ? nameGap: 16,
? ? ? ? ? ? axisLine: { show: false, lineStyle: { color: '#fff' } },
? ? ? ? ? ? axisTick: { show: false, lineStyle: { color: '#ddd' } },
? ? ? ? ? ? axisLabel: { interval: 0, textStyle: { color: '#ddd' ,fontSize:24} },//文字樣式
? ? ? ? ? ? data: []
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: 'pm2.5',
? ? ? ? ? ? ? ? type: 'scatter',
? ? ? ? ? ? ? ? coordinateSystem: 'geo',
? ? ? ? ? ? ? ? data: convertedData[0],
? ? ? ? ? ? ? ? symbolSize: function (val) {
? ? ? ? ? ? ? ? ? ? return Math.max(val[2] / 10, 8);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? formatter: '{b}',
? ? ? ? ? ? ? ? ? ? ? ? position: 'right',
? ? ? ? ? ? ? ? ? ? ? ? show: false
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? ? ? ? ? ? show: true
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? color: '#ddb926'
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? name: 'Top 5',
? ? ? ? ? ? ? ? type: 'effectScatter',
? ? ? ? ? ? ? ? coordinateSystem: 'geo',
? ? ? ? ? ? ? ? data: convertedData[1],
? ? ? ? ? ? ? ? symbolSize: function (val) {
? ? ? ? ? ? ? ? ? ? return Math.max(val[2] / 10, 8);
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? showEffectOn: 'emphasis',
? ? ? ? ? ? ? ? rippleEffect: {
? ? ? ? ? ? ? ? ? ? brushType: 'stroke'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? hoverAnimation: true,
? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? formatter: '{b}',
? ? ? ? ? ? ? ? ? ? ? ? position: 'right',
? ? ? ? ? ? ? ? ? ? ? ? show: true
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? color: '#f4e925',
? ? ? ? ? ? ? ? ? ? ? ? shadowBlur: 10,
? ? ? ? ? ? ? ? ? ? ? ? shadowColor: '#333'
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? zlevel: 1
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? id: 'bar',
? ? ? ? ? ? ? ? zlevel: 2,
? ? ? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? ? ? symbol: 'none',
? ? ? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? color: '#ddb926'
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? data: []
? ? ? ? ? ? }
? ? ? ? ]
? ? };
var myChart = echarts.init(document.getElementById('main'));
//監(jiān)聽(tīng)
? ? myChart.on('brushselected', renderBrushed);
//防止抖動(dòng)
? ? setTimeout(function () {
? ? ? ? myChart.dispatchAction({
? ? ? ? ? ? type: 'brush',
? ? ? ? ? ? areas: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? geoIndex: 0,
? ? ? ? ? ? ? ? ? ? brushType: 'polygon',
? ? ? ? ? ? ? ? ? ? coordRange: [[119.72, 34.85], [119.68, 34.85], [119.5, 34.84], [119.19, 34.77], [118.76, 34.63], [118.6, 34.6], [118.46, 34.6], [118.33, 34.57], [118.05, 34.56], [117.6, 34.56], [117.41, 34.56], [117.25, 34.56], [117.11, 34.56], [117.02, 34.56], [117, 34.56], [116.94, 34.56], [116.94, 34.55], [116.9, 34.5], [116.88, 34.44], [116.88, 34.37], [116.88, 34.33], [116.88, 34.24], [116.92, 34.15], [116.98, 34.09], [117.05, 34.06], [117.19, 33.96], [117.29, 33.9], [117.43, 33.8], [117.49, 33.75], [117.54, 33.68], [117.6, 33.65], [117.62, 33.61], [117.64, 33.59], [117.68, 33.58], [117.7, 33.52], [117.74, 33.5], [117.74, 33.46], [117.8, 33.44], [117.82, 33.41], [117.86, 33.37], [117.9, 33.3], [117.9, 33.28], [117.9, 33.27], [118.09, 32.97], [118.21, 32.7], [118.29, 32.56], [118.31, 32.5], [118.35, 32.46], [118.35, 32.42], [118.35, 32.36], [118.35, 32.34], [118.37, 32.24], [118.37, 32.14], [118.37, 32.09], [118.44, 32.05], [118.46, 32.01], [118.54, 31.98], [118.6, 31.93], [118.68, 31.86], [118.72, 31.8], [118.74, 31.78], [118.76, 31.74], [118.78, 31.7], [118.82, 31.64], [118.82, 31.62], [118.86, 31.58], [118.86, 31.55], [118.88, 31.54], [118.88, 31.52], [118.9, 31.51], [118.91, 31.48], [118.93, 31.43], [118.95, 31.4], [118.97, 31.39], [118.97, 31.37], [118.97, 31.34], [118.97, 31.27], [118.97, 31.21], [118.97, 31.17], [118.97, 31.12], [118.97, 31.02], [118.97, 30.93], [118.97, 30.87], [118.97, 30.85], [118.95, 30.8], [118.95, 30.77], [118.95, 30.76], [118.93, 30.7], [118.91, 30.63], [118.91, 30.61], [118.91, 30.6], [118.9, 30.6], [118.88, 30.54], [118.88, 30.51], [118.86, 30.51], [118.86, 30.46], [118.72, 30.18], [118.68, 30.1], [118.66, 30.07], [118.62, 29.91], [118.56, 29.73], [118.52, 29.63], [118.48, 29.51], [118.44, 29.42], [118.44, 29.32], [118.43, 29.19], [118.43, 29.14], [118.43, 29.08], [118.44, 29.05], [118.46, 29.05], [118.6, 28.95], [118.64, 28.94], [119.07, 28.51], [119.25, 28.41], [119.36, 28.28], [119.46, 28.19], [119.54, 28.13], [119.66, 28.03], [119.78, 28], [119.87, 27.94], [120.03, 27.86], [120.17, 27.79], [120.23, 27.76], [120.3, 27.72], [120.42, 27.66], [120.52, 27.64], [120.58, 27.63], [120.64, 27.63], [120.77, 27.63], [120.89, 27.61], [120.97, 27.6], [121.07, 27.59], [121.15, 27.59], [121.28, 27.59], [121.38, 27.61], [121.56, 27.73], [121.73, 27.89], [122.03, 28.2], [122.3, 28.5], [122.46, 28.72], [122.5, 28.77], [122.54, 28.82], [122.56, 28.82], [122.58, 28.85], [122.6, 28.86], [122.61, 28.91], [122.71, 29.02], [122.73, 29.08], [122.93, 29.44], [122.99, 29.54], [123.03, 29.66], [123.05, 29.73], [123.16, 29.92], [123.24, 30.02], [123.28, 30.13], [123.32, 30.29], [123.36, 30.36], [123.36, 30.55], [123.36, 30.74], [123.36, 31.05], [123.36, 31.14], [123.36, 31.26], [123.38, 31.42], [123.46, 31.74], [123.48, 31.83], [123.48, 31.95], [123.46, 32.09], [123.34, 32.25], [123.22, 32.39], [123.12, 32.46], [123.07, 32.48], [123.05, 32.49], [122.97, 32.53], [122.91, 32.59], [122.83, 32.81], [122.77, 32.87], [122.71, 32.9], [122.56, 32.97], [122.38, 33.05], [122.3, 33.12], [122.26, 33.15], [122.22, 33.21], [122.22, 33.3], [122.22, 33.39], [122.18, 33.44], [122.07, 33.56], [121.99, 33.69], [121.89, 33.78], [121.69, 34.02], [121.66, 34.05], [121.64, 34.08]]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? });
? ? }, 10);
//獲取移動(dòng)數(shù)據(jù)
? ? function renderBrushed(params) {
? ? console.log(params)
? ? ? ? var mainSeries = params.batch[0].selected[0];
? ? ? ? var selectedItems = [];
? ? ? ? var categoryData = [];
? ? ? ? var barData = [];
? ? ? ? var maxBar = 30;
? ? ? ? var sum = 0;
? ? ? ? var count = 0;
? ? ? ? for (var i = 0; i < mainSeries.dataIndex.length; i++) {
? ? ? ? ? ? var rawIndex = mainSeries.dataIndex[i];
? ? ? ? ? ? var dataItem = convertedData[0][rawIndex];
? ? ? ? ? ? var pmValue = dataItem.value[2];
? ? ? ? ? ? sum += pmValue;
? ? ? ? ? ? count++;
? ? ? ? ? ? selectedItems.push(dataItem);
? ? ? ? }
? ? ? ? selectedItems.sort(function (a, b) {
? ? ? ? ? ? return a.value[2] - b.value[2];
? ? ? ? });
? ? ? ? for (var i = 0; i < Math.min(selectedItems.length, maxBar) ; i++) {
? ? ? ? ? ? categoryData.push(selectedItems[i].name);
? ? ? ? ? ? barData.push(selectedItems[i].value[2]);
? ? ? ? }
? ? ? ? this.setOption({
? ? ? ? ? ? yAxis: {
? ? ? ? ? ? ? ? data: categoryData
? ? ? ? ? ? },
? ? ? ? ? ? xAxis: {
? ? ? ? ? ? ? ? axisLabel: { show: !!count }
? ? ? ? ? ? },
? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? id: 'statistic',
? ? ? ? ? ? ? ? text: count ? '平均: ' + (sum / count).toFixed(2) : ''
? ? ? ? ? ? },
? ? ? ? ? ? series: {
? ? ? ? ? ? ? ? id: 'bar',
? ? ? ? ? ? ? ? data: barData
? ? ? ? ? ? }
? ? ? ? });
? ? }
myChart.setOption(option);//實(shí)例化對(duì)象
