ECharts3D地图 简单制作省份地图
<!DOCTYPE html>
<html>
<head>
? ? <title>廣東省3D</title>
? ? <meta http-equiv="content-type" content="text/html; charset=utf-8">
? ? <script src="js/echarts.min.js"></script>
? ? <script src="js/echarts-gl.js"></script>
? ? <script src="js/guangdong.js"></script>
? ? <style type="text/css">
? ? #main {
? ? ? ? width:100%;
? ? ? ? border:2px solid green;
? ? ? ? height: 500px;
? ? }
</style>
</head>
<body>
? ? <div id="main"></div>
? ? <script type="text/javascript">
? ? ? ? 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']}]
? ? ? ? var chart = echarts.init(document.getElementById('main'));
? ? ? ? var min=0,max=300;
? ? ? ? var option = {
? ? ? ? ? ? tooltip:{
? ? ? ? ? ? ? ? formatter:function(params){
? ? ? ? ? ? ? ? ? ? var content='',
? ? ? ? ? ? ? ? ? ? content=params.name+params.value[0]+params.value[1];
? ? ? ? ? ? ? ? ? ? return content;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? backgroundColor:'#fff',
? ? ? ? ? ? visualMap: {
? ? ? ? ? ? ? ? show: false,
? ? ? ? ? ? ? ? min: min,
? ? ? ? ? ? ? ? max: max,
? ? ? ? ? ? ? ? inRange: {
? ? ? ? ? ? ? ? ? ? color: ['#e0ffff', '#006edd']
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? calculable:true
? ? ? ? ? ? },
? ? ? ? ? ? series: {
? ? ? ? ? ? ? ? name:'廣東',
? ? ? ? ? ? ? ? type: 'map3D',
? ? ? ? ? ? ? ? map: '廣東',
? ? ? ? ? ? ? ? data:city,
? ? ? ? ? ? ? ? regionHeight: 2,
? ? ? ? ? ? ? ? boxWidth:70,
? ? ? ? ? ? ? ? //boxHeight:50,
? ? ? ? ? ? ? ? boxDepth:50,
? ? ? ? ? ? ? ? top:'-10%',
? ? ? ? ? ? ? ?//left:'10%',
? ? ? ? ? ? ? ?label: {
? ? ? ? ? ? ? ? ? ? show:true,
? ? ? ? ? ? ? ? ? ? formatter:function(params){
? ? ? ? ? ? ? ? ? ? ? ? var content='',
? ? ? ? ? ? ? ? ? ? ? ? content=params.name;
? ? ? ? ? ? ? ? ? ? ? ? return content;
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? textStyle:{
? ? ? ? ? ? ? ? ? ? ? ? color:'#EECBAD',
? ? ? ? ? ? ? ? ? ? ? ? fontWeight : 'normal',
? ? ? ? ? ? ? ? ? ? ? ? fontSize : 5,
? ? ? ? ? ? ? ? ? ? ? ? backgroundColor: 'rgba(0,23,11,0)'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? emphasis: {//對應的鼠標懸浮效果
? ? ? ? ? ? ? ? ? ? ? ? show: true,
? ? ? ? ? ? ? ? ? ? ? ? textStyle:{color:"#f00"}
? ? ? ? ? ? ? ? ? ? }?
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? itemStyle: {
? ? ? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? borderWidth: 0.4
? ? ? ? ? ? ? ? ? ? ? ? }, //陰影效果
? ? ? ? ? ? ? ? ? ? ? ? emphasis: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? color: 'rgb(255,255,255)'
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? viewControl: {
? ? ? ? ? ? ? ? ? ? ? ? autoRotate: false,
? ? ? ? ? ? ? ? ? ? ? ? distance: 70
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? ? ? chart.setOption(option);
? ? ? ? ? ? ? ? chart.on('click', function (params) {
? ? ? ? ? ? ? ? var cout=params.data.name;
? ? ? ? ? ? ? ? //window.open('https://www.baidu.com');
? ? ? ? ? ? ? ? console.log(params);
? ? ? ? ? ? });
? ? ? ? </script>
? ? </body>
? ? </html>
總結
以上是生活随笔為你收集整理的ECharts3D地图 简单制作省份地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Maven Compile 编译报错
- 下一篇： 算法养成：弱鸡大学生浅谈c++stl