使用echarts做3D地图与3D柱状图_geo3d exists.

3D地图与3D柱状图的联合使用

开始着手对于3d图形的研究，今天写了个demo，3D地图与3D柱状图联合使用，效果大概是这样：

我已经放入了echarts的gallery里，地址：demo地址

在此期间可能会遇到一些问题，例如：
1.Uncaught Error: Component series.bar3D not exists. Load it first.

此时，是因为缺少echarts-gl的包，npm install echarts-gl 后，在代码里require('echarts-gl'); 就可以了
2.发现代码中的geo3D.areaStyle，更改后对背景色并没有作用，经过比对后发现，在echarts的gallery的地址里，echarts-gl的包是1.0.0-beta.5版本，而echarts本身的demo以及最新下载的是1.1.1版本，暂时可以将echarts-gl地址（1.0.0-beta.5版本）进行下载，require这个版本。

最后，附上简洁的option吧～

// 经纬度，值
 let data = [
     [116.41433, 39.91095, 10],
     [117.191041, 39.134857, 20],
     [114.511934, 38.058785, 30],
     [112.543424, 37.887658, 40],
     [111.694848, 40.836106, 50]
 ];
 option = {
     title: {
         text: '3D地图与3D柱状图'
     },
     geo3D: {
         map: 'china',
         itemStyle: {
             areaColor: '#001242',
             opacity: 1,
             borderWidth: 0.8,
             borderColor: '#fff'
         },
         label: {
             show: true,
             textStyle: {
                 color: '#fff',
                 fontSize: 16,
                 opacity: 1,
                 backgroundColor: 'rgba(0,0,0,0)'
             }
         },
         emphasis: {
             label: {
                 show: true,
                 textStyle: {
                     color: '#27a5b8',
                     fontSize: 14
                 }
             }
         },
         light: {
             main: {
                 color: '#fff',
                 intensity: 1.2,
                 shadow: false,
                 alpha: 50,
                 beta: 10
             },
             ambient: {
                 intensity: 0.3
             }
         }
     },
     series: [{
         type: 'bar3D',
         coordinateSystem: 'geo3D',
         shading: 'lambert',
         data: data,
         barSize: 1,
         minHeight: 1,
         silent: true,
         itemStyle: {
             color: 'orange'
         }
     }]
 };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64