doc/example/map8.html - echarts-www - Git at Google

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta name="robots" content="noindex, nofollow">
     <title>ECharts2 · Example</title>

     <link rel="shortcut icon" href="../asset/ico/favicon.png">

     <link href="../asset/css/font-awesome.min.css" rel="stylesheet">
     <link href="../asset/css/bootstrap.css" rel="stylesheet">
     <link href="../asset/css/carousel.css" rel="stylesheet">
     <link href="../asset/css/echartsHome.css" rel="stylesheet">
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->

     <script src="./www/js/echarts.js"></script>
     <script src="../asset/js/codemirror.js"></script>
     <script src="../asset/js/javascript.js"></script>

     <link href="../asset/css/codemirror.css" rel="stylesheet">
     <link href="../asset/css/monokai.css" rel="stylesheet">

     <style type="text/css">
         .CodeMirror {
             height: 550px;
         }
     </style>
 </head>

 <body>
     <!-- Fixed navbar -->
     <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>


     <div class="container-fluid">
         <div class="row-fluid example">
             <div id="sidebar-code" class="col-md-4">
                 <div class="well sidebar-nav">
                     <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
                     <textarea id="code" name="code">
 var itemStyle = {
     normal:{label:{
         show:true,
         formatter:'{b}',
         textStyle: {fontSize: 20,fontWeight : 'bold'}
     }},
     emphasis:{label:{show:true}}
 };
 option = {
     title : {
         text : '2012 World GDP Top 8',
         subtext : 'from baike （Billion $）',
         sublink : 'http://baike.baidu.com/link?url=MyQikkoGI08hUfVmiB0g01ZJ6Wpyu18s8e6XdA3dwcI73-i0J7Ce32LuPNqfEWBj2rUcSfIHYIVI0aL8czbS_a',
         x : 'center'
     },
     tooltip : {
         trigger: 'item',
         showDelay: 0,
         transitionDuration: 0.2,
         formatter : function (params) {
             var value = params.value + '';
             value = value.replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
             return params.seriesName + '<br/>' + value + ' Billion';
         }
     },
     toolbox: {
         show : true,
         x: 'right',
         y: 'bottom',
         feature : {
             mark : {show: true},
             dataView : {show: true, readOnly: false},
             restore : {show: true},
             saveAsImage : {show: true}
         }
     },
     dataRange: {
         orient: 'horizontal',
         x : 'center',
         y: 'center',
         min: 2000,
         max: 16000,
         splitNumber: 0,            // 分割段数，默认为5
         text:['16,000B','2,000B'],
         calculable : true,
         itemWidth:40,
         color: ['orangered','yellow','lightskyblue']
     },
     series : [
         {
             name: 'USA',
             type: 'map',
             mapType: 'world|United States of America',
             mapLocation: {x:'5%', y:'10%',width:'22%',height:'35%'},
             itemStyle: itemStyle,
             data:[
                 {name : 'United States of America', value : 15684.7}
             ]
         },
         {
             name: 'China',
             type: 'map',
             mapType: 'world|China',
             mapLocation: {x:'30%', y:'10%',width:'22%',height:'35%'},
             itemStyle: itemStyle,
             itemStyle: itemStyle,
             data:[
                 {name : 'China', value : 8227}
             ]
         },
         {
             name: 'Japan',
             type: 'map',
             mapType: 'world|Japan',
             mapLocation: {x:'55%', y:'10%',width:'22%',height:'35%'},
             itemStyle: itemStyle,
             data:[
                 {name : 'Japan', value : 5963.9}
             ]
         },
         {
             name: 'Germany',
             type: 'map',
             mapType: 'world|Germany',
             mapLocation: {x:'76%', y:'10%',width:'22%',height:'35%'},
             itemStyle: itemStyle,
             data:[
                 {name : 'Germany', value : 3400.5}
             ]
         },
         {
             name: 'France',
             type: 'map',
             mapType: 'world|France',
             mapLocation: {x:'5%', y:'60%',width:'22%',height:'35%'},
             itemStyle: itemStyle,
             data:[
                 {name : 'France', value : 2608.6}
             ]
         },
         {
             name: 'United Kingdom',
             type: 'map',
             mapType: 'world|United Kingdom',
             mapLocation: {x:'33%', y:'60%',width:'22%',height:'35%'},
             itemStyle: itemStyle,
             data:[
                 {name : 'United Kingdom', value : 2440.5}
             ]
         },
         {
             name: 'Brazil',
             type: 'map',
             mapType: 'world|Brazil',
             mapLocation: {x:'55%', y:'60%',width:'22%',height:'35%'},
             itemStyle: itemStyle,
             data:[
                 {name : 'Brazil', value : 2395.9}
             ]
         },
         {
             name: 'Russia',
             type: 'map',
             mapType: 'world|Russia',
             mapLocation: {x:'76%', y:'70%',width:'22%',height:'35%'},
             itemStyle: itemStyle,
             data:[
                 {name : 'Russia', value : 2021.9}
             ]
         }
     ]
 };
                     </textarea>
               </div><!--/.well -->
             </div><!--/span-->
             <div id="graphic" class="col-md-8">
                 <div id="main" class="main" style="height: 530px;"></div>
                 <div>
                     <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
                     <span class="text-primary">切换主题</span>
                     <select id="theme-select"></select>

                     <span id='wrong-message' style="color:red"></span>
                 </div>
             </div><!--/span-->
         </div><!--/row-->

         </div><!--/.fluid-container-->

     <footer id="footer"></footer>
     <!-- Le javascript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="../asset/js/jquery.min.js"></script>
     <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
     <script src="../asset/js/bootstrap.min.js"></script>
     <script src="../asset/js/echartsExample.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<meta name="robots" content="noindex, nofollow">
	<title>ECharts2 · Example</title>

	<link rel="shortcut icon" href="../asset/ico/favicon.png">

	<link href="../asset/css/font-awesome.min.css" rel="stylesheet">
	<link href="../asset/css/bootstrap.css" rel="stylesheet">
	<link href="../asset/css/carousel.css" rel="stylesheet">
	<link href="../asset/css/echartsHome.css" rel="stylesheet">
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	<script src="./www/js/echarts.js"></script>
	<script src="../asset/js/codemirror.js"></script>
	<script src="../asset/js/javascript.js"></script>

	<link href="../asset/css/codemirror.css" rel="stylesheet">
	<link href="../asset/css/monokai.css" rel="stylesheet">

	<style type="text/css">
	.CodeMirror {
	height: 550px;
	}
	</style>
	</head>

	<body>
	<!-- Fixed navbar -->
	<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>


	<div class="container-fluid">
	<div class="row-fluid example">
	<div id="sidebar-code" class="col-md-4">
	<div class="well sidebar-nav">
	<div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
	<textarea id="code" name="code">
	var itemStyle = {
	normal:{label:{
	show:true,
	formatter:'{b}',
	textStyle: {fontSize: 20,fontWeight : 'bold'}
	}},
	emphasis:{label:{show:true}}
	};
	option = {
	title : {
	text : '2012 World GDP Top 8',
	subtext : 'from baike （Billion $）',
	sublink : 'http://baike.baidu.com/link?url=MyQikkoGI08hUfVmiB0g01ZJ6Wpyu18s8e6XdA3dwcI73-i0J7Ce32LuPNqfEWBj2rUcSfIHYIVI0aL8czbS_a',
	x : 'center'
	},
	tooltip : {
	trigger: 'item',
	showDelay: 0,
	transitionDuration: 0.2,
	formatter : function (params) {
	var value = params.value + '';
	value = value.replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
	return params.seriesName + '<br/>' + value + ' Billion';
	}
	},
	toolbox: {
	show : true,
	x: 'right',
	y: 'bottom',
	feature : {
	mark : {show: true},
	dataView : {show: true, readOnly: false},
	restore : {show: true},
	saveAsImage : {show: true}
	}
	},
	dataRange: {
	orient: 'horizontal',
	x : 'center',
	y: 'center',
	min: 2000,
	max: 16000,
	splitNumber: 0, // 分割段数，默认为5
	text:['16,000B','2,000B'],
	calculable : true,
	itemWidth:40,
	color: ['orangered','yellow','lightskyblue']
	},
	series : [
	{
	name: 'USA',
	type: 'map',
	mapType: 'world\|United States of America',
	mapLocation: {x:'5%', y:'10%',width:'22%',height:'35%'},
	itemStyle: itemStyle,
	data:[
	{name : 'United States of America', value : 15684.7}
	]
	},
	{
	name: 'China',
	type: 'map',
	mapType: 'world\|China',
	mapLocation: {x:'30%', y:'10%',width:'22%',height:'35%'},
	itemStyle: itemStyle,
	itemStyle: itemStyle,
	data:[
	{name : 'China', value : 8227}
	]
	},
	{
	name: 'Japan',
	type: 'map',
	mapType: 'world\|Japan',
	mapLocation: {x:'55%', y:'10%',width:'22%',height:'35%'},
	itemStyle: itemStyle,
	data:[
	{name : 'Japan', value : 5963.9}
	]
	},
	{
	name: 'Germany',
	type: 'map',
	mapType: 'world\|Germany',
	mapLocation: {x:'76%', y:'10%',width:'22%',height:'35%'},
	itemStyle: itemStyle,
	data:[
	{name : 'Germany', value : 3400.5}
	]
	},
	{
	name: 'France',
	type: 'map',
	mapType: 'world\|France',
	mapLocation: {x:'5%', y:'60%',width:'22%',height:'35%'},
	itemStyle: itemStyle,
	data:[
	{name : 'France', value : 2608.6}
	]
	},
	{
	name: 'United Kingdom',
	type: 'map',
	mapType: 'world\|United Kingdom',
	mapLocation: {x:'33%', y:'60%',width:'22%',height:'35%'},
	itemStyle: itemStyle,
	data:[
	{name : 'United Kingdom', value : 2440.5}
	]
	},
	{
	name: 'Brazil',
	type: 'map',
	mapType: 'world\|Brazil',
	mapLocation: {x:'55%', y:'60%',width:'22%',height:'35%'},
	itemStyle: itemStyle,
	data:[
	{name : 'Brazil', value : 2395.9}
	]
	},
	{
	name: 'Russia',
	type: 'map',
	mapType: 'world\|Russia',
	mapLocation: {x:'76%', y:'70%',width:'22%',height:'35%'},
	itemStyle: itemStyle,
	data:[
	{name : 'Russia', value : 2021.9}
	]
	}
	]
	};
	</textarea>
	</div><!--/.well -->
	</div><!--/span-->
	<div id="graphic" class="col-md-8">
	<div id="main" class="main" style="height: 530px;"></div>
	<div>
	<button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷新</button>
	<span class="text-primary">切换主题</span>
	<select id="theme-select"></select>

	<span id='wrong-message' style="color:red"></span>
	</div>
	</div><!--/span-->
	</div><!--/row-->

	</div><!--/.fluid-container-->

	<footer id="footer"></footer>
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="../asset/js/jquery.min.js"></script>
	<script type="text/javascript" src="../asset/js/echartsHome.js"></script>
	<script src="../asset/js/bootstrap.min.js"></script>
	<script src="../asset/js/echartsExample.js"></script>
	</body>
	</html>