echarts-x

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
  <head>
    <title>map3d</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${ctxStatic}/echartsx/css/common.css">
    <link rel="stylesheet" href="${ctxStatic}/echartsx/css/example.css">
    <link rel="stylesheet" href="${ctxStatic}/echartsx/css/codemirror.css">
    <link rel="stylesheet" href="${ctxStatic}/echartsx/css/monokai.css">
    <link rel="stylesheet" href="${ctxStatic}/echartsx/css/twilight.css">
    	<style>
	  		#main { position:relative; top:0; bottom:0; width:100%; height:100%;}
	</style>
  </head>
  <body>
  	<div id="main"></div>
     <script src="${ctxStatic}/echartsx/lib/echarts/echarts.js"></script>
     <script src="${ctxStatic}/echartsx/lib/echarts-x/echarts-x.js"></script>
     <script type="text/javascript">
     	require.config({
     		paths: {
     			'echarts': '${ctxStatic}/echartsx/lib/echarts/',
     			'echarts-x': '${ctxStatic}/echartsx/lib/echarts-x'
     		}
     	});
     	require([
     		'echarts',
     		'echarts-x',
     		'echarts/chart/map',
     		'echarts-x/chart/map3d'
     	],function(ec){
     		var myChart = ec.init(document.getElementById('main'));
     		myChart.setOption({
     		    title: {
     		        text: '目标沙盘',
     		        x: 'center',
     		        textStyle: {
     		            color: 'white'
     		        }
     		    },
     		    tooltip: {
     		        formatter: '{b}'
     		    },
     		    series: [{
     		        type: 'map3d',
     		        mapType: 'world',
     		        baseLayer: {
     		            backgroundColor: '',
     		            backgroundImage: '${ctxStatic}/echartsx/asset/earth.jpg',
     		            quality: 'high',
     		        },

     		        surfaceLayers: [{
     		            type: 'texture',
     		            distance: 3,
     		            image: '${ctxStatic}/echartsx/asset/clouds.png'
     		        }],

     		        selectedMode: 'single',

     		        itemStyle: {
     		            normal: {
     		                label: {
     		                    show: true
     		                },
     		                borderWidth: 1,
     		                borderColor: 'yellow',
     		                areaStyle: {
     		                    color: 'rgba(0, 0, 0, 0)'
     		                }
     		            }
     		        },
     		        data: [{}]
     		    }]
     		});
     	})
     </script>
  </body>
</html>
posted @ 2017-03-09 16:58  蚂蚁都督  阅读(301)  评论(0编辑  收藏  举报