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、(广东地图)

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

2.(中国地图)源码:

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

}, {
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
       }
   }

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

}, {
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 如何给每个省市设置颜色(感谢评论区盆友博纳图给出的链接)在这里插入图片描述

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值