ECharts之類型3D(map，bar3D,scatter3D)

時間 2019-11-18

標籤 echarts 類型 3d map bar3d scatter3d scatter 简体版

原文原文鏈接

ECharts之類型3D(3D地圖)

相關js源碼下載：javascript

1.世界地圖.js，中國地圖.js，中國各省份地圖.jscss

地址：https://github.com/ecomfe/echarts/tree/master/map/jshtml

2.echarts基礎報表js源文件（echarts.min.js）java

地址：https://github.com/ecomfe/echarts/tree/master/distjquery

3.3D地圖所需的js文件（echarts-gl.min.js）git

地址：https://github.com/ecomfe/echarts-gl/tree/master/distgithub

原博客主連接：http://www.cnblogs.com/carsonwuu/p/8267457.htmlapache

效果圖：echarts

1.廣東地圖dom

2.中國地圖

源碼：一、（廣東地圖）

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>廣東省3D</title>
  5     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6     <script src="echarts.min.js"></script>
  7     <script src="echarts-gl.min.js"></script>
  8     <script src="guangdong.js"></script>
  9 
 10     <style type="text/css">
 11     #main {
 12         width:100%;
 13         border:2px solid green;
 14         height: 500px;
 15     }
 16 </style>
 17 
 18 </head>
 19 
 20 <body>
 21     <div id="main"></div>
 22     <script type="text/javascript">
 23         var city=[{name:'珠海市',value:[123,'idc']},{name:'廣州市',value:[123,'idc']},{name:'湛江市',value:[123,'idc']},{name:'茂名市',value:[123,'idc']},{name:'陽江市',value:[123,'idc']},{name:'雲浮市',value:[123,'idc']},{name:'肇慶市',value:[123,'idc']},{name:'江門市',value:[123,'idc']},{name:'中山市',value:[123,'idc']},{name:'佛山市',value:[123,'idc']},{name:'清遠市',value:[123,'idc']},{name:'韶關市',value:[123,'idc']},{name:'河源市',value:[0,'idc']},{name:'梅州市',value:[123,'idc']},{name:'潮州市',value:[255,'idc']},{name:'揭陽市',value:[123,'idc']},{name:'汕頭市',value:[123,'idc']},{name:'汕尾市',value:[123,'idc']},{name:'深圳市',value:[123,'idc']},{name:'東莞市',value:[123,'idc']},{name:'惠州市',value:[123,'idc']}]
 24         var chart = echarts.init(document.getElementById('main'));
 25         var min=0,max=300;
 26         var option = {
 27             tooltip:{
 28                 formatter:function(params){
 29                     var content='',
 30                     content=params.name+params.value[0]+params.value[1];
 31                     return content;
 32                 },
 33             },
 34             backgroundColor:'#fff',
 35             visualMap: {
 36                 show: false,
 37                 min: min,
 38                 max: max,
 39                 inRange: {
 40                     color: ['#e0ffff', '#006edd']
 41                 },
 42                 calculable:true
 43 
 44             },
 45             series: {
 46                 name:'廣東',
 47                 type: 'map3D',
 48                 map: '廣東',
 49                 data:city,
 50 
 51 
 52                 regionHeight: 2,
 53                 boxWidth:70,
 54                 //boxHeight:50,
 55                 boxDepth:50,
 56                 top:'-10%',
 57                //left:'10%',
 58 
 59 
 60                label: {
 61                     show:true,
 62                     formatter:function(params){
 63                         var content='',
 64                         content=params.name;
 65                         return content;
 66                     },
 67                     textStyle:{
 68                         color:'#EECBAD',
 69                         fontWeight : 'normal',
 70                         fontSize : 5,
 71                         backgroundColor: 'rgba(0,23,11,0)'
 72                     },
 73 
 74 
 75                     emphasis: {//對應的鼠標懸浮效果
 76                         show: true,
 77                         textStyle:{color:"#f00"}
 78                     } 
 79                 },
 80                 itemStyle: {
 81 
 82                         normal: {
 83 
 84                             borderWidth: 0.4
 85                         }, //陰影效果
 86                         emphasis: {
 87                             color: 'rgb(255,255,255)'
 88                         }
 89                 },
 90 
 91                 viewControl: {
 92                         autoRotate: false,
 93                         distance: 70
 94                 }
 95 
 96 
 97                 }
 98             }
 99                 chart.setOption(option);
100                 chart.on('click', function (params) {
101                 var cout=params.data.name;
102 
103                 //window.open('https://www.baidu.com');
104                 console.log(params);
105             });
106         </script>
107     </body>
108     </html>

View Code

2.（中國地圖）源碼：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
  6     <title>3D中國</title>
  7     <script src="echarts.min.js"></script>
  8     <script src="echarts-gl.js"></script>
  9     <script src="jquery-3.2.1.js"></script>
 10     
 11     <script src='china.js'></script>
 12     <style>#main {width:1000px; height: 500px;margin: auto;border:2px solid green;}</style>
 13 </head>
 14 <body>
 15     <div id='main'></div>
 16     <script>
 17         let geoCoordMap = {
 18            "海門": [121.15, 31.89],
 19            "鄂爾多斯": [109.781327, 39.608266],
 20            "招遠": [120.38, 37.35],
 21            "舟山": [122.207216, 29.985295],
 22            "齊齊哈爾": [123.97, 47.33],
 23            "鹽城": [120.13, 33.38],
 24            "赤峯": [118.87, 42.28],
 25            "青島": [120.33, 36.07],
 26            "乳山": [121.52, 36.89],
 27            "金昌": [102.188043, 38.520089],
 28            "泉州": [118.58, 24.93],
 29            "萊西": [120.53, 36.86],
 30            "日照": [119.46, 35.42],
 31            "膠南": [119.97, 35.88],
 32            "南通": [121.05, 32.08],
 33            "拉薩": [91.11, 29.97],
 34            "雲浮": [112.02, 22.93],
 35            "梅州": [116.1, 24.55],
 36            "文登": [122.05, 37.2],
 37            "上海": [121.48, 31.22],
 38            "攀枝花": [101.718637, 26.582347],
 39            "威海": [122.1, 37.5],
 40            "承德": [117.93, 40.97],
 41            "廈門": [118.1, 24.46],
 42            "汕尾": [115.375279, 22.786211],
 43            "潮州": [116.63, 23.68],
 44            "丹東": [124.37, 40.13],
 45            "太倉": [121.1, 31.45],
 46            "曲靖": [103.79, 25.51],
 47            "煙臺": [121.39, 37.52],
 48            "福州": [119.3, 26.08],
 49            "瓦房店": [121.979603, 39.627114],
 50            "即墨": [120.45, 36.38],
 51            "撫順": [123.97, 41.97],
 52            "玉溪": [102.52, 24.35],
 53            "張家口": [114.87, 40.82],
 54            "陽泉": [113.57, 37.85],
 55            "萊州": [119.942327, 37.177017],
 56            "湖州": [120.1, 30.86],
 57            "汕頭": [116.69, 23.39],
 58            "崑山": [120.95, 31.39],
 59            "寧波": [121.56, 29.86],
 60            "湛江": [110.359377, 21.270708],
 61            "揭陽": [116.35, 23.55],
 62            "榮成": [122.41, 37.16],
 63            "連雲港": [119.16, 34.59],
 64            "葫蘆島": [120.836932, 40.711052],
 65            "常熟": [120.74, 31.64],
 66            "東莞": [113.75, 23.04],
 67            "河源": [114.68, 23.73],
 68            "淮安": [119.15, 33.5],
 69            "泰州": [119.9, 32.49],
 70            "南寧": [108.33, 22.84],
 71            "營口": [122.18, 40.65],
 72            "惠州": [114.4, 23.09],
 73            "江陰": [120.26, 31.91],
 74            "蓬萊": [120.75, 37.8],
 75            "韶關": [113.62, 24.84],
 76            "嘉峪關": [98.289152, 39.77313],
 77            "廣州": [113.23, 23.16],
 78            "延安": [109.47, 36.6],
 79            "太原": [112.53, 37.87],
 80            "清遠": [113.01, 23.7],
 81            "中山": [113.38, 22.52],
 82            "昆明": [102.73, 25.04],
 83            "壽光": [118.73, 36.86],
 84            "盤錦": [122.070714, 41.119997],
 85            "長治": [113.08, 36.18],
 86            "深圳": [114.07, 22.62],
 87            "珠海": [113.52, 22.3],
 88            "宿遷": [118.3, 33.96],
 89            "咸陽": [108.72, 34.36],
 90            "銅川": [109.11, 35.09],
 91            "平度": [119.97, 36.77],
 92            "佛山": [113.11, 23.05],
 93            "海口": [110.35, 20.02],
 94            "江門": [113.06, 22.61],
 95            "章丘": [117.53, 36.72],
 96            "肇慶": [112.44, 23.05],
 97            "大連": [121.62, 38.92],
 98            "臨汾": [111.5, 36.08],
 99            "吳江": [120.63, 31.16],
100            "石嘴山": [106.39, 39.04],
101            "瀋陽": [123.38, 41.8],
102            "蘇州": [120.62, 31.32],
103            "茂名": [110.88, 21.68],
104            "嘉興": [120.76, 30.77],
105            "長春": [125.35, 43.88],
106            "膠州": [120.03336, 36.264622],
107            "銀川": [106.27, 38.47],
108            "張家港": [120.555821, 31.875428],
109            "三門峽": [111.19, 34.76],
110            "錦州": [121.15, 41.13],
111            "南昌": [115.89, 28.68],
112            "柳州": [109.4, 24.33],
113            "三亞": [109.511909, 18.252847],
114            "自貢": [104.778442, 29.33903],
115            "吉林": [126.57, 43.87],
116            "陽江": [111.95, 21.85],
117            "瀘州": [105.39, 28.91],
118            "西寧": [101.74, 36.56],
119            "宜賓": [104.56, 29.77],
120            "呼和浩特": [111.65, 40.82],
121            "成都": [104.06, 30.67],
122            "大同": [113.3, 40.12],
123            "鎮江": [119.44, 32.2],
124            "桂林": [110.28, 25.29],
125            "張家界": [110.479191, 29.117096],
126            "宜興": [119.82, 31.36],
127            "北海": [109.12, 21.49],
128            "西安": [108.95, 34.27],
129            "金壇": [119.56, 31.74],
130            "東營": [118.49, 37.46],
131            "牡丹江": [129.58, 44.6],
132            "遵義": [106.9, 27.7],
133            "紹興": [120.58, 30.01],
134            "揚州": [119.42, 32.39],
135            "常州": [119.95, 31.79],
136            "濰坊": [119.1, 36.62],
137            "重慶": [106.54, 29.59],
138            "台州": [121.420757, 28.656386],
139            "南京": [118.78, 32.04],
140            "濱州": [118.03, 37.36],
141            "貴陽": [106.71, 26.57],
142            "無錫": [120.29, 31.59],
143            "本溪": [123.73, 41.3],
144            "克拉瑪依": [84.77, 45.59],
145            "渭南": [109.5, 34.52],
146            "馬鞍山": [118.48, 31.56],
147            "寶雞": [107.15, 34.38],
148            "焦做": [113.21, 35.24],
149            "句容": [119.16, 31.95],
150            "北京": [116.46, 39.92],
151            "徐州": [117.2, 34.26],
152            "衡水": [115.72, 37.72],
153            "包頭": [110, 40.58],
154            "綿陽": [104.73, 31.48],
155            "烏魯木齊": [87.68, 43.77],
156            "棗莊": [117.57, 34.86],
157            "杭州": [120.19, 30.26],
158            "淄博": [118.05, 36.78],
159            "鞍山": [122.85, 41.12],
160            "溧陽": [119.48, 31.43],
161            "庫爾勒": [86.06, 41.68],
162            "安陽": [114.35, 36.1],
163            "開封": [114.35, 34.79],
164            "濟南": [117, 36.65],
165            "德陽": [104.37, 31.13],
166            "溫州": [120.65, 28.01],
167            "九江": [115.97, 29.71],
168            "邯鄲": [114.47, 36.6],
169            "臨安": [119.72, 30.23],
170            "蘭州": [103.73, 36.03],
171            "滄州": [116.83, 38.33],
172            "臨沂": [118.35, 35.05],
173            "南充": [106.110698, 30.837793],
174            "天津": [117.2, 39.13],
175            "富陽": [119.95, 30.07],
176            "泰安": [117.13, 36.18],
177            "諸暨": [120.23, 29.71],
178            "鄭州": [113.65, 34.76],
179            "哈爾濱": [126.63, 45.75],
180            "聊城": [115.97, 36.45],
181            "蕪湖": [118.38, 31.33],
182            "唐山": [118.02, 39.63],
183            "平頂山": [113.29, 33.75],
184            "邢臺": [114.48, 37.05],
185            "德州": [116.29, 37.45],
186            "濟寧": [116.59, 35.38],
187            "荊州": [112.239741, 30.335165],
188            "宜昌": [111.3, 30.7],
189            "義烏": [120.06, 29.32],
190            "麗水": [119.92, 28.45],
191            "洛陽": [112.44, 34.7],
192            "秦皇島": [119.57, 39.95],
193            "株洲": [113.16, 27.83],
194            "石家莊": [114.48, 38.03],
195            "萊蕪": [117.67, 36.19],
196            "常德": [111.69, 29.05],
197            "保定": [115.48, 38.85],
198            "湘潭": [112.91, 27.87],
199            "金華": [119.64, 29.12],
200            "岳陽": [113.09, 29.37],
201            "長沙": [113, 28.21],
202            "衢州": [118.88, 28.97],
203            "廊坊": [116.7, 39.53],
204            "菏澤": [115.480656, 35.23375],
205            "合肥": [117.27, 31.86],
206            "武漢": [114.31, 30.52],
207            "大慶": [125.03, 46.58]
208        };
209 
210        var convertData = function(data) {
211            var res = [];
212            for (var i = 0; i < data.length; i++) {
213                var geoCoord = geoCoordMap[data[i].name];
214                if (geoCoord) {
215                    res.push({
216                        name: data[i].name,
217                        value: geoCoord.concat(data[i].value)
218                    });
219                }
220            }
221            console.log(res)
222            return res;
223        };
224 
225        option = {
226            title: {
227                text: '測試bar3D、scatter3D、geo3D',
228                x: 'left',
229                top: "10",
230                textStyle: {
231                    color: '#000',
232                    fontSize: 14
233                }
234            },
235            tooltip: {
236                show: true,
237          // formatter:(params)=>{
238          //   let data = "測試1:"+params.name + "<br/>"+"值:"+ params.value[2]+"<br/>"+"地理座標:[" + params.value[0]+","+params.value[1] +"]";
239          //   return data;
240          // },
241      },
242      visualMap: [{
243        type: 'continuous',
244        seriesIndex: 0,
245        text: ['bar3D'],
246        calculable: true,
247        max: 300,
248        inRange: {
249            color: ['#87aa66', '#eba438', '#d94d4c']
250        }
251    }, {
252        type: 'continuous',
253        seriesIndex: 1,
254        text: ['scatter3D'],
255        left: 'right',
256        max: 100,
257        calculable: true,
258        inRange: {
259            color: ['#000', 'blue', 'purple']
260        }
261    }],
262    geo3D: {
263        map: 'china',
264        roam: true,
265        itemStyle: {
266            color: '#1d5e98',
267            opacity: 1,
268            borderWidth: 0.4,
269            borderColor: '#000'
270        },
271        label: {
272            show: true,
273            textStyle: {
274                  color: '#f00', //地圖初始化區域字體顏色
275                  fontSize: 8,
276                  opacity: 1,
277                  backgroundColor: 'rgba(0,23,11,0)'
278              },
279          },
280          emphasis: { //當鼠標放上去  地區區域是否顯示名稱
281            label: {
282                show: true,
283                textStyle: {
284                    color: '#fff',
285                    fontSize: 3,
286                    backgroundColor: 'rgba(0,23,11,0)'
287                }
288            }
289        },
290          //shading: 'lambert',
291          light: { //光照陰影
292            main: {
293                  color: '#fff', //光照顏色
294                  intensity: 1.2, //光照強度
295                  //shadowQuality: 'high', //陰影亮度
296                  shadow: false, //是否顯示陰影
297                  alpha:55,
298                  beta:10
299 
300              },
301              ambient: {
302                intensity: 0.3
303            }
304        }
305    },
306    series: [{
307        name: 'bar3D',
308        type: "bar3D",
309        coordinateSystem: 'geo3D',
310          barSize: 1, //柱子粗細
311          shading: 'lambert',
312          opacity: 1,
313          bevelSize:0.3,
314          label: {
315            show: false,
316            formatter: '{b}'
317        },
318        data: convertData([{
319            name: "海門",
320            value: (Math.random() * 300).toFixed(2)
321        }, {
322            name: "鄂爾多斯",
323            value: (Math.random() * 300).toFixed(2)
324        }, {
325            name: "招遠",
326            value: (Math.random() * 300).toFixed(2)
327        }, {
328            name: "舟山",
329            value: (Math.random() * 300).toFixed(2)
330        }, {
331            name: "齊齊哈爾",
332            value: (Math.random() * 300).toFixed(2)
333        }, {
334            name: "鹽城",
335            value: (Math.random() * 300).toFixed(2)
336        }, {
337            name: "赤峯",
338            value: (Math.random() * 300).toFixed(2)
339        }, {
340            name: "青島",
341            value: (Math.random() * 300).toFixed(2)
342        }, {
343            name: "乳山",
344            value: (Math.random() * 200).toFixed(2)
345        }, {
346            name: "金昌",
347            value: (Math.random() * 200).toFixed(2)
348        }, {
349            name: "泉州",
350            value: (Math.random() * 200).toFixed(2)
351        }, {
352            name: "萊西",
353            value: (Math.random() * 200).toFixed(2)
354        }, {
355            name: "日照",
356            value: (Math.random() * 300).toFixed(2)
357        }, {
358            name: "膠南",
359            value: (Math.random() * 300).toFixed(2)
360        }, {
361            name: "南通",
362            value: (Math.random() * 300).toFixed(2)
363        }, {
364            name: "拉薩",
365            value: (Math.random() * 300).toFixed(2)
366        }, {
367            name: "雲浮",
368            value: (Math.random() * 300).toFixed(2)
369        }, {
370            name: "梅州",
371            value: (Math.random() * 300).toFixed(2)
372        }, {
373            name: "文登",
374            value: (Math.random() * 300).toFixed(2)
375        }, {
376            name: "上海",
377            value: (Math.random() * 300).toFixed(2)
378        }, {
379            name: "攀枝花",
380            value: (Math.random() * 200).toFixed(2)
381        }, {
382            name: "威海",
383            value: (Math.random() * 200).toFixed(2)
384        }, {
385            name: "承德",
386            value: (Math.random() * 200).toFixed(2)
387        }, {
388            name: "廈門",
389            value: (Math.random() * 200).toFixed(2)
390        }, {
391            name: "汕尾",
392            value: (Math.random() * 200).toFixed(2)
393        }, {
394            name: "潮州",
395            value: (Math.random() * 200).toFixed(2)
396        }, {
397            name: "丹東",
398            value: (Math.random() * 200).toFixed(2)
399        }, {
400            name: "太倉",
401            value: (Math.random() * 200).toFixed(2)
402        }, {
403            name: "曲靖",
404            value: (Math.random() * 200).toFixed(2)
405        }, {
406            name: "煙臺",
407            value: (Math.random() * 200).toFixed(2)
408        }, {
409            name: "福州",
410            value: (Math.random() * 200).toFixed(2)
411        }, {
412            name: "瓦房店",
413            value: (Math.random() * 200).toFixed(2)
414        }, {
415            name: "即墨",
416            value: (Math.random() * 200).toFixed(2)
417        }, {
418            name: "撫順",
419            value: (Math.random() * 200).toFixed(2)
420        }, {
421            name: "玉溪",
422            value: (Math.random() * 200).toFixed(2)
423        },
424 
425 
426        {
427            name: "寧波",
428            value: (Math.random() * 200).toFixed(2)
429        }, {
430            name: "湛江",
431            value: (Math.random() * 200).toFixed(2)
432        }, {
433            name: "揭陽",
434            value: (Math.random() * 200).toFixed(2)
435        }, {
436            name: "榮成",
437            value: (Math.random() * 200).toFixed(2)
438        }, {
439            name: "連雲港",
440            value: (Math.random() * 200).toFixed(2)
441        }, {
442            name: "葫蘆島",
443            value: (Math.random() * 200).toFixed(2)
444        }, {
445            name: "常熟",
446            value: (Math.random() * 200).toFixed(2)
447        }, {
448            name: "東莞",
449            value: (Math.random() * 200).toFixed(2)
450        }, {
451            name: "河源",
452            value: (Math.random() * 200).toFixed(2)
453        }, {
454            name: "淮安",
455            value: (Math.random() * 200).toFixed(2)
456        }, {
457            name: "泰州",
458            value: (Math.random() * 200).toFixed(2)
459        }, {
460            name: "南寧",
461            value: (Math.random() * 200).toFixed(2)
462        }, {
463            name: "營口",
464            value: (Math.random() * 200).toFixed(2)
465        }, {
466            name: "惠州",
467            value: (Math.random() * 200).toFixed(2)
468        }, {
469            name: "江陰",
470            value: (Math.random() * 200).toFixed(2)
471        }, {
472            name: "蓬萊",
473            value: (Math.random() * 200).toFixed(2)
474        }, {
475            name: "韶關",
476            value: (Math.random() * 200).toFixed(2)
477        }, {
478            name: "嘉峪關",
479            value: (Math.random() * 200).toFixed(2)
480        }, {
481            name: "廣州",
482            value: (Math.random() * 200).toFixed(2)
483        }, {
484            name: "延安",
485            value: (Math.random() * 200).toFixed(2)
486        }, {
487            name: "太原",
488            value: (Math.random() * 200).toFixed(2)
489        }, {
490            name: "清遠",
491            value: (Math.random() * 200).toFixed(2)
492        }, {
493            name: "中山",
494            value: (Math.random() * 200).toFixed(2)
495        }, {
496            name: "昆明",
497            value: (Math.random() * 200).toFixed(2)
498        }, {
499            name: "壽光",
500            value: (Math.random() * 200).toFixed(2)
501        }, {
502            name: "盤錦",
503            value: (Math.random() * 200).toFixed(2)
504        }, {
505            name: "長治",
506            value: (Math.random() * 300).toFixed(2)
507        }, {
508            name: "深圳",
509            value: (Math.random() * 200).toFixed(2)
510        }, {
511            name: "珠海",
512            value: (Math.random() * 200).toFixed(2)
513        }, {
514            name: "宿遷",
515            value: (Math.random() * 300).toFixed(2)
516        }, {
517            name: "咸陽",
518            value: (Math.random() * 300).toFixed(2)
519        }, {
520            name: "銅川",
521            value: (Math.random() * 300).toFixed(2)
522        }, {
523            name: "平度",
524            value: (Math.random() * 300).toFixed(2)
525        }, {
526            name: "佛山",
527            value: (Math.random() * 300).toFixed(2)
528        }, {
529            name: "海口",
530            value: (Math.random() * 300).toFixed(2)
531        }, {
532            name: "江門",
533            value: (Math.random() * 200).toFixed(2)
534        }, {
535            name: "章丘",
536            value: (Math.random() * 200).toFixed(2)
537        }, {
538            name: "肇慶",
539            value: (Math.random() * 300).toFixed(2)
540        }, {
541            name: "大連",
542            value: (Math.random() * 200).toFixed(2)
543        }, {
544            name: "臨汾",
545            value: (Math.random() * 300).toFixed(2)
546        }, {
547            name: "吳江",
548            value: (Math.random() * 200).toFixed(2)
549        }, {
550            name: "石嘴山",
551            value: (Math.random() * 200).toFixed(2)
552        }, {
553            name: "瀋陽",
554            value: (Math.random() * 200).toFixed(2)
555        }, {
556            name: "蘇州",
557            value: (Math.random() * 200).toFixed(2)
558        }, {
559            name: "茂名",
560            value: (Math.random() * 200).toFixed(2)
561        }, {
562            name: "嘉興",
563            value: (Math.random() * 200).toFixed(2)
564        }, {
565            name: "長春",
566            value: (Math.random() * 300).toFixed(2)
567        }, {
568            name: "膠州",
569            value: (Math.random() * 200).toFixed(2)
570        }, {
571            name: "銀川",
572            value: (Math.random() * 200).toFixed(2)
573        }, {
574            name: "張家港",
575            value: (Math.random() * 200).toFixed(2)
576        }, {
577            name: "三門峽",
578            value: (Math.random() * 200).toFixed(2)
579        }, {
580            name: "錦州",
581            value: (Math.random() * 200).toFixed(2)
582        }, {
583            name: "南昌",
584            value: (Math.random() * 200).toFixed(2)
585        }, {
586            name: "柳州",
587            value: (Math.random() * 200).toFixed(2)
588        }, {
589            name: "三亞",
590            value: (Math.random() * 300).toFixed(2)
591        }, {
592            name: "自貢",
593            value: (Math.random() * 200).toFixed(2)
594        }, {
595            name: "吉林",
596            value: (Math.random() * 200).toFixed(2)
597        }, {
598            name: "陽江",
599            value: (Math.random() * 200).toFixed(2)
600        }, {
601            name: "瀘州",
602            value: (Math.random() * 200).toFixed(2)
603        }, {
604            name: "西寧",
605            value: (Math.random() * 200).toFixed(2)
606        }, {
607            name: "宜賓",
608            value: (Math.random() * 200).toFixed(2)
609        }, {
610            name: "呼和浩特",
611            value: (Math.random() * 200).toFixed(2)
612        }, {
613            name: "成都",
614            value: (Math.random() * 200).toFixed(2)
615        }, {
616            name: "大同",
617            value: (Math.random() * 200).toFixed(2)
618        }, {
619            name: "鎮江",
620            value: (Math.random() * 100).toFixed(2)
621        }, {
622            name: "桂林",
623            value: (Math.random() * 200).toFixed(2)
624        }, {
625            name: "張家界",
626            value: (Math.random() * 200).toFixed(2)
627        }, {
628            name: "宜興",
629            value: (Math.random() * 200).toFixed(2)
630        }, {
631            name: "北海",
632            value: (Math.random() * 200).toFixed(2)
633        }, {
634            name: "西安",
635            value: (Math.random() * 200).toFixed(2)
636        }, {
637            name: "金壇",
638            value: (Math.random() * 200).toFixed(2)
639        },
640 
641        {
642            name: "包頭",
643            value: (Math.random() * 200).toFixed(2)
644        }, {
645            name: "綿陽",
646            value: (Math.random() * 200).toFixed(2)
647        }, {
648            name: "烏魯木齊",
649            value: (Math.random() * 200).toFixed(2)
650        }, {
651            name: "棗莊",
652            value: (Math.random() * 200).toFixed(2)
653        }, {
654            name: "杭州",
655            value: (Math.random() * 200).toFixed(2)
656        }, {
657            name: "淄博",
658            value: (Math.random() * 200).toFixed(2)
659        }, {
660            name: "鞍山",
661            value: (Math.random() * 200).toFixed(2)
662        }, {
663            name: "溧陽",
664            value: (Math.random() * 200).toFixed(2)
665        }, {
666            name: "庫爾勒",
667            value: (Math.random() * 200).toFixed(2)
668        }, {
669            name: "安陽",
670            value: (Math.random() * 200).toFixed(2)
671        }, {
672            name: "開封",
673            value: (Math.random() * 200).toFixed(2)
674        }, {
675            name: "濟南",
676            value: (Math.random() * 100).toFixed(2)
677        }, {
678            name: "德陽",
679            value: (Math.random() * 200).toFixed(2)
680        }, {
681            name: "溫州",
682            value: (Math.random() * 200).toFixed(2)
683        }, {
684            name: "九江",
685            value: (Math.random() * 100).toFixed(2)
686        }, {
687            name: "邯鄲",
688            value: (Math.random() * 200).toFixed(2)
689        }, {
690            name: "臨安",
691            value: (Math.random() * 100).toFixed(2)
692        }, {
693            name: "蘭州",
694            value: (Math.random() * 200).toFixed(2)
695        }, {
696            name: "滄州",
697            value: (Math.random() * 200).toFixed(2)
698        },
699 
700        {
701            name: "秦皇島",
702            value: (Math.random() * 200).toFixed(2)
703        }, {
704            name: "株洲",
705            value: (Math.random() * 200).toFixed(2)
706        }, {
707            name: "石家莊",
708            value: (Math.random() * 200).toFixed(2)
709        }, {
710            name: "萊蕪",
711            value: (Math.random() * 200).toFixed(2)
712        }, {
713            name: "常德",
714            value: (Math.random() * 200).toFixed(2)
715        }, {
716            name: "保定",
717            value: (Math.random() * 200).toFixed(2)
718        }, {
719            name: "湘潭",
720            value: (Math.random() * 100).toFixed(2)
721        }, {
722            name: "金華",
723            value: (Math.random() * 200).toFixed(2)
724        }, {
725            name: "岳陽",
726            value: (Math.random() * 200).toFixed(2)
727        }, {
728            name: "長沙",
729            value: (Math.random() * 100).toFixed(2)
730        }, {
731            name: "衢州",
732            value: (Math.random() * 200).toFixed(2)
733        }, {
734            name: "廊坊",
735            value: (Math.random() * 200).toFixed(2)
736        }, {
737            name: "菏澤",
738            value: (Math.random() * 100).toFixed(2)
739        }, {
740            name: "合肥",
741            value: (Math.random() * 200).toFixed(2)
742        }, {
743            name: "武漢",
744            value: (Math.random() * 200).toFixed(2)
745        }, {
746            name: "大慶",
747            value: (Math.random() * 200).toFixed(2)
748        }
749        ]),
750 }, {
751    name: 'scatter3D',
752    type: "scatter3D",
753    coordinateSystem: 'geo3D',
754    symbol: 'pin',
755    symbolSize: 30,
756    opacity: 1,
757    label: {
758        show: false,
759        formatter: '{b}'
760    },
761    itemStyle: {
762        borderWidth: 0.5,
763        borderColor: '#fff'
764    },
765    data: convertData([{
766        name: "陽泉",
767        value: ((Math.random() * 100) + 50).toFixed(2)
768    }, {
769        name: "萊州",
770        value: ((Math.random() * 100) + 50).toFixed(2)
771    }, {
772        name: "湖州",
773        value: ((Math.random() * 100) + 50).toFixed(2)
774    }, {
775        name: "汕頭",
776        value: ((Math.random() * 100) + 50).toFixed(2)
777    }, {
778        name: "崑山",
779        value: ((Math.random() * 100) + 50).toFixed(2)
780    }, {
781        name: "張家口",
782        value: ((Math.random() * 100) + 50).toFixed(2)
783    }])
784 }]
785 }
786 echarts.init(document.getElementById('main')).setOption(option);
787 </script>
788 </body>
789 </html>

View Code

【tip】echarts-gl 如何給每一個省市設置顏色（感謝評論區盆友博納圖給出的連接）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。