doc/example/mix12.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">
 </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">
 // original
 var data = [30, 20, 54, 21, 90, 30, 10];

 var gap = 0;
 var total = 0;
 var maxIndex;
 var dataArray = (function(){
     var max = Math.max.apply(Math, data);
     var min = Math.min.apply(Math, data);
     gap = Math.round((max - min));
     var nd = [{value:data[0] + gap,symbol:'none'}];
     for (var i = 0, l = data.length; i < l; i++) {
         if (data[i] == max) {
             maxIndex = i;
         }
         total += data[i];
         nd.push(data[i] + gap);
     }
     nd.push({value:data[data.length - 1] + gap,symbol:'none'});
     return nd;
 })();

 option = {
     backgroundColor:'#fff',
     title : {
         text: '某楼盘销售情况',
         subtext: '纯属虚构 折线饼图交互混搭实例',
         x: 'center'
     },
     legend: {
         data:['销量', '占比'],
         x: 'left',
         orient: 'vertical',
         selectedMode: false
     },
     tooltip : {
         trigger: 'item',
         formatter: function(params){
             if (params.seriesName == '占比') {
                 return '总量 : ' + total + '<br/>'
                        + params.name + ' : ' + params.value + '<br/>'
                        + '占比 : ' +  params.percent + '%';
             }
             else if (params.name != '占位'){
                 update(params);
                 return params.seriesName + '<br/>'
                        + params.name + ' : ' + params.value;
             }
         },
         axisPointer: {
             type: 'none'
         }
     },
     toolbox: {
         show : true,
         feature : {
             saveAsImage : {show: true}
         }
     },
     grid:{
         backgroundColor:'#ccc',
         borderWidth:0
     },
     xAxis : [
         {
             type : 'category',
             boundaryGap : false,
             show : false,
             data : ['占位','周一','周二','周三','周四','周五','周六','周日','占位']
         }
     ],
     yAxis : [
         {
             type : 'value',
             boundaryGap:[0,0.5],
             show : false
         }
     ],
     animation: false,
     series : [
         {
             name:'销量',
             type:'line',
             symbol: 'emptyCircle',
             symbolSize: 6,
             showAllSymbol:true,
             smooth:true,
             itemStyle: {normal: {areaStyle: {type: 'default'}}},
             data: dataArray
         },
         {
             name:'遮罩',
             type:'pie',
             clickable:false,
             tooltip: {show:false},
             radius : [100, 180],
             itemStyle: {
                 normal: {color: '#fff',label:{show:false},labelLine:{show:false}},
                 emphasis: {color:'rgba(0,0,0,0)'}
             },
             data:[
               {value:100, name:'直接访问'}
             ]
         },
         {
             name:'占比',
             type:'pie',
             clickable: false,
             clockWise: true,
             radius : [110, 125],
             data:[
               {
                   itemStyle: {normal: {
                       label:{
                           position:'inside',
                           formatter: '\n{b} : {c}\n\n( {d}% )',
                           textStyle: {
                               fontSize: 15,
                               baseline: 'top',
                               color: '#1e90ff'
                           }
                       },
                       labelLine:{show:false}
                   }}
               },
               {
                   name:'其他',
                   tooltip: {show:false},
                   itemStyle: {normal: {color: '#fff',label:{show:false},labelLine:{show:false}}}
               }
             ]
         }
     ]
 };
 function changePieSeries(params) {
     var curData = params.value - gap;
     option.series[2].startAngle = -90 + (curData / total * 360) / 2;
     option.series[2].data[0].name = params.name;
     option.series[2].data[0].value = curData;
     option.series[2].data[1].value = total - curData;

     for (var i = 1, l = option.series[0].data.length - 1; i < l; i++) {
         if (option.series[0].data[i].symbol) {
             option.series[0].data[i].symbol = 'emptyCircle';
             option.series[0].data[i].symbolSize = 6;
         }
     }
     option.series[0].data[params.dataIndex] = {
         name : params.name,
         value : params.value,
         symbol: 'emptyDiamond',
         symbolSize: 10
     }
 }
 function update(params){
     changePieSeries(params);
     option.animation = true;
     myChart.setOption(option);
 }
 changePieSeries({
     name : option.xAxis[0].data[maxIndex + 1],
     value : option.series[0].data[maxIndex + 1],
     dataIndex: maxIndex + 1
 });

                     </textarea>
               </div><!--/.well -->
             </div><!--/span-->
             <div id="graphic" class="col-md-8">
                 <div id="main" class="main" style="width:400px;"></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">
	</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">
	// original
	var data = [30, 20, 54, 21, 90, 30, 10];

	var gap = 0;
	var total = 0;
	var maxIndex;
	var dataArray = (function(){
	var max = Math.max.apply(Math, data);
	var min = Math.min.apply(Math, data);
	gap = Math.round((max - min));
	var nd = [{value:data[0] + gap,symbol:'none'}];
	for (var i = 0, l = data.length; i < l; i++) {
	if (data[i] == max) {
	maxIndex = i;
	}
	total += data[i];
	nd.push(data[i] + gap);
	}
	nd.push({value:data[data.length - 1] + gap,symbol:'none'});
	return nd;
	})();

	option = {
	backgroundColor:'#fff',
	title : {
	text: '某楼盘销售情况',
	subtext: '纯属虚构折线饼图交互混搭实例',
	x: 'center'
	},
	legend: {
	data:['销量', '占比'],
	x: 'left',
	orient: 'vertical',
	selectedMode: false
	},
	tooltip : {
	trigger: 'item',
	formatter: function(params){
	if (params.seriesName == '占比') {
	return '总量 : ' + total + '<br/>'
	+ params.name + ' : ' + params.value + '<br/>'
	+ '占比 : ' + params.percent + '%';
	}
	else if (params.name != '占位'){
	update(params);
	return params.seriesName + '<br/>'
	+ params.name + ' : ' + params.value;
	}
	},
	axisPointer: {
	type: 'none'
	}
	},
	toolbox: {
	show : true,
	feature : {
	saveAsImage : {show: true}
	}
	},
	grid:{
	backgroundColor:'#ccc',
	borderWidth:0
	},
	xAxis : [
	{
	type : 'category',
	boundaryGap : false,
	show : false,
	data : ['占位','周一','周二','周三','周四','周五','周六','周日','占位']
	}
	],
	yAxis : [
	{
	type : 'value',
	boundaryGap:[0,0.5],
	show : false
	}
	],
	animation: false,
	series : [
	{
	name:'销量',
	type:'line',
	symbol: 'emptyCircle',
	symbolSize: 6,
	showAllSymbol:true,
	smooth:true,
	itemStyle: {normal: {areaStyle: {type: 'default'}}},
	data: dataArray
	},
	{
	name:'遮罩',
	type:'pie',
	clickable:false,
	tooltip: {show:false},
	radius : [100, 180],
	itemStyle: {
	normal: {color: '#fff',label:{show:false},labelLine:{show:false}},
	emphasis: {color:'rgba(0,0,0,0)'}
	},
	data:[
	{value:100, name:'直接访问'}
	]
	},
	{
	name:'占比',
	type:'pie',
	clickable: false,
	clockWise: true,
	radius : [110, 125],
	data:[
	{
	itemStyle: {normal: {
	label:{
	position:'inside',
	formatter: '\n{b} : {c}\n\n( {d}% )',
	textStyle: {
	fontSize: 15,
	baseline: 'top',
	color: '#1e90ff'
	}
	},
	labelLine:{show:false}
	}}
	},
	{
	name:'其他',
	tooltip: {show:false},
	itemStyle: {normal: {color: '#fff',label:{show:false},labelLine:{show:false}}}
	}
	]
	}
	]
	};
	function changePieSeries(params) {
	var curData = params.value - gap;
	option.series[2].startAngle = -90 + (curData / total * 360) / 2;
	option.series[2].data[0].name = params.name;
	option.series[2].data[0].value = curData;
	option.series[2].data[1].value = total - curData;

	for (var i = 1, l = option.series[0].data.length - 1; i < l; i++) {
	if (option.series[0].data[i].symbol) {
	option.series[0].data[i].symbol = 'emptyCircle';
	option.series[0].data[i].symbolSize = 6;
	}
	}
	option.series[0].data[params.dataIndex] = {
	name : params.name,
	value : params.value,
	symbol: 'emptyDiamond',
	symbolSize: 10
	}
	}
	function update(params){
	changePieSeries(params);
	option.animation = true;
	myChart.setOption(option);
	}
	changePieSeries({
	name : option.xAxis[0].data[maxIndex + 1],
	value : option.series[0].data[maxIndex + 1],
	dataIndex: maxIndex + 1
	});

	</textarea>
	</div><!--/.well -->
	</div><!--/span-->
	<div id="graphic" class="col-md-8">
	<div id="main" class="main" style="width:400px;"></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>