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

最新推荐文章于 2024-07-02 10:45:19 发布

aoayyu826824

最新推荐文章于 2024-07-02 10:45:19 发布

阅读量3.4k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/carsonwuu/p/8327578.html

版权

本文介绍了如何使用ECharts创建3D地图、3D柱状图和3D散点图。提供了世界地图、中国地图及各省份地图的JavaScript源码下载链接，并展示了广东地图和中国地图的3D效果。源码和详细教程可在原文链接中获取。

摘要由CSDN通过智能技术生成

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, 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],
<