devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：不正经 | 2024-02-15 09:03:25

赞

踩

echarts bar3d

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、（广东地图）

广东省3D 
<style type="text/css">
#main {
    width:100%;
    border:2px solid green;
    height: 500px;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

2.（中国地图）源码：

3D中国 
<script src='china.js'></script>
<style>#main {width:1000px; height: 500px;margin: auto;border:2px solid green;}</style>

  • 1
  • 2

}, {
type: ‘continuous’,
seriesIndex: 1,
text: [‘scatter3D’],
left: ‘right’,
max: 100,
calculable: true,
inRange: {
color: [‘#000’, ‘blue’, ‘purple’]
}
}],
geo3D: {
map: ‘china’,
roam: true,
itemStyle: {
color: ‘#1d5e98’,
opacity: 1,
borderWidth: 0.4,
borderColor: ‘#000’
},
label: {
show: true,
textStyle: {
color: ‘#f00’, //地图初始化区域字体颜色
fontSize: 8,
opacity: 1,
backgroundColor: ‘rgba(0,23,11,0)’
},
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: ‘#fff’,
fontSize: 3,
backgroundColor: ‘rgba(0,23,11,0)’
}
}
},
//shading: ‘lambert’,
light: { //光照阴影
main: {
color: ‘#fff’, //光照颜色
intensity: 1.2, //光照强度
//shadowQuality: ‘high’, //阴影亮度
shadow: false, //是否显示阴影
alpha:55,
beta:10

         },
         ambient: {
           intensity: 0.3
       }
   }

  • 1
  • 2
  • 3
  • 4
  • 5

},
series: [{
name: ‘bar3D’,
type: “bar3D”,
coordinateSystem: ‘geo3D’,
barSize: 1, //柱子粗细
shading: ‘lambert’,
opacity: 1,
bevelSize:0.3,
label: {
show: false,
formatter: ‘{b}’
},
data: convertData([{
name: “海门”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “鄂尔多斯”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “招远”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “舟山”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “齐齐哈尔”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “盐城”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “赤峰”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “青岛”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “乳山”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “金昌”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “泉州”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “莱西”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “日照”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “胶南”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “南通”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “拉萨”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “云浮”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “梅州”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “文登”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “上海”,
value: (Math.random() * 300).toFixed(2)
}, {
name: “攀枝花”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “威海”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “承德”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “厦门”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “汕尾”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “潮州”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “丹东”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “太仓”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “曲靖”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “烟台”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “福州”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “瓦房店”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “即墨”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “抚顺”,
value: (Math.random() * 200).toFixed(2)
}, {
name: “玉溪”,
value: (Math.random() * 200).toFixed(2)
},

   {
       name: "宁波",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "湛江",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "揭阳",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "荣成",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "连云港",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "葫芦岛",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "常熟",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "东莞",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "河源",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "淮安",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "泰州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "南宁",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "营口",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "惠州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "江阴",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "蓬莱",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "韶关",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "嘉峪关",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "广州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "延安",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "太原",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "清远",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "中山",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "昆明",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "寿光",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "盘锦",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "长治",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "深圳",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "珠海",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "宿迁",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "咸阳",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "铜川",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "平度",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "佛山",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "海口",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "江门",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "章丘",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "肇庆",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "大连",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "临汾",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "吴江",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "石嘴山",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "沈阳",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "苏州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "茂名",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "嘉兴",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "长春",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "胶州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "银川",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "张家港",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "三门峡",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "锦州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "南昌",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "柳州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "三亚",
       value: (Math.random() * 300).toFixed(2)
   }, {
       name: "自贡",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "吉林",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "阳江",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "泸州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "西宁",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "宜宾",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "呼和浩特",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "成都",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "大同",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "镇江",
       value: (Math.random() * 100).toFixed(2)
   }, {
       name: "桂林",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "张家界",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "宜兴",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "北海",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "西安",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "金坛",
       value: (Math.random() * 200).toFixed(2)
   },

   {
       name: "包头",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "绵阳",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "乌鲁木齐",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "枣庄",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "杭州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "淄博",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "鞍山",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "溧阳",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "库尔勒",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "安阳",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "开封",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "济南",
       value: (Math.random() * 100).toFixed(2)
   }, {
       name: "德阳",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "温州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "九江",
       value: (Math.random() * 100).toFixed(2)
   }, {
       name: "邯郸",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "临安",
       value: (Math.random() * 100).toFixed(2)
   }, {
       name: "兰州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "沧州",
       value: (Math.random() * 200).toFixed(2)
   },

   {
       name: "秦皇岛",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "株洲",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "石家庄",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "莱芜",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "常德",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "保定",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "湘潭",
       value: (Math.random() * 100).toFixed(2)
   }, {
       name: "金华",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "岳阳",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "长沙",
       value: (Math.random() * 100).toFixed(2)
   }, {
       name: "衢州",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "廊坊",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "菏泽",
       value: (Math.random() * 100).toFixed(2)
   }, {
       name: "合肥",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "武汉",
       value: (Math.random() * 200).toFixed(2)
   }, {
       name: "大庆",
       value: (Math.random() * 200).toFixed(2)
   }
   ]),

  • 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
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324

}, {
name: ‘scatter3D’,
type: “scatter3D”,
coordinateSystem: ‘geo3D’,
symbol: ‘pin’,
symbolSize: 30,
opacity: 1,
label: {
show: false,
formatter: ‘{b}’
},
itemStyle: {
borderWidth: 0.5,
borderColor: ‘#fff’
},
data: convertData([{
name: “阳泉”,
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: “莱州”,
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: “湖州”,
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: “汕头”,
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: “昆山”,
value: ((Math.random() * 100) + 50).toFixed(2)
}, {
name: “张家口”,
value: ((Math.random() * 100) + 50).toFixed(2)
}])
}]
}
echarts.init(document.getElementById(‘main’)).setOption(option);

【tip】echarts-gl 如何给每个省市设置颜色（感谢评论区盆友博纳图给出的链接）在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/82980
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号