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

Posted carsonwuu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts之类型3D(map，bar3D,scatter3D)相关的知识，希望对你有一定的参考价值。

ECharts之类型3D(3D地图)

相关js源码下载：

1.世界地图.js，中国地图.js，中国各省份地图.js

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

2.echarts基础报表js源文件（echarts.min.js）

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

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

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

 

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

 

效果图：

1.广东地图

 

2.中国地图

 源码：1、（广东地图）

  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以上是关于ECharts之类型3D(map，bar3D,scatter3D)的主要内容，如果未能解决你的问题，请参考以下文章
 

 Echarts立体地图加3D柱图可点击可高亮选中的开发


 怎么用echarts实现3D柱状图？求大佬写出代码，如下图


 学习笔记python - pyecharts


 如果高度为零，Matplotlib 在 bar3d 中隐藏栏


 echarts  3D地图


 如何在 matplotlib 中为 3D 条形图创建图例？